/* «Колечки» — shared design tokens for the landing (/) and the studio (/studio).
   Source of truth: docs/STUDIO_SPEC.md §2. Owned by the design lead: change values only through the spec.
   Themes: :root = «Свеча» (dark, brand default) · :root[data-theme="day"] = «День» (parchment, honest metal colour).
   Every page sets <html data-theme> with the inline <head> script from STUDIO_SPEC.md §8.1 before first paint.
   Not used by /lab (legacy src/ui/styles.css). Unlayered app CSS always wins over the layers below. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=JetBrains+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

@layer kolechki.base, kolechki.utilities;

/* ============================================================== tokens: «Свеча» (default) */
:root {
  color-scheme: dark;

  /* ---- velvet: page, panels, inputs, hover */
  --velvet-0: #07060A;              /* page + 3D backdrop edge («чернее чёрного», violet undertone) */
  --velvet-1: #0E0C11;              /* panels */
  --velvet-2: #16131A;              /* raised: inputs, cards */
  --velvet-3: #201C25;              /* hover */
  --velvet-4: #2A2530;              /* pressed, selected row */
  --hairline: rgba(236, 230, 221, .10);
  --hairline-strong: rgba(236, 230, 221, .22);

  /* ---- ink («кость»). Contrast on --velvet-0: ink 16.3, ink-2 7.6, ink-3 5.3 (ink-3 only on velvet-0/1/2) */
  --ink: #ECE6DD;
  --ink-2: #A69E94;
  --ink-3: #8A8279;
  --ink-inverse: #16131A;

  /* ---- metal & light */
  --silver: #C9CCD1;                /* = METALS.steel.color */
  --oxide: #7D7F84;
  --candle: #F2B872;                /* warm light: italic accent, focus, selection, hotspots, manual-edit flash */
  --candle-hi: #FFD29A;
  --candle-dim: rgba(242, 184, 114, .18);
  --candle-faint: rgba(242, 184, 114, .08);
  --moon: #A9BCDD;                  /* cold moonlight: ONLY the AI apprentice (proposal rim, AI version dots, its bar) */
  --moon-dim: rgba(169, 188, 221, .18);

  /* ---- garnet: the one loud colour — primary CTA of the screen + wax seal only */
  --garnet: #8E1426;
  --garnet-hi: #A51A2E;             /* hover */
  --garnet-press: #6E0F1D;
  --garnet-text: #E0566B;           /* garnet as text on dark, 5.5:1 */
  --on-garnet: #F6F0E8;             /* text on garnet fill, 8.1:1 */
  --blood: #4A0812;                 /* deep gradients, seal shadow */

  /* ---- status */
  --ok: #8DB89A;                    /* patina */
  --warn: #E0AE62;                  /* amber */
  --bad: #E0566B;
  --info: var(--moon);

  /* ---- surfaces */
  --scrim: rgba(7, 6, 10, .72);
  --glass-bg: color-mix(in srgb, var(--velvet-1) 64%, transparent);
  --glass-bg-solid: rgba(14, 12, 17, .94);   /* no backdrop-filter / tier low */
  --glass-blur: 18px;
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .04);
  --scene-bg: #07060A;              /* 3D backdrop must converge exactly to this at the viewport edges */
  --scene-warmth: 0;                /* 0..1, written by the candle (landing), slightly warms hairlines */

  /* ---- metal swatches (= src/catalog/materials.js METALS[k].color; workshop metals only) */
  --metal-steel: #C9CCD1;
  --metal-aluminum: #D5D8DC;
  --metal-anodized-red: #B3152B;
  --metal-brass: #CFAE62;
  --metal-copper: #C8794F;

  /* ---- semantic light (3D overlays use the same hex: src/ui/interact/highlight.js LIGHT) */
  --light-hover: rgba(242, 184, 114, .40);
  --light-select: #F2B872;
  --light-edit: #FFD29A;
  --light-ai: #A9BCDD;
  --light-remove: rgba(169, 188, 221, .25);
  --light-issue: #E0AE62;

  /* ---- focus */
  --focus-ring: 0 0 0 2px var(--velvet-0), 0 0 0 4px var(--candle);

  /* ---- type families */
  --font-display: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;   /* >= 20px ONLY */
  --font-ui: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

  /* ---- type scale: size / line-height / tracking / weight */
  --fs-mega: clamp(48px, 12vw, 184px);    --lh-mega: .86;    --ls-mega: -.035em;  --fw-mega: 300;   /* first screen only */
  --fs-display: clamp(44px, 7vw, 120px);  --lh-display: .92; --ls-display: -.03em; --fw-display: 300;
  --fs-h1: clamp(34px, 4.6vw, 72px);      --lh-h1: 1.0;      --ls-h1: -.02em;      --fw-h1: 400;
  --fs-h2: clamp(28px, 3.2vw, 48px);      --lh-h2: 1.08;     --ls-h2: -.015em;     --fw-h2: 500;
  --fs-h3: 24px;                          --lh-h3: 1.2;      --ls-h3: 0;           --fw-h3: 600;
  --fs-title: 20px;                       --lh-title: 1.2;   --ls-title: 0;        --fw-title: 600;  /* part name in the inspector */
  --fs-price: 40px;                       --lh-price: 1;     --ls-price: -.01em;   --fw-price: 500;  /* price tag */
  --fs-lead: clamp(17px, 1.4vw, 20px);    --lh-lead: 1.6;
  --fs-body: 15px;                        --lh-body: 1.6;
  --fs-body-lg: 17px;
  --fs-ui: 13px;                          --lh-ui: 1.3;      --ls-ui: .01em;       --fw-ui: 600;
  --fs-ui-lg: 14px;
  --fs-cap: 11px;                         --lh-cap: 1.2;     --ls-cap: .2em;       --fw-cap: 700;    /* overlines, uppercase */
  --fs-mono: 12px;                        --lh-mono: 1.4;
  --fs-mono-lg: 14px;
  --fs-micro: 11px;                       --lh-micro: 1.45;  /* legal small print, Manrope 500 */

  /* ---- spacing (4px step) */
  --s-0: 0;     --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;  --s-5: 20px;  --s-6: 24px;
  --s-8: 32px;  --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px;
  --gutter: 24px;
  --section-pad: clamp(80px, 14vh, 180px);
  --maxw: 1440px;
  --measure-head: 34ch;
  --measure-text: 60ch;

  /* ---- radii & frames */
  --r-0: 0;         /* sections, full sheets */
  --r-1: 3px;       /* inputs */
  --r-2: 8px;       /* cards, panels */
  --r-3: 14px;      /* popovers, bottom sheet */
  --r-pill: 999px;  /* chips, segments */
  --arch-k: .866;   /* lancet arch: springing height = .866 × width (src/ui/kit/arch.js) */
  --casket: inset 0 0 0 1px var(--hairline), inset 0 0 0 4px var(--velvet-1), inset 0 0 0 5px var(--hairline);

  /* ---- shadows & glows (on dark, depth comes from light and inner edges) */
  --shadow-case: inset 0 1px 0 rgba(255, 255, 255, .04), 0 30px 80px -20px rgba(0, 0, 0, .85);
  --shadow-float: 0 12px 32px -12px rgba(0, 0, 0, .9), 0 0 0 1px var(--hairline);
  --shadow-pop: 0 18px 48px -16px rgba(0, 0, 0, .9), 0 0 0 1px var(--hairline-strong);
  --glow-candle: 0 0 0 1px rgba(242, 184, 114, .28), 0 0 40px -6px rgba(242, 184, 114, .35);   /* focus, active hotspot, selected row */
  --glow-garnet: 0 0 0 1px rgba(195, 34, 63, .5), 0 0 30px -4px rgba(195, 34, 63, .55);         /* primary CTA, seal */
  --glow-moon: 0 0 0 1px rgba(169, 188, 221, .30), 0 0 36px -6px rgba(169, 188, 221, .35);      /* AI only */

  /* ---- motion: metal is heavy, light is slow; UI never bounces */
  --t-micro: 120ms;       /* hover, press */
  --t-ui: 220ms;          /* segment change, popover */
  --t-panel: 420ms;       /* panels, sheets */
  --t-odometer: 300ms;    /* price digits */
  --t-curtain: 450ms;     /* velvet curtain between landing acts */
  --t-flash: 900ms;       /* edit / AI rim flash, new part swing */
  --t-camera: 1400ms;
  --t-camera-long: 2400ms;
  --t-cine: 14s;          /* idle camera breathing */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-cam: cubic-bezier(.37, 0, .63, 1);
  --ease-wax: cubic-bezier(.7, 0, .2, 1);

  /* ---- layout sizes */
  --topbar-h: 56px;
  --topbar-h-phone: 48px;
  --rail-w: 56px;
  --drawer-w: 320px;
  --inspector-w: 360px;
  --statusbar-h: 32px;
  --copilot-w: 640px;
  --copilot-sheet-h: 440px;
  --sheet-peek: 88px;
  --minitag-h: 52px;
  --touch: 44px;            /* min touch target */
  --hotspot: 14px;          /* visible eyelet */
  --hotspot-hit: 44px;      /* hit area */

  /* ---- layers */
  --z-canvas: 0;
  --z-scene-ui: 10;         /* hotspots, callouts, labels over the canvas */
  --z-panels: 20;
  --z-topbar: 30;
  --z-sheet: 40;
  --z-popover: 50;
  --z-toast: 60;
  --z-modal: 70;
  --z-grain: 80;            /* pointer-events: none */

  /* ---- texture */
  --grain-opacity: .035;    /* landing only; static */
  --vignette-css: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0, 0, 0, .45) 100%);   /* tier low */
}

