/* ==========================================================================
   GLOW · tokens — the whole design system as custom properties.
   Owner: "tokens". Source: concepts/atelier/atelier.css + design/DESIGN.md amendments.

   Rules of the system
   - Ink and paper only: every colour below is R = G = B (alpha only in scrims).
   - Theme = <html data-theme="light|dark"> (set by js/theme-boot.js before first paint).
     Without the attribute the page follows prefers-color-scheme.
   - Colour tokens are LITERALS in every theme block (never var() of another colour):
     a var() inside a custom property is resolved where it is declared, so a derived
     colour token would not follow the remap of .sheet--invert.
   - Font weights are theme-independent (amendment 3): a theme switch never reflows text.
   ========================================================================== */

/* ---------- 1. Theme-independent tokens ---------------------------------- */

:root {
  /* Type families. Noto Serif Display lacks − ↑ ↓ (and → ★ ✓): the minus and the
     arrows fall back to Geist, never to Times. → ★ ✓ are SVG icons (icons.js). */
  --serif: "Noto Serif Display", "Geist", Georgia, serif;
  --sans: "Geist", "Helvetica Neue", Arial, sans-serif;

  /* Serif weights by role — fixed in both themes (amendment 3) */
  --fw-serif-display: 300;   /* ≥ 48 px: page titles, hero numerals, ghosts      */
  --fw-serif-title: 340;     /* 24–47 px: section/sheet titles, metric values    */
  --fw-serif-text: 400;      /* 17–23 px: tip titles, options, AI areas, wordmark */
  /* Sans weights (Geist ships 400–600 only) */
  --fw-regular: 400;
  --fw-medium: 500;          /* caps micro labels, buttons */
  --fw-semibold: 600;        /* active tab label, evidence letter, <b> */
  /* Legacy Atelier names, now FIXED (were theme-dependent). Prefer the --fw-serif-* names. */
  --wl: 340;
  --wm: 400;

  /* Type scale. Display sizes are fluid (amendment 2): fit 360 px, generous at 430 px. */
  --fs-masthead: clamp(72px, 25vw, 112px);   /* GLOW on the onboarding cover (≈98 @390)      */
  --fs-hero: clamp(96px, 30vw, 150px);       /* streak 9, kcal 991, price 250 (≈117 @390)   */
  --fs-ghost: clamp(120px, 44vw, 210px);     /* outline ghost numerals: gates, empty routine */
  --fs-title-xl: clamp(40px, 12.5vw, 54px);  /* page titles, paywall «Glow Premium» (≈49)   */
  --fs-title-l: clamp(30px, 8.7vw, 38px);    /* section titles «Пропорции», AI head (≈34)   */
  --fs-title-m: clamp(28px, 8.2vw, 36px);    /* question / cover / tip-sheet titles (≈32)   */
  --fs-title-s: 28px;                        /* sub-heads: «Ещё N в Premium», «Бесплатный план» */
  --fs-num-l: clamp(32px, 9.2vw, 40px);      /* «2/4» today counter (≈36)                    */
  --fs-num-m: 30px;                          /* macros, numeric inputs, empty/error titles   */
  --fs-num: 24px;                            /* metric values, step numerals, weight delta   */
  --fs-item-l: 22px;                         /* onboarding options, gate lead (italic)        */
  --fs-voice: 20px;                          /* italic serif voice: AI summary, streak line   */
  --fs-item: 19px;                           /* tip titles, AI areas                          */
  --fs-wordmark: 17px;                       /* GLOW in the header                            */
  --fs-input: 16px;                          /* text inputs (≥ 16 px: no iOS focus zoom)      */
  --fs-body: 15px;                           /* paragraphs, list rows, checklist, food        */
  --fs-body-s: 14px;                         /* leads, notes under scales, legend, privacy    */
  --fs-note: 13px;                           /* fine print, disclaimers, field messages       */
  --fs-button: 12px;                         /* caps button text                              */
  --fs-micro: 11px;                          /* caps micro labels, tabs, tags, plates, data — the floor */

  --lh-hero: .74;
  --lh-display: .9;
  --lh-title: 1;
  --lh-item: 1.2;
  --lh-voice: 1.3;
  --lh-ui: 1.3;
  --lh-body-s: 1.45;
  --lh-body: 1.55;
  --lh-caps: 1.2;

  --tr-masthead: .085em;
  --tr-wordmark: .52em;      /* pair with padding-left of the same size to re-centre */
  --tr-hero: -.05em;
  --tr-display: -.03em;
  --tr-title: -.02em;
  --tr-item: -.005em;
  --tr-caps: .1em;           /* caps micro labels: tracking ≤ +0.1em (amendment 1) */
  --tr-button: .16em;

  /* Spacing: 4 · 8 · 12 · 16 · 20 · 24 · 32 · 48 (+ optical half steps 6 · 10 · 14 · 18 · 22 inline) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 48px;
  --sp-9: 64px;
  --gutter: 24px;            /* 20 px below 375 px, 32 px from 600 px (see the media queries) */
  --col-no: 28px;            /* the hanging column of row numbers 01, 02…                     */
  /* Vertical rhythm of a screen: one gap between its chapters on every tab (screens use
     these instead of literals 18…44, so a chapter starts at the same depth everywhere). */
  --sec-gap: 40px;           /* between sections («главы»): Пропорции, Метрики, История…      */
  --sec-gap-s: 24px;         /* between a sub-section / group inside a section                 */

  /* Sizes */
  --target: 44px;            /* minimum hit area */
  --btn-h: 54px;
  --btn-h-s: 32px;
  --control-h: 44px;         /* segments, option rows' minimum */
  --chip-h: 34px;
  --field-h: 46px;

  /* Lines */
  --hair: 1px;               /* .5 px on ≥ 2 dppx — separators only */
  --stroke: 1px;             /* control outlines, focus ring is 2 px */
  --bar: 2px;                /* indicators: active tab, progress steps, error underline */
  --range: 3px;              /* reference range on the tape, eaten kcal */

  /* Radii — Atelier is square. A circle only where it is the shape itself. */
  --radius: 0px;
  --radius-round: 50%;

  /* Motion */
  --e-out: cubic-bezier(.16, 1, .3, 1);      /* entrances, count-up, sheet open */
  --e-in: cubic-bezier(.7, 0, .84, 0);       /* exits, sheet close              */
  --e-io: cubic-bezier(.77, 0, .175, 1);     /* theme shutter, tab marker       */
  --e-std: cubic-bezier(.2, 0, 0, 1);        /* small state changes             */
  --d-press: 140ms;          /* button press scale(.985)       */
  --d-row: 160ms;            /* row / field state              */
  --d-state: 180ms;          /* chips, segments, radios' ring  */
  --d-fade: 200ms;           /* checkbox fill, theme fallback cross-fade */
  --d-radio: 240ms;
  --d-toast: 280ms;
  --d-sheet-out: 320ms;
  --d-marker: 320ms;         /* tab indicator travel           */
  --d-sheet-in: 520ms;
  --d-enter: 560ms;          /* screen enter rise              */
  --d-theme: 650ms;          /* theme shutter (amendment 28)   */
  --d-count: 900ms;          /* count-up ceiling (amendment 29) */
  --stagger: 40ms;           /* enter stagger step, max 8 items */
  --rise: 8px;               /* enter rise distance            */

  /* Stacking */
  --z-raised: 1;
  --z-sticky: 10;
  --z-chrome: 20;            /* .hdr, .tabbar */
  --z-scrim: 30;
  --z-sheet: 31;
  --z-toast: 40;
  --z-top: 50;

  /* App frame */
  --hdr-h: 56px;
  --tab-h: 60px;
  --fade-h: 36px;            /* content dissolves into the tab bar over this height */
  --col: 640px;              /* THE app column: #view, and the content of .hdr/.tabbar/.sheet/.toast (components) */
  --view-max: var(--col);
  /* Safe areas: device inset vs Telegram's (Bot API 8+), whichever is larger. */
  --sab: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px));
  --sat: max(env(safe-area-inset-top, 0px),
             calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)));
  --view-top: calc(var(--hdr-h) + var(--sat));      /* first content pixel under the header */
  --view-bottom: calc(var(--tab-h) + var(--sab));   /* height of the tab bar incl. safe area */
  --vh: var(--tg-viewport-stable-height, 100vh);    /* stable visible height                 */
  --view-min-h: calc(var(--vh) - var(--view-top) - var(--view-bottom));  /* between the bars */
}

