/* ============================================================================
   YOUSUPOVA design tokens
   Три слоя: primitive (сырые значения) → semantic (роли) → component.
   Шесть токенов и два шрифта движка scrollcraft выводятся из семантического
   слоя в конце файла. Движок не правится, он темизируется отсюда.
   ========================================================================== */

/* === PRIMITIVE ============================================================ */
:root {
  /* colour, из логотипа и палитр фотографий (design/BRAND.md §1) */
  --y-paper-50:   #F4F2EE;
  --y-paper-100:  #EBE7E0;
  --y-paper-200:  #D8D4CD;
  --y-stone-400:  #948E81;
  --y-stone-500:  #635E58;
  --y-graphite-700: #3C3936;
  --y-graphite-800: #1D1B19;
  --y-graphite-850: #1F1C19;
  --y-graphite-900: #141312;
  --y-olive-950:  #0F100C;
  --y-bone-300:   #B8B2A9;
  --y-red-400:    #D8604F;
  --y-red-600:    #B0332B;
  --y-red-700:    #8E2822;

  /* type */
  --y-font-sans-tight: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --y-font-sans:       "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --y-fs-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem);
  --y-fs-sm:   clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem);
  --y-fs-base: clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
  --y-fs-lg:   clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --y-fs-xl:   clamp(1.6rem, 1.35rem + 1.2vw, 2.25rem);
  --y-fs-2xl:  clamp(2.1rem, 1.6rem + 2.4vw, 3.4rem);
  --y-fs-3xl:  clamp(2.8rem, 1.9rem + 4.2vw, 5rem);
  --y-fs-4xl:  clamp(3.4rem, 1.9rem + 6.6vw, 7.5rem);
  --y-fs-mega: clamp(3.6rem, 1.4rem + 8.6vw, 10.5rem);

  --y-track-tight: -0.035em;
  --y-track-snug:  -0.02em;
  --y-track-text:  -0.005em;
  --y-track-wide:   0.08em;

  --y-lh-none: 0.94;
  --y-lh-tight: 1.06;
  --y-lh-lead: 1.44;
  --y-lh-body: 1.62;

  /* space, база 4 px */
  --y-sp-1: 0.25rem; --y-sp-2: 0.5rem;  --y-sp-3: 0.75rem; --y-sp-4: 1rem;
  --y-sp-5: 1.5rem;  --y-sp-6: 2rem;    --y-sp-7: 3rem;    --y-sp-8: 4rem;
  --y-sp-9: 6rem;    --y-sp-10: 8rem;   --y-sp-11: 12rem;

  /* radius: одна шкала */
  --y-r-1: 2px;
  --y-r-pill: 999px;

  /* motion */
  --y-ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --y-ease-expo:   cubic-bezier(0.22, 1, 0.36, 1);
  --y-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --y-d-fast: 160ms; --y-d-base: 240ms; --y-d-slow: 420ms; --y-d-veil: 600ms;

  /* layout */
  --y-gutter:  clamp(1.25rem, 4.45vw, 4.5rem);
  --y-section: clamp(4.5rem, 9vw, 11rem);
  --y-section-compact: clamp(3rem, 6vw, 6.5rem);
  --y-maxw: 90rem;
  --y-measure: 62ch;
  --y-header-h: clamp(3.75rem, 5.2vw, 4.75rem);

  --y-z-stage: 1; --y-z-copy: 20; --y-z-panel: 70; --y-z-header: 75; --y-z-veil: 90; --y-z-overlay: 80;
}

/* === SEMANTIC ============================================================= */
:root {
  /* грунт и поверхности (светлая тема по умолчанию: бумага) */
  --y-canvas:      var(--y-paper-50);
  --y-surface:     var(--y-paper-100);
  --y-hairline:    var(--y-paper-200);

  /* чернила */
  --y-ink:         var(--y-graphite-700);
  --y-ink-display: var(--y-graphite-800);
  --y-ink-soft:    var(--y-stone-500);

  /* акцент: одна роль */
  --y-accent:       var(--y-red-600);
  --y-accent-hover: var(--y-red-700);
  --y-accent-ink:   var(--y-paper-50);

  /* медиа */
  --y-scrim: var(--y-olive-950);

  /* фокус и выделение */
  --y-ring: var(--y-accent);
  --y-selection-bg: var(--y-accent);
  --y-selection-ink: var(--y-accent-ink);

  /* тени, тонированы под бумагу и ослаблены вдвое относительно тёмного грунта */
  --y-shadow-hue: 35 12% 20%;
  --y-e1: 0 1px 2px hsl(var(--y-shadow-hue) / 0.10), 0 2px 6px -1px hsl(var(--y-shadow-hue) / 0.08);
  --y-e2: 0 2px 4px hsl(var(--y-shadow-hue) / 0.10), 0 8px 18px -4px hsl(var(--y-shadow-hue) / 0.14);
  --y-e3: 0 4px 8px hsl(var(--y-shadow-hue) / 0.10), 0 18px 40px -8px hsl(var(--y-shadow-hue) / 0.18), 0 48px 90px -24px hsl(var(--y-shadow-hue) / 0.14);
  --y-edge: inset 0 1px 0 rgb(255 255 255 / 0.6);

  /* type roles */
  --y-font-display: var(--y-font-sans-tight);
  --y-font-text:    var(--y-font-sans);
}

/* Тёмный грунт: сцены команды, пика, закрытия, панелей. Restate color на поддереве,
   иначе унаследованный computed color тела останется чернилами бумаги. */