/* ============================================================== tokens: «День» */
:root[data-theme="day"] {
  color-scheme: light;
  --velvet-0: #F3EEE6;              /* parchment */
  --velvet-1: #FBF8F3;
  --velvet-2: #FFFFFF;
  --velvet-3: #EAE3D8;
  --velvet-4: #DED5C7;
  --hairline: rgba(22, 19, 26, .10);
  --hairline-strong: rgba(22, 19, 26, .22);

  /* contrast on --velvet-0: ink 15.9, ink-2 7.1, ink-3 4.9 */
  --ink: #16131A;
  --ink-2: #574E45;
  --ink-3: #6F665D;
  --ink-inverse: #ECE6DD;

  --silver: #6F737A;
  --oxide: #55585E;
  --candle: #8F5416;                /* candle as text/line on parchment, 5.3:1 */
  --candle-hi: #A8661F;
  --candle-dim: rgba(168, 102, 31, .14);
  --candle-faint: rgba(168, 102, 31, .07);
  --moon: #3E5478;
  --moon-dim: rgba(62, 84, 120, .14);

  --garnet: #8E1426;
  --garnet-hi: #A51A2E;
  --garnet-press: #6E0F1D;
  --garnet-text: #8E1426;           /* 8.0:1 */
  --on-garnet: #F6F0E8;
  --blood: #5A0A17;

  --ok: #2F6B44;
  --warn: #7E5209;
  --bad: #A81A30;

  --scrim: rgba(243, 238, 230, .78);
  --glass-bg: color-mix(in srgb, var(--velvet-1) 72%, transparent);
  --glass-bg-solid: rgba(251, 248, 243, .96);
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .6);
  --scene-bg: #F3EEE6;

  /* 3D overlays keep their hex (the scene is lit by the 'day' preset); only CSS twins adapt */
  --light-hover: rgba(168, 102, 31, .40);
  --light-select: #A8661F;

  --focus-ring: 0 0 0 2px var(--velvet-0), 0 0 0 4px var(--candle);

  --shadow-case: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 24px 60px -24px rgba(40, 28, 16, .35);
  --shadow-float: 0 10px 28px -12px rgba(40, 28, 16, .35), 0 0 0 1px var(--hairline);
  --shadow-pop: 0 16px 40px -16px rgba(40, 28, 16, .4), 0 0 0 1px var(--hairline-strong);
  --glow-candle: 0 0 0 1px rgba(168, 102, 31, .35), 0 0 24px -6px rgba(168, 102, 31, .3);
  --glow-garnet: 0 0 0 1px rgba(142, 20, 38, .45), 0 0 22px -6px rgba(142, 20, 38, .35);
  --glow-moon: 0 0 0 1px rgba(62, 84, 120, .35), 0 0 22px -6px rgba(62, 84, 120, .3);

  --grain-opacity: .025;
  --vignette-css: radial-gradient(120% 90% at 50% 45%, transparent 60%, rgba(60, 40, 20, .12) 100%);
}