@supports (height: 100dvh) {
  :root { --vh: var(--tg-viewport-stable-height, 100dvh); }
}

/* Hairlines are one device pixel on retina screens. */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  :root { --hair: .5px; }
}

@media (max-width: 374.98px) {
  :root { --gutter: 20px; }
}

@media (min-width: 600px) {
  :root { --gutter: 32px; }
}

/* ---------- 2. Colour: white (light) ------------------------------------- */
/* Contrast (WCAG): ink 19.8 · ink-2 9.4 · ink-3 5.3 on bg/sheet, 4.8 on bg-2 ·
   line-2 3.45 on bg/sheet, 3.1 on bg-2 · ink-4 2.4 (decor only, never text). */

:root,
:root[data-theme="light"] {
  color-scheme: light;

  --bg: #FFFFFF;             /* page, header, tab bar, plates on the photo          */
  --bg-2: #F3F3F3;           /* inset: panel, viewfinder, photo placeholder          */
  --bg-3: #E6E6E6;           /* pressed / disabled fill, skeleton bars               */
  --sheet: #FFFFFF;          /* bottom sheet surface                                 */
  --sheet-edge: #0A0A0A;     /* 1 px top edge of the sheet over the white veil (am. 9) */
  --ink: #0A0A0A;            /* text, strong rules, primary button, state fills      */
  --ink-2: #464646;          /* secondary text, paragraphs                           */
  --ink-3: #6B6B6B;          /* muted text, captions, inactive tabs (≥ 4.5:1)        */
  --ink-4: #A8A8A8;          /* DECOR ONLY: ruler ticks, grabber, ghost outlines     */
  --rule: #0A0A0A;           /* strong hairline: top of a section                    */
  --rule-2: #D4D4D4;         /* list hairline (separators only)                      */
  --rule-3: #ECECEC;         /* faintest: chart grid                                 */
  --line-2: #8A8A8A;         /* 1 px control borders: chips, segments, inputs, boxes (≥ 3:1) */
  --scrim: rgba(255, 255, 255, .80);   /* white veil under sheets — never flat grey */

  /* The inverted surface (paywall, .sheet--invert): the white theme's ink sheet */
  --inv-scheme: dark;
  --inv-bg: #000000;
  --inv-bg-2: #0F0F0F;
  --inv-bg-3: #1C1C1C;
  --inv-sheet: #0B0B0B;
  --inv-sheet-edge: #4D4D4D;
  --inv-ink: #F2F2F2;
  --inv-ink-2: #B5B5B5;
  --inv-ink-3: #8E8E8E;
  --inv-ink-4: #474747;
  --inv-rule: #F2F2F2;
  --inv-rule-2: #2B2B2B;
  --inv-rule-3: #171717;
  --inv-line-2: #6B6B6B;

  /* Scan print (amendment 13): high-key greyscale print, INK mesh */
  --mesh: #000000;           /* mesh stroke colour                 */
  --mesh-a: .17;             /* tessellation opacity               */
  --mesh-feat-a: .7;         /* contours: oval, eyes, brows, lips  */
  --measure: #0A0A0A;        /* 1 px measure lines                 */
  --vignette: #FFFFFF;
  --vignette-a: .36;
  --grain-a: .3;
}

