/* ==========================================================================
   TOKENS
   Every value the design system uses lives here. Component CSS never
   hard-codes a colour, size or duration.
   ========================================================================== */

:root {

  /* --- Colour: the ink side ---------------------------------------------
     The page opens at night, inside the wedding. */
  --ink:            #12100E;
  --ink-raised:     #1B1815;
  --on-ink:         #F1EDE5;
  /* Secondary text. Raised from #A29A8F, which measured 6.83:1 against
     the page black. This is 8.6:1, still clearly below the primary
     #F1EDE5 at 14:1 so the hierarchy holds. */
  --on-ink-dim:     #B5ADA1;
  --hair-ink:       rgba(241, 237, 229, 0.16);

  /* --- Colour: the second surface ---------------------------------------
     One surface, not two. The page is ink from the hero to the footer, and
     sections are separated by the hairline along their top edge rather than
     by a change of tone.

     The paper tokens are kept rather than deleted because every section, the
     header's surface detection and the print room are written against them.
     Pointing them at the ink values is a one-line change to go back to two
     surfaces, and leaves nothing to rewire if that is ever wanted. */
  --paper:          #12100E;
  /* Still lifted off the page: this is the album frame in the print room,
     which has to read as an object sitting on the surface rather than a
     hole cut in it. */
  --paper-shade:    #1B1815;
  --on-paper:       #F1EDE5;
  --on-paper-dim:   #B5ADA1;
  --hair-paper:     rgba(241, 237, 229, 0.16);

  /* --- Accent -----------------------------------------------------------
     Marigold, because that is the colour of the flowers at every wedding
     this studio shoots. Never used for body copy.

     Three values, because one cannot pass AA in both directions. The base
     marigold reaches only 4.32:1 against black and 4.12:1 against white,
     so it sits in the dead zone where no text colour on it clears 4.5:1
     and it clears 4.5:1 on no dark surface either. So:

       --accent        rules, borders, icons, focus rings, underlines.
                       Decorative only, where 3:1 is the bar. Never text,
                       never behind text.
       --accent-text   accent-coloured type on either dark surface.
                       6.02:1 on ink, 5.59:1 on paper.
       --accent-fill   solid fill sitting behind a cream label.
                       4.67:1 against #FFF6EF.

     Change one and re-measure. They are not interchangeable. */
  --accent:         #C25A1E;
  --accent-text:    #D9773B;
  --accent-fill:    #B65217;
  --accent-lift:    #D9773B;

  /* --- Type -------------------------------------------------------------- */
  --font-display:   "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-body:      "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --weight-display: 400;

  --fs-hero:        clamp(2.6rem, 6.6vw, 6.5rem);
  --fs-mega:        clamp(2.25rem, 5vw, 4.5rem);
  --fs-h2:          clamp(1.875rem, 4vw, 3.5rem);
  --fs-h3:          clamp(1.375rem, 2.4vw, 2rem);
  --fs-body:        clamp(1rem, 1.05vw, 1.0625rem);
  --fs-small:       0.8125rem;
  --fs-label:       0.6875rem;

  --lh-body:        1.75;
  --ls-label:       0.22em;

  /* --- Space and layout --------------------------------------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 2.5rem;
  --s-8: 3rem;
  --s-9: 4rem;
  --s-10: 5rem;

  --section-y:      clamp(5rem, 11vw, 10rem);
  --gutter:         clamp(1.25rem, 4.5vw, 4.5rem);
  --container:      1240px;
  --container-wide: 1680px;
  --measure:        62ch;
  --header-h:       84px;

  /* --- Motion ------------------------------------------------------------- */
  --ease:           cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io:        cubic-bezier(0.65, 0, 0.35, 1);
  --dur-hover:      400ms;
  --dur-reveal:     700ms;

  /* --- Photography ---------------------------------------------------------
     One grade for every photograph on the site. Tuned once, applied
     everywhere, which is what makes a mixed set read as one body of work. */
  --grade:          saturate(0.92) contrast(1.05) brightness(0.95);

  /* --- Layers -------------------------------------------------------------- */
  --z-sticky:  40;
  --z-drawer:  90;
  --z-header:  100;
  --z-bar:     150;
  --z-skip:    300;
}