/* ---- phone */
@media (max-width: 767px) {
  :root { --gutter: 16px; }
}

/* ---- users who ask for more contrast */
@media (prefers-contrast: more) {
  :root { --hairline: rgba(236, 230, 221, .22); --hairline-strong: rgba(236, 230, 221, .4); --ink-2: #C2BAB0; --ink-3: #A69E94; }
  :root[data-theme="day"] { --hairline: rgba(22, 19, 26, .22); --hairline-strong: rgba(22, 19, 26, .4); --ink-2: #3F3730; --ink-3: #574E45; }
}

/* ---- reduced motion: UI transitions collapse; JS also checks matchMedia (no pins, rain, flicker, parallax) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-micro: 1ms; --t-ui: 1ms; --t-panel: 1ms; --t-odometer: 1ms; --t-flash: 1ms;
    --t-curtain: 300ms; --t-camera: 300ms; --t-camera-long: 300ms;   /* camera moves become 300 ms cross-fades */
  }
}

/* ============================================================== base */
@layer kolechki.base {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--velvet-0); }
  body {
    margin: 0;
    background: var(--velvet-0);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern", "liga";
  }
  img, svg, canvas, video { display: block; max-width: 100%; }
  canvas { touch-action: none; }
  button, input, select, textarea { font: inherit; color: inherit; }
  a { color: inherit; text-decoration-color: var(--hairline-strong); text-underline-offset: .2em; }
  a:hover { text-decoration-color: var(--candle); }
  ::selection { background: var(--candle-dim); color: var(--ink); }
  :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-1); }
  [hidden] { display: none !important; }
  @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
}