/* ---------- 3. Colour: black (dark) -------------------------------------- */
/* Contrast: ink 18.8 · ink-2 10.2 · ink-3 6.4 on bg, 6.0 on sheet, 5.9 on bg-2 ·
   line-2 3.9 on bg, 3.7 on sheet, 3.6 on bg-2 · ink-4 2.3 (decor only) ·
   sheet-edge 2.5 on the black veil (the sheet itself is only 1.07 on it). */

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #000000;
  --bg-2: #0F0F0F;
  --bg-3: #1C1C1C;
  --sheet: #0B0B0B;          /* a step above the page so the sheet's edge reads */
  --sheet-edge: #4D4D4D;     /* 1 px top edge: carries the sheet's outline over the black veil */
  --ink: #F2F2F2;
  --ink-2: #B5B5B5;
  --ink-3: #8E8E8E;
  --ink-4: #474747;
  --rule: #F2F2F2;
  --rule-2: #2B2B2B;
  --rule-3: #171717;
  --line-2: #6B6B6B;
  --scrim: rgba(0, 0, 0, .72);

  /* The inverted surface: the black theme's paper sheet */
  --inv-scheme: light;
  --inv-bg: #FFFFFF;
  --inv-bg-2: #F3F3F3;
  --inv-bg-3: #E6E6E6;
  --inv-sheet: #FFFFFF;
  --inv-sheet-edge: #0A0A0A;
  --inv-ink: #0A0A0A;
  --inv-ink-2: #464646;
  --inv-ink-3: #6B6B6B;
  --inv-ink-4: #A8A8A8;
  --inv-rule: #0A0A0A;
  --inv-rule-2: #D4D4D4;
  --inv-rule-3: #ECECEC;
  --inv-line-2: #8A8A8A;

  /* Scan print: low-key greyscale print, WHITE mesh */
  --mesh: #FFFFFF;
  --mesh-a: .26;
  --mesh-feat-a: .86;
  --measure: #FFFFFF;
  --vignette: #000000;
  --vignette-a: .78;
  --grain-a: .5;
}