.theme-dark {
  --y-canvas:      var(--y-graphite-900);
  --y-surface:     var(--y-graphite-850);
  --y-hairline:    rgb(244 242 238 / 0.14);
  --y-ink:         var(--y-paper-50);
  --y-ink-display: var(--y-paper-50);
  --y-ink-soft:    var(--y-bone-300);
  --y-accent:       var(--y-red-400);
  --y-accent-hover: var(--y-red-600);
  --y-accent-ink:   var(--y-graphite-900);
  --y-scrim: var(--y-olive-950);
  --y-shadow-hue: 35 10% 4%;
  --y-e1: 0 1px 2px hsl(var(--y-shadow-hue) / 0.28), 0 2px 6px -1px hsl(var(--y-shadow-hue) / 0.20);
  --y-e2: 0 2px 4px hsl(var(--y-shadow-hue) / 0.24), 0 8px 18px -4px hsl(var(--y-shadow-hue) / 0.30);
  --y-e3: 0 4px 8px hsl(var(--y-shadow-hue) / 0.22), 0 18px 40px -8px hsl(var(--y-shadow-hue) / 0.38), 0 48px 90px -24px hsl(var(--y-shadow-hue) / 0.30);
  --y-edge: inset 0 1px 0 rgb(244 242 238 / 0.10);
  color: var(--y-ink);
  background: var(--y-canvas);
}

/* === COMPONENT ============================================================ */
:root {
  /* masthead (хедер) */
  --y-nav-h: var(--y-header-h);
  --y-nav-ink: var(--y-ink-display);
  --y-nav-logo: var(--y-accent);
  --y-nav-fs: var(--y-fs-xs);
  --y-nav-track: var(--y-track-wide);

  /* CTA: одна подпись, одна форма (пилюля) */
  --y-cta-bg: var(--y-accent);
  --y-cta-ink: var(--y-accent-ink);
  --y-cta-bg-hover: var(--y-accent-hover);
  --y-cta-radius: var(--y-r-pill);
  --y-cta-px: 1.35em;
  --y-cta-py: 0.8em;
  --y-cta-fs: var(--y-fs-xs);
  --y-cta-track: var(--y-track-wide);

  /* второстепенная ссылка с линией */
  --y-link-line: currentColor;
  --y-link-offset: 0.28em;

  /* поле формы */
  --y-field-bg: transparent;
  --y-field-line: var(--y-hairline);
  --y-field-line-focus: var(--y-accent);
  --y-field-ink: var(--y-ink);
  --y-field-placeholder: var(--y-ink-soft);
  --y-field-py: var(--y-sp-3);

  /* плитка проекта */
  --y-tile-radius: var(--y-r-1);
  --y-tile-caption-fs: var(--y-fs-xs);
  --y-tile-caption-ink: var(--y-ink-soft);

  /* панели хедера и оверлей */
  --y-panel-bg: var(--y-paper-100);
  --y-panel-ink: var(--y-graphite-800);
  --y-panel-dur: var(--y-d-veil);
  --y-veil-bg: var(--y-graphite-900);
  --y-veil-dur: var(--y-d-veil);

  /* цифры */
  --y-figure-fs: var(--y-fs-mega);
  --y-figure-track: -0.05em;
}

/* === SCROLLCRAFT BRIDGE ===================================================
   Шесть токенов и два шрифта движка выводятся из семантического слоя.
   Тёмные сцены переопределяют их через .theme-dark, так что скримы, тени и
   контраст движка следуют грунту сцены.                                    */
:root {
  --sc-canvas:      var(--y-canvas);
  --sc-surface:     var(--y-surface);
  --sc-ink:         var(--y-ink);
  --sc-ink-soft:    var(--y-ink-soft);
  --sc-accent:      var(--y-accent);
  --sc-accent-ink:  var(--y-accent-ink);
  --sc-font-display: var(--y-font-display);
  --sc-font-text:    var(--y-font-text);
  --sc-font-mono:    var(--y-font-sans);

  --sc-hairline: var(--y-hairline);
  --sc-hairline-strong: color-mix(in oklab, var(--y-ink) 22%, transparent);
  --sc-shadow-color: var(--y-shadow-hue);
  --sc-e1: var(--y-e1); --sc-e2: var(--y-e2); --sc-e3: var(--y-e3);
  --sc-edge: var(--y-edge);
  --sc-gutter: var(--y-gutter);
  --sc-section: var(--y-section);
  --sc-maxw: var(--y-maxw);
  --sc-measure: var(--y-measure);
  --sc-r-sm: var(--y-r-1); --sc-r-md: var(--y-r-1); --sc-r-lg: var(--y-r-1); --sc-r-pill: var(--y-r-pill);
  --sc-ease-out: var(--y-ease-out);
  --sc-z-stage: var(--y-z-stage); --sc-z-copy: var(--y-z-copy); --sc-z-chrome: var(--y-z-header);
}
.theme-dark {
  --sc-canvas: var(--y-canvas); --sc-surface: var(--y-surface);
  --sc-ink: var(--y-ink); --sc-ink-soft: var(--y-ink-soft);
  --sc-accent: var(--y-accent); --sc-accent-ink: var(--y-accent-ink);
  --sc-hairline: var(--y-hairline);
  --sc-shadow-color: var(--y-shadow-hue);
  --sc-e1: var(--y-e1); --sc-e2: var(--y-e2); --sc-e3: var(--y-e3);
  --sc-edge: var(--y-edge);
}