/* ============================================================== utilities (typography & surfaces) */
@layer kolechki.utilities {
  /* display family — never below 20px */
  .t-mega    { font: var(--fw-mega) var(--fs-mega)/var(--lh-mega) var(--font-display); letter-spacing: var(--ls-mega); }
  .t-display { font: var(--fw-display) var(--fs-display)/var(--lh-display) var(--font-display); letter-spacing: var(--ls-display); }
  .t-h1      { font: var(--fw-h1) var(--fs-h1)/var(--lh-h1) var(--font-display); letter-spacing: var(--ls-h1); }
  .t-h2      { font: var(--fw-h2) var(--fs-h2)/var(--lh-h2) var(--font-display); letter-spacing: var(--ls-h2); }
  .t-h3      { font: var(--fw-h3) var(--fs-h3)/var(--lh-h3) var(--font-display); letter-spacing: var(--ls-h3); }
  .t-title   { font: var(--fw-title) var(--fs-title)/var(--lh-title) var(--font-display); }
  .t-price   { font: var(--fw-price) var(--fs-price)/var(--lh-price) var(--font-display); letter-spacing: var(--ls-price);
               font-variant-numeric: lining-nums tabular-nums; }
  .t-mega, .t-display, .t-h1, .t-h2 { text-wrap: balance; max-width: var(--measure-head); }

  /* one italic word in candle = the only typographic accent */
  .t-em { font-style: italic; color: var(--candle); }

  /* UI family */
  .t-lead    { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--ink-2); max-width: var(--measure-text); }
  .t-body    { font-size: var(--fs-body); line-height: var(--lh-body); max-width: var(--measure-text); }
  .t-ui      { font-size: var(--fs-ui); line-height: var(--lh-ui); letter-spacing: var(--ls-ui); font-weight: var(--fw-ui); }
  .t-overline{ font-size: var(--fs-cap); line-height: var(--lh-cap); letter-spacing: var(--ls-cap); font-weight: var(--fw-cap);
               text-transform: uppercase; color: var(--ink-3); }
  .t-micro   { font-size: var(--fs-micro); line-height: var(--lh-micro); font-weight: 500; color: var(--ink-3); }

  /* numbers & specs */
  .t-mono    { font-family: var(--font-mono); font-size: var(--fs-mono); line-height: var(--lh-mono);
               font-variant-numeric: tabular-nums; letter-spacing: 0; }
  .num       { font-variant-numeric: lining-nums tabular-nums; }

  /* surfaces */
  .glass {
    background: var(--glass-bg-solid);
    box-shadow: var(--glass-edge), var(--shadow-float);
  }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass {
      background: var(--glass-bg);
      -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(115%);
      backdrop-filter: blur(var(--glass-blur)) saturate(115%);
    }
    .tier-low .glass, .glass.glass--solid {
      background: var(--glass-bg-solid);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  }
  .casket { box-shadow: var(--casket); border-radius: var(--r-2); }

  .visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }

  /* static velvet grain (landing only): <div class="grain" aria-hidden="true"> */
  .grain {
    position: fixed; inset: 0; z-index: var(--z-grain); pointer-events: none; opacity: var(--grain-opacity);
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  }
}