/* ==========================================================================
   Design tokens. Every colour, size and curve used anywhere comes from here.
   Palette is lifted from the studio's own frames, then pulled back so the
   interface never out-saturates the photographs it exists to sell.
   ========================================================================== */

:root {
  /* --- ink & paper ------------------------------------------------------ */
  --ink:        #171011;
  --ink-2:      #514446;
  --ink-3:      #847678;
  --paper:      #fff6ef;
  --paper-2:    #fcece1;
  --rule:       rgba(23, 16, 17, .15);
  --rule-2:     rgba(23, 16, 17, .28);
  --rule-i:     rgba(255, 246, 239, .22);

  /* --- accents ----------------------------------------------------------
     coral  = the sunset sky in the hero frame, toned back from the mockup's
              #ff5533 so it stops competing with the photography
     dusk   = the deep plum at the top of that same sky
     surf   = the turquoise water; an accent only, never a section ground
     sun    = the dry golden grass                                        */
  --coral:      #e2604a;
  --coral-deep: #c44a36;
  --dusk:       #241a3a;
  --surf:       #0a8f9e;
  --sun:        #e0a03f;

  /* --- type ------------------------------------------------------------- */
  --display: "Bricolage Grotesque", "Helvetica Neue", Helvetica, sans-serif;
  --ui:      "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* fluid scale; every step is clamp(min, preferred, max) */
  --t-display-xl: clamp(46px, 13.6vw, 124px);
  --t-display-l:  clamp(38px, 11vw,   86px);
  --t-display-m:  clamp(34px, 9.6vw,  62px);
  --t-display-s:  clamp(27px, 7vw,    40px);
  --t-body-l:     clamp(17px, 2.2vw,  19px);
  --t-body:       16px;
  --t-body-s:     14.5px;
  --t-label:      11px;

  --lh-display: .88;
  --lh-body:    1.5;
  --ls-display: -.042em;
  --ls-label:   .15em;

  /* --- space ------------------------------------------------------------ */
  --pad:        20px;   /* page gutter; grows at the breakpoints */
  --section:    64px;   /* vertical section rhythm */
  --gap:        10px;
  --max:        1440px;

  /* --- form controls ---------------------------------------------------- */
  --control-h:      56px;   /* primary buttons */
  --control-h-s:    46px;   /* chips, compact buttons */
  --tap-min:        44px;   /* never go below this on any interactive target */
  --radius:         2px;    /* square-ish; no pills anywhere */
  --border:         2px;

  /* --- motion -----------------------------------------------------------
     Sanctioned curves only. Do not hand-roll replacements. */
  --ease-out:    cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);

  --d-press:  140ms;  /* button press feedback */
  --d-ui:     260ms;  /* dropdowns, small transitions */
  --d-drawer: 380ms;  /* sheets */
  --d-reveal: 520ms;  /* scroll reveals; marketing motion may run longer */

  /* --- layers ----------------------------------------------------------- */
  --z-header:  60;
  --z-bar:     70;
  --z-scrim:   90;
  --z-sheet:   100;
}

@media (min-width: 760px) {
  :root { --pad: 40px; --section: 104px; }
}

@media (min-width: 1100px) {
  :root { --pad: 52px; --section: 120px; }
}