/* TurboShop "Ламінар" design tokens — v0.1 proposal (2026-10-07), awaiting owner review.
 *
 * FONTS (connect in the theme, NOT imported here):
 *   Display: "Science Gothic" (Google Fonts, OFL) — variable axes wdth 50..200, wght 100..900, CTRS 0..85.
 *            Needed: wdth 75..200, wght 500..800, CTRS 0..40. Subsets: cyrillic, latin. font-display: swap.
 *            Use only for hero/scene display type and prices; never for body or forms.
 *   Text:    "Golos Text" (Google Fonts, OFL) — variable wght 400..900. Needed: 400, 500, 600, 700.
 *   Fallback display if specimen check fails (ґ/є/ї, lowercase quality): "Geologica" (wght 500..800, SHRP 0..100).
 *
 * COLOURS: neutrals are tuned to the pure-white product JPGs; SKU colours are medians measured from real
 * store photos (preview/media/p/<pid>/<i>-700.jpg), not invented brand colours. Old theme colours
 * (#e46724, #092a42, light-blue background) are intentionally absent.
 * Contrast values are WCAG 2.x ratios computed for these exact hex pairs.
 */
:root {
  /* ---------- Neutrals ---------- */
  --t-white: #ffffff;          /* product stage + cards: MUST stay pure white to merge with JPG backgrounds */
  --t-air: #eff1f3;            /* page background (cool, from Dyson Nickel light side) */
  --t-mist: #e1e4e8;           /* input fill, skeleton, hover fill on air */
  --t-line: #c9cdd3;           /* non-text borders only (1.6:1 on white — decorative/structural) */
  --t-line-strong: #8d929a;    /* input borders: 3.1:1 on white (WCAG 1.4.11 non-text) */
  --t-ink: #2a2936;            /* text; deepened from SKU "Ink" (HushJet 3774, measured #383747). 14.3:1 on white, 12.6:1 on air */
  --t-ink-2: #5b5e63;          /* secondary text: 6.5:1 on white, 5.75:1 on air, 5.1:1 on mist */
  --t-night: #17161f;          /* energy scene / dark surfaces; white text 17.9:1 */

  /* ---------- Action (one colour for all buying actions) ---------- */
  --t-act: #4a5392;            /* Vinca Blue, measured 3704/3 body. White text 7.1:1; on air 6.3:1 */
  --t-act-hover: #3d4580;      /* white text 8.9:1 */
  --t-act-press: #333a6e;
  --t-act-soft: #e6e7f0;       /* 14% Vinca tint: selected chip/row background */
  --t-act-on-night: #b9bdf0;   /* links/focus on --t-night: 9.9:1 */
  --t-on-act: #ffffff;

  /* ---------- Status ---------- */
  --t-error: #980916;          /* Velvet Red, measured 3763/3. 8.8:1 on white, 7.8:1 on air */
  --t-error-soft: #f1ddde;
  --t-ok: #3f5a12;             /* deepened Fossibot lime: 7.8:1 on white */
  --t-ok-soft: #f7fbe7;
  --t-signal: #c5e052;         /* Fossibot lime, measured 3876/1. Fill only, with --t-ink text (9.6:1). Never text on white */
  --t-warn-ink: #763729;       /* deep Topaz: 7.5:1 on its tint */
  --t-warn-soft: #f6e8e5;

  /* ---------- SKU finishes (measured medians; -tint = 14% on white, multiply-safe; -deep = 38% value) ---------- */
  --t-sku-vinca: #4a5392;       --t-sku-vinca-tint: #e6e7f0;       --t-sku-vinca-deep: #2e335b;       /* 3704/3 */
  --t-sku-topaz: #bf5942;       --t-sku-topaz-tint: #f6e8e5;       --t-sku-topaz-deep: #763729;       /* 3704/3, 3617/3 */
  --t-sku-jasper: #6f5e65;      --t-sku-jasper-tint: #ebe8e9;      --t-sku-jasper-deep: #453a3f;      /* 3712/3 */
  --t-sku-amber: #9e5b49;       --t-sku-amber-tint: #f1e8e6;       --t-sku-amber-deep: #62382d;       /* 3694/1 */
  --t-sku-champagne: #d1b0ae;   --t-sku-champagne-tint: #f9f4f4;   --t-sku-champagne-deep: #826d6c;   /* 3694/1 collar */
  --t-sku-strawberry: #874038;  --t-sku-strawberry-tint: #eee4e3;  --t-sku-strawberry-deep: #542823;  /* 3710/3 */
  --t-sku-blush: #eacbc7;       --t-sku-blush-tint: #fcf8f7;                                          /* 3710/3 collar */
  --t-sku-velvet: #980916;      --t-sku-velvet-tint: #f1ddde;      --t-sku-velvet-deep: #5e060e;      /* 3763/3 */
  --t-sku-patina: #7cbdbf;      --t-sku-patina-tint: #edf6f6;      --t-sku-patina-deep: #4d7576;      /* 3617 (k-means) */
  --t-sku-ink: #383747;         --t-sku-ink-tint: #e3e3e5;         --t-sku-ink-deep: #23222c;         /* 3774/0 */
  --t-sku-carnelian: #be3f39;   --t-sku-carnelian-tint: #f6e4e3;   --t-sku-carnelian-deep: #762723;   /* 3773/0 (k-means) */
  --t-sku-stone: #eddfd5;       --t-sku-stone-tint: #fcfbf9;                                          /* 3637/0 */
  --t-sku-prussian: #20254a;    --t-sku-prussian-tint: #e0e0e6;                                       /* 3716/0 */
  --t-sku-kanzan: #be7f78;      --t-sku-kanzan-tint: #f6edec;      --t-sku-kanzan-deep: #764f4a;      /* 3714/0 case */
  --t-sku-smeg-blue: #a6c3e1;   --t-sku-smeg-blue-tint: #f3f7fb;   --t-sku-smeg-blue-deep: #67798c;   /* 3737/0 */
  --t-sku-smeg-cream: #f4f0e6;                                                                        /* 3660/0 */
  --t-sku-nickel: #737070;      --t-sku-nickel-tint: #ebebeb;      --t-sku-nickel-deep: #474545;      /* 3650/10 */
  --t-sku-lime: #c5e052;        --t-sku-lime-tint: #f7fbe7;        --t-sku-lime-deep: #7a8b33;        /* 3876/1 */
  --t-sku-graphite: #5c5f5c;                                                                          /* 3876/1 body */
  /* Scene mask defaults (components override per scene; mask = finish colour mixed with white) */
  --t-mask-strength: 38%;       /* use: color-mix(in oklab, var(--t-sku-x) var(--t-mask-strength), var(--t-white)) */

  /* ---------- Typography ---------- */
  --t-font-display: "Science Gothic", "Geologica", "Golos Text", system-ui, sans-serif;
  --t-font-text: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --t-font-num: "Golos Text", system-ui, sans-serif; /* with font-variant-numeric: tabular-nums lining-nums */

  --t-fs-giant: clamp(4.5rem, 1rem + 15vw, 15rem);     /* kinetic word behind the stage, aria-hidden */
  --t-fs-display: clamp(2.25rem, 1.2rem + 4.4vw, 5.25rem);
  --t-fs-h1: clamp(1.75rem, 1.3rem + 1.9vw, 3rem);
  --t-fs-h2: clamp(1.375rem, 1.15rem + 1vw, 2.25rem);
  --t-fs-h3: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  --t-fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --t-fs-body: 1rem;
  --t-fs-small: 0.875rem;
  --t-fs-micro: 0.75rem;                                /* legal/meta only, never prices or errors */
  --t-fs-price: clamp(1.5rem, 1.3rem + 0.9vw, 2.125rem);
  --t-fs-price-card: 1.25rem;

  --t-lh-tight: 1.02;   /* display */
  --t-lh-head: 1.15;
  --t-lh-body: 1.55;
  --t-lh-ui: 1.3;
  --t-measure: 68ch;    /* max line length for prose */

  --t-wght-text: 400; --t-wght-medium: 500; --t-wght-semibold: 600; --t-wght-bold: 700;
  --t-wdth-rest: 100;   /* Science Gothic width at rest */
  --t-wdth-wide: 160;   /* width during "gust" / transition */
  --t-wdth-max: 200;
  --t-track-display: -0.01em;
  --t-track-giant: -0.03em;

  /* ---------- Layout ---------- */
  /* Breakpoints (use in media queries literally; custom props cannot be used in @media):
     xs 320 | sm 390 | md 600 | lg 900 | xl 1200 | 2xl 1440 | max 1920 */
  --t-page-max: 1440px;
  --t-page-wide: 1920px;
  --t-margin: clamp(1rem, 0.4rem + 3vw, 4rem);
  --t-gutter: clamp(0.75rem, 0.5rem + 1.2vw, 2rem);
  --t-cols: 4;          /* 4 < 600px, 8 at 600–899, 12 from 900 (set in media queries) */
  --t-header-h: 56px;   /* 64px from 900px */
  --t-buybar-h: 64px;   /* + env(safe-area-inset-bottom) */
  --t-tap: 44px;        /* minimum target */

  /* ---------- Spacing (4px base) ---------- */
  --t-s-1: 0.25rem; --t-s-2: 0.5rem; --t-s-3: 0.75rem; --t-s-4: 1rem; --t-s-5: 1.5rem;
  --t-s-6: 2rem; --t-s-7: 3rem; --t-s-8: 4rem; --t-s-9: 6rem; --t-s-10: 8rem; --t-s-11: 12rem;
  --t-section: clamp(4rem, 2rem + 8vw, 10rem);

  /* ---------- Radii: hierarchy by size, not one radius everywhere ---------- */
  --t-r-xs: 4px;        /* checkbox, focus inset, tiny tags */
  --t-r-sm: 10px;       /* inputs, menu rows, thumbnails */
  --t-r-md: 16px;       /* product cards, accordions, toasts */
  --t-r-lg: 28px;       /* modals, drawers (top corners), galleries */
  --t-r-stage: 999px;   /* the product stage capsule ends and primary buttons / chips (stadium) */

  /* ---------- Elevation: cards have none; only floating layers lift ---------- */
  --t-shadow-float: 0 18px 48px -20px rgb(42 41 54 / 0.32), 0 2px 6px rgb(42 41 54 / 0.08);
  --t-shadow-bar: 0 -8px 24px -12px rgb(42 41 54 / 0.28);
  --t-scrim: rgb(23 22 31 / 0.48);

  /* ---------- Focus ---------- */
  --t-focus: 0 0 0 2px var(--t-white), 0 0 0 4px var(--t-act);   /* visible on white, air, tints and photos */
  --t-focus-night: 0 0 0 2px var(--t-night), 0 0 0 4px var(--t-act-on-night);

  /* ---------- Motion ---------- */
  --t-dur-instant: 90ms;   /* press feedback */
  --t-dur-fast: 160ms;     /* hover, chip select */
  --t-dur-base: 240ms;     /* accordion, dropdown, toast in */
  --t-dur-slow: 420ms;     /* drawer, modal, mask colour morph */
  --t-dur-scene: 900ms;    /* in-view scene entrance */
  --t-dur-hero: 1400ms;    /* one page-load sequence on home */
  --t-ease-laminar: cubic-bezier(0.22, 0.8, 0.24, 1);   /* default: fast start, long calm settle */
  --t-ease-spool: cubic-bezier(0.7, 0, 0.2, 1);         /* "turbo spool-up": hold, rush, settle — transitions between states */
  --t-ease-exit: cubic-bezier(0.4, 0, 1, 1);            /* leaving elements */
  --t-ease-scrub: linear;                               /* scroll-linked progress; easing lives in keyframes */
  --t-stagger: 40ms;                                    /* per letter/line, max 12 steps */

  /* ---------- Layers ---------- */
  --t-z-scene: 1; --t-z-sticky: 50; --t-z-header: 60; --t-z-buybar: 70;
  --t-z-drawer: 80; --t-z-modal: 90; --t-z-toast: 100;
}

@media (min-width: 600px) { :root { --t-cols: 8; } }
@media (min-width: 900px) { :root { --t-cols: 12; --t-header-h: 64px; } }

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-dur-fast: 0ms; --t-dur-base: 0ms; --t-dur-slow: 0ms;
    --t-dur-scene: 0ms; --t-dur-hero: 0ms; --t-stagger: 0ms;
    /* --t-dur-instant stays: press feedback is state, not motion */
  }
}