/* ==========================================================================
   Токены дизайна — design/DESIGN-v3.md («Утро», светлое стекло), раздел 2
   Все цвета сайта живут только здесь: в остальных файлах только var(--…).
   ========================================================================== */

:root {
  color-scheme: light;

  /* База и небо */
  --base:        #F5F1EC;
  --sky-peach:   #FFC9AE;
  --sky-apricot: #FF9E6E;
  --sky-blue:    #BCD6FF;
  --sky-mint:    #C8F0DE;

  /* Стекло */
  --glass:        rgba(255, 255, 255, 0.56);
  --glass-hi:     rgba(255, 255, 255, 0.74);
  --glass-row:    rgba(255, 255, 255, 0.72);
  --glass-solid:  rgba(253, 250, 247, 0.94);
  --edge:         rgba(255, 255, 255, 0.85);
  --divider:      rgba(255, 255, 255, 0.85);
  --hair:         rgba(20, 22, 28, 0.12);
  --blur:         blur(20px) saturate(1.5);
  --blur-sm:      blur(12px) saturate(1.4);

  /* Текст */
  --ink:          #14161C;
  --muted:        #474D5A;
  --placeholder:  #6A7080;
  --line-strong:  #7A808C;

  /* Акцент */
  --accent:       #FF6B3D;
  --accent-hi:    #FF8A60;
  --accent-lo:    #F2551F;
  --accent-press: #E24A17;
  --accent-hot:   #FFB089;
  --accent-ink:   #B83A12;
  --on-accent:    #14161C;
  --grad-accent:  linear-gradient(180deg, var(--accent-hi) 0%, var(--accent) 60%, var(--accent-lo) 100%);
  --grad-title:   linear-gradient(95deg, #B8380F 0%, #CC4513 100%);
  --accent-a16:   rgba(255, 107, 61, 0.16);
  --accent-a28:   rgba(255, 107, 61, 0.28);
  --accent-a55:   rgba(255, 107, 61, 0.55);

  /* Тёмная керамика */
  --ceramic-hi:   #4A443E;
  --ceramic:      #2A2622;
  --ceramic-lo:   #1C1A18;
  --seam:         #FF7A4A;
  --stage:        #17171B;
  --stage-text: #F3EEE5; --stage-muted: #A9A397; --stage-surface: #1C1B18; --stage-surface-2: #24221E;
  --stage-line: #2E2C27; --stage-line-strong: #6B665C; --stage-success: #6FD39A; --stage-on-accent: #0B0B0A;
  --on-ceramic:   rgba(243, 238, 229, 0.86);
  --glaze-grain-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .07 0 0 0 0 .06 0 0 0 0 .05 0 0 0 .7 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Состояния */
  --success:      #0B6B40;
  --success-dot:  #16A34A;
  --error:        #B3203A;
  --error-a08:    rgba(179, 32, 58, 0.08);
  --error-a14:    rgba(179, 32, 58, 0.14);
  --focus:        #B83A12;

  /* Тени */
  --sh-glass:        0 1px 0 rgba(255,255,255,0.9) inset, 0 30px 60px -30px rgba(60,40,80,0.25);
  --sh-glass-lg:     0 1px 0 rgba(255,255,255,0.9) inset, 0 40px 80px -36px rgba(60,40,80,0.30);
  --sh-float:        0 18px 40px -20px rgba(60,40,80,0.28);
  --sh-float-up:     0 18px 40px -16px rgba(60,40,80,0.32);
  --sh-accent:       inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -2px 0 rgba(160,40,0,0.15), 0 14px 28px -12px rgba(255,90,31,0.70);
  --sh-accent-hover: inset 0 1px 0 rgba(255,255,255,0.55), 0 22px 36px -14px rgba(255,90,31,0.75);
  --sh-glow:         0 0 0 1.5px var(--accent-a55), 0 40px 80px -30px rgba(255,90,31,0.55);
  --sh-object:       rgba(60, 30, 30, 0.28);

  /* Служебные цвета поверх стекла и видео */
  --white:        #FFFFFF;
  --white-a60:    rgba(255, 255, 255, 0.60);
  --white-a62:    rgba(255, 255, 255, 0.62);
  --white-a70:    rgba(255, 255, 255, 0.70);
  --white-a85:    rgba(255, 255, 255, 0.85);
  --ink-a18:      rgba(20, 22, 28, 0.18);
  --ink-a28:      rgba(20, 22, 28, 0.28);
  --ink-a30:      rgba(20, 22, 28, 0.30);
  --shadow-menu:  rgba(60, 40, 80, 0.30);

  /* Радиусы */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-btn: 18px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  /* Типографика (раздел 5) */
  --font-display: "Unbounded", "Onest", system-ui, sans-serif;
  --font-body: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

  --fs-display: clamp(3.75rem, 2.2rem + 6.75vw, 8.25rem);
  --fs-h2:      clamp(2.25rem, 1.722rem + 2.254vw, 3.75rem);
  --fs-h2-key:  clamp(2.25rem, 1.6rem + 2.8vw, 4rem);
  --fs-h3:      clamp(1.3125rem, 1.2rem + 0.47vw, 1.625rem);
  --fs-lead:    clamp(1.0625rem, 0.99rem + 0.3vw, 1.25rem);
  --fs-body:    clamp(1rem, 0.956rem + 0.188vw, 1.0625rem);
  --fs-small:   0.875rem;
  --fs-label:   0.75rem;
  --fs-fact:    clamp(1.5rem, 1.33rem + 0.7vw, 1.875rem);
  --fs-price:   clamp(2.5rem, 2.3rem + 0.85vw, 2.75rem);
  --fs-metric:  clamp(2rem, 1.62rem + 1.6vw, 3rem);

  /* Сетка */
  --pad: 16px;
  --container-max: clamp(1280px, 86vw, 1720px);
  --container: min(100% - 2 * var(--pad), var(--container-max));
  --container-vw: min(100vw - 2 * var(--pad), var(--container-max));
  --hero-pad: max(var(--pad), (100% - var(--container-max)) / 2);
  --hero-pad-vw: max(var(--pad), (100vw - var(--container-max)) / 2);
  --gutter: 12px;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 160px;

  --section-y: clamp(4rem, 2.6rem + 6vw, 6rem);
  --section-y-calm: var(--section-y);
  --head-gap:  32px;

  --header-h: 80px;

  /* Движение */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-reveal: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;

  /* ---------- Старые имена (v2) со светлыми значениями: на них пишут motion.css, lab.css и скрипты (DESIGN-v3 2.2) ---------- */
  --bg:          var(--base);
  --bg-2:        var(--base);
  --surface:     var(--glass);
  --surface-2:   var(--glass-row);
  --line:        var(--hair);
  --line-ghost:  var(--ink-a30);
  --line-chip:   var(--edge);
  --text:        var(--ink);
  --text-soft:   var(--ink);
  --faint:       var(--muted);
  --ink-muted:   var(--muted);
  --accent-hover: var(--accent-hi);
  --accent-glow: var(--accent-a28);
  --accent-a07:  rgba(255, 107, 61, 0.07);
  --accent-a08:  rgba(255, 107, 61, 0.08);
  --accent-a10:  rgba(255, 107, 61, 0.10);
  --accent-a14:  rgba(255, 107, 61, 0.14);
  --accent-a18:  rgba(255, 107, 61, 0.18);
  --accent-a26:  rgba(255, 107, 61, 0.26);
  --header-bg:        var(--glass-hi);
  --header-bg-solid:  var(--glass-solid);
  --mbar-bg:          var(--glass-hi);
  --mbar-bg-solid:    var(--glass-solid);
  --chip-glass:  rgba(20, 22, 28, 0.60);
  --m6-hi: var(--ceramic-hi); --m6-mid: var(--ceramic); --m6-lo: var(--ceramic-lo);
  --m6-drop:     rgba(60, 30, 30, 0.45);
  --m6-track:    rgba(255, 255, 255, 0.30);
  --m6-chip-line: rgba(255, 255, 255, 0.20);
  --shadow-card:   var(--sh-glass);
  --shadow-accent: var(--sh-accent);
}

@media (min-width: 400px) {
  :root { --pad: 20px; }
}
@media (min-width: 600px) {
  :root { --gutter: 16px; }
}
@media (min-width: 768px) {
  :root { --pad: 32px; --gutter: 20px; }
}
@media (min-width: 1024px) {
  :root { --pad: 40px; --gutter: 24px; --header-h: 100px; --head-gap: 44px; }
}
@media (min-width: 1440px) {
  :root { --pad: 48px; --gutter: 32px; }
}
@media (min-width: 1800px) {
  :root { --gutter: 40px; }
}
@media (max-width: 374px) {
  :root { --fs-display: 3.5rem; }
}