/* No data-theme yet (theme-boot.js missing or failed): follow the OS.
   KEEP IN SYNC with the block above — design/specimen-tokens.html checks that both match. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    --bg: #000000;
    --bg-2: #0F0F0F;
    --bg-3: #1C1C1C;
    --sheet: #0B0B0B;
    --sheet-edge: #4D4D4D;
    --ink: #F2F2F2;
    --ink-2: #B5B5B5;
    --ink-3: #8E8E8E;
    --ink-4: #474747;
    --rule: #F2F2F2;
    --rule-2: #2B2B2B;
    --rule-3: #171717;
    --line-2: #6B6B6B;
    --scrim: rgba(0, 0, 0, .72);

    --inv-scheme: light;
    --inv-bg: #FFFFFF;
    --inv-bg-2: #F3F3F3;
    --inv-bg-3: #E6E6E6;
    --inv-sheet: #FFFFFF;
    --inv-sheet-edge: #0A0A0A;
    --inv-ink: #0A0A0A;
    --inv-ink-2: #464646;
    --inv-ink-3: #6B6B6B;
    --inv-ink-4: #A8A8A8;
    --inv-rule: #0A0A0A;
    --inv-rule-2: #D4D4D4;
    --inv-rule-3: #ECECEC;
    --inv-line-2: #8A8A8A;

    --mesh: #FFFFFF;
    --mesh-a: .26;
    --mesh-feat-a: .86;
    --measure: #FFFFFF;
    --vignette: #000000;
    --vignette-a: .78;
    --grain-a: .5;
  }
}

/* ---------- 4. The inverted surface -------------------------------------- */
/* The paywall is the only inverted surface (amendment 10): black sheet with white ink
   in the white theme, paper sheet with ink in the black theme. Inside it every colour
   token takes the other theme's value, so every component placed in it just works.
   `color` is set here too: inherited text colour was computed on <body> with the page
   ink and would otherwise stay dark-on-dark. The scrim is NOT remapped (it belongs to
   the page). components.css may repeat this remap with the same --inv-* tokens. */

.sheet--invert,
[data-surface="invert"] {
  color-scheme: var(--inv-scheme);
  --bg: var(--inv-bg);
  --bg-2: var(--inv-bg-2);
  --bg-3: var(--inv-bg-3);
  --sheet: var(--inv-sheet);
  --sheet-edge: var(--inv-sheet-edge);
  --ink: var(--inv-ink);
  --ink-2: var(--inv-ink-2);
  --ink-3: var(--inv-ink-3);
  --ink-4: var(--inv-ink-4);
  --rule: var(--inv-rule);
  --rule-2: var(--inv-rule-2);
  --rule-3: var(--inv-rule-3);
  --line-2: var(--inv-line-2);
  color: var(--ink);
}