/* ═══════════════════════════════════════════════════════════════════════════
   TOKENS — Dr Ekaterina Mogilnitskaya
   ───────────────────────────────────────────────────────────────────────────
   Every value below comes from reference/CLAUDE-CODE-PROMPT.md §3–§4, which
   was reverse-engineered from the KM Clinic corporate identity and verified
   numerically. Treat the colour and geometry groups as frozen: if something
   looks arbitrary, it isn't.

   Nothing downstream hard-codes a colour, a duration or an easing. If a
   component needs a value that is not here, the question is whether the token
   is missing or whether the component is wrong.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Colour: inherited from the clinic guidebook ─────────────────────────
     Non-negotiable. Pantone / CMYK equivalents are in the brand book. */
  --navy: #1b355e; /* 534 C   — wordmark, body text, dark fields */
  --blue: #7baed5; /* 542 C   — the cross, accents, the filament */
  --grey: #d8d9db; /* Cool Grey 1 C — clinic cards and backgrounds */

  /* ── Colour: extensions for the personal brand ───────────────────────────
     Derivations, not new brand colours. Documented as such. */
  --ink: #12294b; /* immersive dark fields; darker navy for white type */
  --frost: #edf2f7; /* cool section ground — deliberately cool, never cream */
  --paper: #fbfcfd; /* default page background */
  --bronze: #a8825e; /* COURSE REGISTER ONLY — see the two-register rule */

  /* ── Colour: derived neutrals ────────────────────────────────────────────
     Tints of navy rather than greys, so the interface stays two colours deep
     instead of sprawling into a grey scale. */
  --line: rgba(27, 53, 94, 0.13);
  --line-soft: rgba(27, 53, 94, 0.07);
  --muted: rgba(27, 53, 94, 0.6);
  --muted-d: rgba(255, 255, 255, 0.62); /* muted on dark fields */
  --line-d: rgba(255, 255, 255, 0.18); /* hairline on dark fields */
  --line-d-soft: rgba(255, 255, 255, 0.14);

  /* Feedback. Used by forms only — never by content. */
  --error: #a6321e; /* oxide red, print-safe, deliberately not alarm-red */
  --ok: #0f6e63;

  /* ── Type: families ──────────────────────────────────────────────────────
     Montserrat and not Poppins is a DECISION, not an oversight: the logo
     genuinely is Poppins and the clinic guidebook recommends it, but Poppins
     has no Cyrillic and this site is primarily Russian. Montserrat is the
     nearest geometric relative with full coverage. See §3.2. */
  --sans: 'Montserrat', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --voice: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  /* ── Type: scale (§4.3) ──────────────────────────────────────────────────
     Weight 200 at display sizes is intentional — her previous logo was
     ultra-light and wide-tracked and the thin setting continues that DNA.
     It needs precise spacing to work. Do not "fix" it to 300/400. */
  --fs-hero: clamp(38px, 6.6vw, 92px);
  --fs-h2: clamp(30px, 4.4vw, 58px);
  --fs-h3: clamp(22px, 2.6vw, 32px);
  --fs-lede: clamp(15px, 1.25vw, 17.5px);
  --fs-body: 16px;
  --fs-small: 12px;
  --fs-eyebrow: 10.5px;
  --fs-nav: 11px;
  --fs-quote: clamp(25px, 3.9vw, 52px);

  --fw-display: 200;
  --fw-body: 300;
  --fw-medium: 400;
  --fw-label: 500;

  --lh-hero: 1;
  --lh-h2: 1.08;
  --lh-lede: 1.72;
  --lh-body: 1.62;
  --lh-quote: 1.26;

  --tr-display: 0.004em; /* tracking */
  --tr-eyebrow: 0.34em;
  --tr-nav: 0.17em;
  --tr-label: 0.19em;
  --tr-cite: 0.28em;

  /* ── Layout ──────────────────────────────────────────────────────────────
     One horizontal rhythm for the whole site. --pad is the page gutter and
     also the left inset of the hero text, so the two never disagree. */
  --maxw: 1320px;
  --maxw-text: 47ch; /* lede measure */
  --pad: clamp(20px, 5vw, 72px);
  --sec-y: clamp(72px, 9vw, 144px);
  --sec-y-tight: clamp(48px, 6vw, 84px);
  --gap: clamp(14px, 2vw, 24px);
  --nav-h: 82px;
  --nav-h-sm: 68px;

  /* ── Motion (§4.5) ───────────────────────────────────────────────────────
     Two easings and no more. --ease-out is the site's voice: a long, settled
     deceleration. --ease-draw belongs to the filament alone, because a strand
     of hair being drawn should not feel like a panel sliding in. */
  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-draw: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-hover: 0.35s;
  --dur-nav: 0.4s;
  --dur-reveal: 1s;
  --dur-image: 1.2s;
  --dur-draw: 2.8s;
  --reveal-y: 22px;

  /* ── Photography (§4.4) ──────────────────────────────────────────────────
     One treatment applied to every image so mixed shoots collapse into one
     palette. Applied in CSS, never baked into the file — see build-photo.ts. */
  --photo-filter: saturate(0.82) contrast(1.03);
  --photo-filter-hero: saturate(0.82) contrast(1.03) brightness(1.02);
  --photo-tint: 0.09;
  --photo-tint-hero: 0.1;
  --photo-zoom: 1.035;

  /* ── Z-order ─────────────────────────────────────────────────────────────
     The filament trick is entirely z-order: the strands' origins are hidden
     BEHIND the portrait, so they read as emerging from her hair. Getting these
     three numbers wrong is the difference between a motif and a scribble. */
  --z-filament: 1;
  --z-media: 2;
  --z-text: 3;
  --z-nav: 60;
  --z-lightbox: 90;
}