/*
 * Дизайн-токени «Варіант-Стиль» — єдине місце, де задані кольори, шрифти, відступи й тіні.
 * Світла тема — за замовчуванням; темна — html[data-theme="dark"]. Нова тема або колір = правка лише цього файлу.
 * Палітра: лазур (основний акцент), пісок і шавлія (допоміжні, вони ж у знакові), холодні нейтралі.
 */
:root {
  color-scheme: light;
  /* кольори */
  --vs-bg:           #f6f9fa;   /* фон сторінки */
  --vs-bg-soft:      #edf3f5;   /* другий фон секцій */
  --vs-surface:      #ffffff;   /* картки, шапка */
  --vs-raised:       #ffffff;   /* виринаючі шари */
  --vs-text:         #3b4750;
  --vs-muted:        #66767f;
  --vs-heading:      #17242b;
  --vs-border:       #dde6ea;
  --vs-border-soft:  #e8eff2;
  --vs-accent:       #2c7a99;
  --vs-accent-hover: #226682;
  --vs-accent-soft:  #dcebf1;   /* легка підкладка під акцент */
  --vs-on-accent:    #ffffff;
  --vs-sand:         #d8b48a;
  /* Другий акцент (оранжевий) прибрано 03.11.2026: «теплі» токени тепер — той самий основний акцент; повернути оранжевий можна, повернувши значення #c2571a / #a84a13 / #f8e7da / #ffffff (світла) та #cf622a / #e0713a / #3a2417 (темна) */
  --vs-warm:         var(--vs-accent);
  --vs-warm-hover:   var(--vs-accent-hover);
  --vs-warm-soft:    var(--vs-accent-soft);
  --vs-on-warm:      var(--vs-on-accent);
  --vs-sage:         #9fc3b0;
  --vs-danger:       #b3392f;
  --vs-ok:           #2f7d56;
  --vs-overlay:      rgba(16, 24, 28, .55);
  /* тіні (холодні, м’які) */
  --vs-shadow-1: 0 1px 2px rgba(23, 36, 43, .05), 0 6px 18px -8px rgba(23, 36, 43, .10);
  --vs-shadow-2: 0 2px 4px rgba(23, 36, 43, .05), 0 18px 40px -16px rgba(23, 36, 43, .18);
  --vs-shadow-3: 0 30px 70px -24px rgba(23, 36, 43, .30);
  --vs-photo-shadow-md: 2px 7px 15px rgba(23, 36, 43, .27), 1px 3px 6px rgba(23, 36, 43, .17), 0 1px 2px rgba(23, 36, 43, .18), inset 0 0 0 1px rgba(255, 255, 255, .4);   /* середня: для невеликих фото (відгуки) */
  --vs-photo-shadow: 3px 11px 24px rgba(23, 36, 43, .32), 1px 4px 9px rgba(23, 36, 43, .2), 0 1px 2px rgba(23, 36, 43, .2), inset 0 0 0 1px rgba(255, 255, 255, .4);   /* фото-зразок «лежить» над карткою: світло зверху-ліворуч, тінь вниз і вправо */
  --vs-photo-shadow-hover: 6px 18px 36px rgba(23, 36, 43, .38), 2px 6px 14px rgba(23, 36, 43, .24), 0 1px 2px rgba(23, 36, 43, .2), inset 0 0 0 1px rgba(255, 255, 255, .4);
  --vs-photo-shadow-sm: 0 1px 2px rgba(23, 36, 43, .22), 0 6px 12px -4px rgba(23, 36, 43, .3), inset 0 0 0 1px rgba(255, 255, 255, .35);   /* малі мініатюри */
  --vs-logo-shadow-c: rgba(23, 36, 43, .4); --vs-logo-shadow-word-c: rgba(23, 36, 43, .36); --vs-logo-shadow-plate-c: rgba(18, 74, 98, .62);
  /* форма */
  --vs-r-sm: 10px; --vs-r: 16px; --vs-r-lg: 24px; --vs-r-pill: 999px;
  /* шрифти */
  --vs-font-display: 'Unbounded', 'Segoe UI', system-ui, sans-serif;
  --vs-font: 'Golos Text', 'Segoe UI', system-ui, sans-serif;
  /* розмітка */
  --vs-wrap: 1240px; --vs-gutter: clamp(16px, 4vw, 40px);
  --vs-header-h: 80px;
  --vs-gap: clamp(16px, 2.4vw, 28px);
  --vs-section: clamp(48px, 7vw, 96px);
  --vs-ease: cubic-bezier(.22, .8, .24, 1);
}
html[data-theme="dark"] {
  color-scheme: dark;
  --vs-bg:           #0e1519;
  --vs-bg-soft:      #121b20;
  --vs-surface:      #162026;
  --vs-raised:       #1b2830;
  --vs-text:         #b4c2c9;
  --vs-muted:        #8497a1;
  --vs-heading:      #eef4f6;
  --vs-border:       #25343b;
  --vs-border-soft:  #1d2b32;
  --vs-accent:       #6cc0dd;
  --vs-accent-hover: #8dd0e6;
  --vs-accent-soft:  #1c3640;
  --vs-on-accent:    #0b1317;
  --vs-warm:         var(--vs-accent);
  --vs-warm-hover:   var(--vs-accent-hover);
  --vs-warm-soft:    var(--vs-accent-soft);
  --vs-on-warm:      var(--vs-on-accent);
  --vs-danger:       #f08a80;
  --vs-ok:           #7fcaa0;
  --vs-overlay:      rgba(0, 0, 0, .62);
  --vs-shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px -8px rgba(0, 0, 0, .5);
  --vs-shadow-2: 0 2px 4px rgba(0, 0, 0, .4), 0 18px 40px -16px rgba(0, 0, 0, .6);
  --vs-shadow-3: 0 30px 70px -24px rgba(0, 0, 0, .7);
  --vs-photo-shadow-md: 2px 8px 17px rgba(0, 0, 0, .6), 1px 3px 6px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .12);
  --vs-photo-shadow: 3px 12px 26px rgba(0, 0, 0, .7), 1px 4px 9px rgba(0, 0, 0, .55), 0 1px 2px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .12);
  --vs-photo-shadow-hover: 6px 20px 40px rgba(0, 0, 0, .8), 2px 7px 14px rgba(0, 0, 0, .6), 0 1px 2px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .16);
  --vs-photo-shadow-sm: 0 1px 2px rgba(0, 0, 0, .6), 0 7px 13px -4px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .1);
  --vs-logo-shadow-c: rgba(0, 0, 0, .58); --vs-logo-shadow-word-c: rgba(0, 0, 0, .55); --vs-logo-shadow-plate-c: rgba(0, 0, 0, .75);
}