/* ==========================================================================
   Mane Art, design tokens
   --------------------------------------------------------------------------
   Canonical source: planning/02-DESIGN-SYSTEM.md
   Every value below was MEASURED out of Claude Design files/Mane Art.dc.html,
   not judged by eye. Where a value came from a count in that file, the count is
   in the comment, because a token nobody can trace becomes a fact by repetition.

   Hand written. Safe to edit. Never generated.
   ========================================================================== */

:root {
  /* ---- Ground. Four near blacks, warm rather than neutral ---------------- */
  --ink-900: #0a0909;          /* deepest, page ground */
  --ink-850: #0f0e11;
  --ink-800: #111014;          /* the most used surface */
  --ink-750: #131215;          /* raised card */

  /* ---- Cream. The only text colour ------------------------------------- */
  --cream: #eae6df;

  /* The design never tints the cream with a different hue, it lowers alpha.
     This ladder is the whole hierarchy, measured by frequency in the export:
     .5 used 27 times, .14 used 17, .7 used 13, then .3 .2 .1 .08 .4 */
  --cream-70: rgba(234, 230, 223, .7);    /* secondary text */
  --cream-50: rgba(234, 230, 223, .5);    /* meta, captions */
  --cream-40: rgba(234, 230, 223, .4);
  --cream-30: rgba(234, 230, 223, .3);
  --cream-20: rgba(234, 230, 223, .2);
  --cream-14: rgba(234, 230, 223, .14);   /* hairline rules and borders */
  --cream-10: rgba(234, 230, 223, .1);
  --cream-08: rgba(234, 230, 223, .08);   /* the faintest surface lift */

  /* ---- Gold. The single accent, used 44 times ---------------------------- */
  --gold: #c9954f;
  --gold-50: rgba(201, 149, 79, .5);
  --gold-40: rgba(201, 149, 79, .4);

  /* ---- Type ------------------------------------------------------------- */
  /* Both faces are self hosted. Both carry Cyrillic, which the Russian copy
     needs. Google Fonts is render blocking: on rubenbilbulyan.com it put FCP,
     LCP and Speed Index all on exactly 3.1s. */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans: 'Golos Text', 'Helvetica Neue', Arial, sans-serif;

  /* Weights are stated explicitly. A parent stylesheet silently setting 300
     has cost real time on another project, so nothing here inherits a weight. */
  --w-light: 300;
  --w-medium: 500;

  /* Fixed sizes are labels and body only. Everything larger is fluid, below. */
  --t-label: 11px;   /* 52 uses, 49 of them uppercase with tracking */
  --t-small: 12px;
  --t-body: 15px;    /* body copy */
  --t-body-lg: 16px;
  --t-lead: clamp(15px, 1.4vw, 18px);

  /* Fluid headings, taken verbatim from the export. The design has NO media
     queries at all: every size step is a clamp. Do not replace these with
     breakpoints, it would change the design. */
  --t-h3: clamp(22px, 2.2vw, 30px);
  --t-h2: clamp(24px, 3vw, 52px);
  --t-h1: clamp(32px, 8vw, 54px);
  --t-display: clamp(40px, 7vw, 110px);
  --t-hero: clamp(90px, 16vh, 190px);
  --t-statement: clamp(16px, 4vw, 54px);   /* the word by word manifesto */

  /* Tracking. Wide on uppercase labels, slightly negative on large display. */
  --track-label: .18em;
  --track-label-wide: .2em;
  --track-label-widest: .34em;
  --track-eyebrow: .16em;
  --track-body: .02em;
  --track-tight: -.01em;
  --track-tighter: -.02em;

  --lh-flat: 1;
  --lh-display: 1.1;
  --lh-heading: 1.2;
  --lh-snug: 1.45;
  --lh-body: 1.7;
  --lh-loose: 1.75;

  /* ---- Shape ------------------------------------------------------------ */
  /* There is not one border-radius in the entire design. Corners are sharp,
     everywhere, and that is the gallery look. Do not round anything. */
  --radius: 0;

  /* ---- Layout ----------------------------------------------------------- */
  --container: 1400px;
  --container-wide: 1600px;
  --container-narrow: 1180px;
  --measure: 560px;         /* longest comfortable line of prose */

  /* ---- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(.2, .6, .2, 1);
  --dur: .35s;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: .01ms; }
}