/* ===========================================================================
   Design tokens - the shared vocabulary that makes "all sections recognisably
   part of one design" (FR-083) something you can check rather than assert.

   Every colour below was SAMPLED from the compositions in reference/, not
   invented, so live text set beside the artwork matches it instead of
   approximating it. The sampling method and the two deliberate deviations are
   recorded in specs/001-wedding-website/contracts/design-tokens.md.
   =========================================================================== */

:root {
  /* --- Colour ------------------------------------------------------------
     Eight roles from the artwork, plus two text-weight variants that exist
     only because the artwork's own type does not meet WCAG AA. Those two are
     documented deviations, not drift: see the note under each. */

  --ground-cream: #f7f3df;        /* 2.png paper field. Also reversed type.    */
  --ground-olive: #7d804c;        /* 3.png field. The dominant ground.         */
  --ground-olive-deep: #524e35;   /* 4.png field. Darker, more formal.         */
  --ground-pink: #f5cac3;         /* 6.png / 7.png wash. Warm secondary.       */

  --accent-azulejo: #7a90ae;      /* 6.png / 7.png tile blue. DECORATIVE ONLY: */
                                  /* it measures 2.93:1 on cream, so it must   */
                                  /* never carry text.                         */
  --accent-azulejo-ink: #2e4a6e;  /* The same blue at text weight. 8.12:1 on   */
                                  /* cream, 6.29:1 on pink. Links and accents. */
  --accent-butter: #ffe98c;       /* 1.png script yellow. Used sparingly.      */

  /* DEVIATION, recorded: 2.png's own body ink measures #88866B, which is
     3.32:1 on its cream ground and fails WCAG AA for body text. FR-111 is not
     negotiable, so live text deepens along the same olive hue to 8.67:1. The
     colour is still unmistakably the invitation's ink. */
  --ink: #43472a;
  --ink-muted: #505330;           /* Secondary text. 7.19:1 cream, 5.39:1 pink.
                                     A lighter #5A5E36 measured 4.57:1 on pink,
                                     which passes with almost no headroom; one
                                     nudge darker buys the margin back.        */
  --ink-reversed: var(--ground-cream);

  /* DEVIATION, recorded (002 research R4): the tab row now sits on the artwork
     with nothing behind it, and the hero's portrait crop puts a mid blue-grey
     band of sky (around #828896) under the labels on a phone. --ink measures
     2.75:1 there, just under the 3:1 a bold 19 px label needs. Moving the row
     down lands on darker sky (2.03:1) and reversing it lands on near-white
     (1.00:1), so the only lever left that is not a box is the ink itself:
     one more step down the same olive, measured at 3.74:1 on that band and
     8.67:1 or better everywhere else the tabs go. Tabs only. */
  --ink-deep: #2f3220;

  /* --- Scrims -------------------------------------------------------------
     Live text over photography cannot rely on a token pair, because the
     artwork re-crops underneath it at every width (research R11). Two tuned
     scrims, measured by sampling screenshots rather than by eye (SC-008). */

  --scrim-foot: color-mix(in srgb, #221f14 70%, transparent);
  --scrim-head: color-mix(in srgb, var(--ground-cream) 50%, transparent);

  /* --- Type ---------------------------------------------------------------
     Three roles, three families, one Garamond lineage so the display and body
     faces read as one family rather than a borrow (FR-079, research R2). */

  --font-script: 'Pinyon Script', 'Apple Chancery', cursive;
  --font-display: 'Cormorant', 'Cormorant Garamond', Georgia, serif;
  --font-body: 'EB Garamond', Georgia, 'Times New Roman', serif;

  /* A single modular scale, set once. Serif body gets a generous measure and
     line-height; display sizes are fluid so a 320 px phone and a 1920 px
     desktop both get a composed page rather than a scaled one. */

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-md: clamp(1.1875rem, 1.05rem + 0.6vw, 1.375rem);
  /* --fs-lg has a hard 1.5rem floor on purpose: cream text on --ground-olive
     measures 3.72:1, which clears WCAG AA only at large-text size. Anything
     set smaller on that ground fails the contrast gate. */
  --fs-lg: clamp(1.5rem, 1.3rem + 1vw, 1.9375rem);
  --fs-xl: clamp(1.875rem, 1.4rem + 2.4vw, 3rem);
  --fs-2xl: clamp(2.5rem, 1.6rem + 4.5vw, 4.5rem);
  --fs-3xl: clamp(3rem, 1rem + 10vw, 8rem);

  --lh-tight: 1.08;
  --lh-display: 1.16;
  --lh-body: 1.62;
  --measure: 34rem;               /* Under 80 characters at every step.        */
  --measure-narrow: 26rem;

  --tracking-smallcaps: 0.11em;
  --tracking-display: 0.015em;
  --tracking-caps: 0.06em;

  /* --- Space -------------------------------------------------------------
     One rhythm, shared by every section (FR-083). */

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.25rem;
  --space-xl: 3.5rem;
  --space-2xl: 5rem;
  --space-3xl: 7.5rem;

  --gutter: max(1rem, 4vw);       /* 16 px minimum side gutter at 320 px.      */
  --section-pad-block: clamp(var(--space-xl), 9vh, var(--space-3xl));

  /* --- Shape -------------------------------------------------------------
     One radius for the whole site, and it is zero. An engraved invitation has
     cut edges, not rounded ones, and a single rule means no component can
     quietly disagree with another. The only curves on the site are drawn in
     the artwork itself: the scalloped frame and the azulejo arcade. */

  --radius: 0;
  --rule: 1px;
  --rule-strong: 2px;

  /* --- Layers ------------------------------------------------------------
     Four, named, and that is the whole scale. */

  --z-ground: 0;
  --z-scrim: 1;
  --z-content: 2;
  --z-nav: 10;

  --touch-target: 44px;           /* FR-114, and never smaller.                */
  --motion-settle: 380ms;         /* The one orchestrated moment. FR-115.      */
  --ease-settle: cubic-bezier(0.22, 0.61, 0.36, 1);
}