/* ==========================================================================
   Design tokens — Dewald & Inge
   --------------------------------------------------------------------------
   The single source of truth for the design system. Every colour, face, size
   and rhythm in the site resolves to a custom property declared here. Nothing
   downstream hardcodes a hex value.

   Values are taken verbatim from the approved design.
   ========================================================================== */

:root {
  /* --- Colour ------------------------------------------------------------
     Sage is the primary. Sand and clay are the warm supports that carry the
     photo placeholders and card fills. The ink scale is a single hue stepped
     down in contrast, never a neutral grey. */
  --sage:      #7c845f;
  --sage-2:    #a9ae98;
  --sand:      #dacfbd;
  --clay:      #cfbba2;

  --surface:   #f6f5f1;
  --paper:     #fbfaf7;

  --ink:       #2b2d24;
  --ink-2:     #5f6154;
  --ink-3:     #8a8b7e;

  /* Hairlines are ink at low alpha rather than a grey, so they sit in the
     same warm family as everything else. */
  --line:      rgba(43, 45, 36, .14);
  --line-2:    rgba(43, 45, 36, .08);

  /* Reversed-out type on sage and on photography. */
  --on-dark:   #f6f5f1;
  --on-dark-2: rgba(246, 245, 241, .85);
  --on-dark-3: rgba(246, 245, 241, .7);
  --on-dark-4: rgba(246, 245, 241, .5);

  /* The one colour outside the palette: inline validation. Muted brick, so it
     reads as urgent without breaking the scheme. */
  --error:     #a5533f;
  --error-bg:  rgba(165, 83, 63, .07);

  /* --- Type --------------------------------------------------------------
     Five faces, each with exactly one job:

       --display  the couple's names, and nothing else. Formal calligraphy,
                  which is glorious at 100px and illegible at 20px.
       --serif    every heading. Carries the elegance down to sizes a script
                  cannot survive.
       --sans     reading.
       --mono     uppercase utility labels.
       --script   gallery captions only — casual handwriting on a print, a
                  different register from the formal --display face. */
  --display: 'Great Vibes', 'Segoe Script', cursive;
  --serif:   'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:    'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --script:  'Caveat', 'Segoe Script', cursive;

  /* The display sizes are set larger than they were for a serif. A formal
     script has a small x-height buried inside tall ascenders and deep
     descenders, so at the same nominal size it reads considerably smaller. */
  --fs-hero:   clamp(4.2rem, 20vw, 12rem);
  --fs-d1:     clamp(3.2rem, 11vw, 6.5rem);
  --fs-d2:     clamp(1.9rem, 5vw, 3rem);
  --fs-d3:     clamp(1.35rem, 3.4vw, 1.9rem);
  --fs-body-l: clamp(1.05rem, 2.2vw, 1.2rem);
  --fs-body:   1rem;
  --fs-sm:     .9rem;
  --fs-util:   .7rem;
  --fs-util-l: .8rem;

  /* Utility labels are always uppercase mono with wide tracking. These are the
     three tracking steps the design uses; there is no fourth. */
  --track-util:  .2em;
  --track-wide:  .28em;
  --track-tight: .12em;

  /* --- Space -------------------------------------------------------------- */
  --sp-section: clamp(4.5rem, 12vw, 9rem);
  --sp-gutter:  clamp(1.25rem, 5vw, 4rem);
  --maxw:       1180px;
  --maxw-prose: 720px;
  --maxw-list:  760px;

  /* --- Motion -------------------------------------------------------------
     One easing curve for the door reveal, one for everything else. */
  --ease-door: cubic-bezier(.76, 0, .24, 1);
  --ease:      cubic-bezier(.2, 0, .2, 1);
  --dur-door:  1s;
  --dur-fast:  .15s;
  --dur-mid:   .45s;

  /* Where the sage half of the gate doors gives way to paper. Raise it for
     more green, lower it for more paper. */
  --gate-sill: 56%;

  --z-lightbox: 2000;
  --z-gate:     9999;
}

/* Motion is opt-out at the token level, so a component that forgets to guard
   its own animation still respects the preference. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-door: .001ms;
    --dur-fast: .001ms;
    --dur-mid:  .001ms;
  }
}