/* Entrada — design tokens. Single source of truth for colour, type, motion. */

/* Self-hosted, latin subset. No Google Fonts request on the LCP path, no
   third-party origin in the final build.
   The roman is a variable face (wght 300–700), so one 37 KB file covers every
   weight the site uses. The italic is a separate static cut at 300. */
@font-face {
  font-family: 'Cormorant';
  src: url('../assets/fonts/cormorant.woff2') format('woff2-variations'),
       url('../assets/fonts/cormorant.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant';
  src: url('../assets/fonts/cormorant-italic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Palette. Base is the darker #08090C from the design — it makes the gold
     read warmer and gives the film frames a deeper surround than #0A0C0F did. */
  --bg:         #08090C;
  --bg-0:       #05060A;
  --bg-2:       #101419;
  --ink:        #F5F2EC;
  --ink-dim:    #C9C6BF;
  --muted:      #96A0AB;
  --line:       #1E252C;
  --line-soft:  #151A20;
  --gold:       #C9A227;
  --gold-soft:  #E0BE5C;
  --gold-dim:   #8A7124;
  --gold-ghost: rgba(201, 162, 39, 0.07);

  /* Two families, deliberately.
     Display carries the character: a high-contrast garamond, light weight,
     italic for the emotional beat. Cormorant is beautiful at 30px+ and
     genuinely hard to read at 15px, so every run of small text — body copy,
     FAQ answers, the comparison table, buttons, form-ish UI — is set in the
     system UI stack, which is SF on the iPhones this audience lives on and
     costs zero bytes. */
  --font-display: 'Cormorant', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-ui: ui-sans-serif, -apple-system, BlinkMacSystemFont, 'SF Pro Text',
             'Segoe UI', Inter, Helvetica, Arial, sans-serif;

  /* Motion. Arrivals decelerate, exits accelerate — a camera has mass. */
  --ease-camera: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-settle: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-exit:   cubic-bezier(0.7, 0, 0.84, 0);

  --dur-fast:      180ms;
  --dur-base:      420ms;
  --dur-slow:      900ms;
  --dur-cinematic: 1600ms;

  /* Type scale. Display sizes run large — a garamond at 300 needs size to
     show its contrast, and undersized it just looks weak. */
  --t-eyebrow: clamp(10px, 1vw, 11.5px);
  --t-micro:   13px;
  --t-body:    clamp(15px, 1.5vw, 16.5px);
  --t-lede:    clamp(18px, 2.1vw, 23px);
  --t-h3:      clamp(21px, 2.2vw, 26px);
  --t-h2:      clamp(32px, 4.6vw, 54px);
  --t-h1:      clamp(40px, 7vw, 82px);
  --t-display: clamp(34px, 5.6vw, 64px);

  /* Optical, not mathematical. Garamond needs *less* negative tracking than a
     grotesque — it is already narrow — so display tracking is gentle. */
  --track-display: -0.018em;
  --track-h:       -0.012em;
  --track-body:    0;
  --track-caps:    0.28em;

  --gutter:  clamp(20px, 5vw, 44px);
  --measure: 1180px;

  --radius: 2px;

  --cta-dock-h: 64px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
    --dur-cinematic: 1ms;
  }
}