/* css/tokens.css — Élan Films
 *
 * The palette is a cinematographer's, not a wedding vendor's. Indian wedding
 * suppliers are almost uniformly gold, maroon and blush; this brand is silver
 * and blue hour. That is the point. It reads as a film studio that shoots
 * weddings rather than a wedding vendor that owns a camera.
 *
 * Two grounds. DARK is the darkroom and the cinema: where the brand argues.
 * LIGHT is the print and the contact sheet: where a reader reads for a while.
 *
 * Colour runs on the axis every DP actually works on — 5600K daylight against
 * 3200K tungsten. Blue hour is the primary accent because it is the half hour
 * a wedding film is most beautiful. Tungsten appears rarely and only on dark,
 * for the human warm moment.
 *
 * Greys are the zone system, not arbitrary neutrals. --grey-card is the 18%
 * card a photographer meters against.
 *
 * Type: Newsreader for display, used italic-forward — italic is the
 * typographic form of movement, and this brand is about movement. Schibsted
 * Grotesk for reading. DM Mono for anything a camera would report: focal
 * lengths, hours of coverage, delivery windows, timings.
 */

:root {
  /* ---- the darkroom (zone system) ---- */
  --zone-0:    #08090b;   /* max black, cool */
  --zone-1:    #0f1116;
  --zone-2:    #14161b;   /* cards on dark */
  --zone-3:    #242830;   /* rules on dark */
  --grey-card: #878d96;   /* the 18% card — muted text on dark, 5.5:1 */
  --zone-7:    #b4b9c1;
  --zone-9:    #e6e9e9;   /* print white, cool — text on dark */

  /* ---- the print ---- */
  --print:     #e6e9e9;   /* page ground — cool silver, deliberately not cream */
  --print-2:   #dce0e1;   /* wash band */
  --print-3:   #ccd2d3;   /* mats and frames */
  --ink:       #0e1014;   /* text on print */
  --ink-2:     #2b3138;
  --graphite:  #5a6068;   /* muted text on print — 5.0:1 */
  --rule:      #c8cecf;
  --rule-strong: #a8b0b2;

  /* ---- colour temperature ---- */
  --blue-hour:      #a6b2da;  /* 5600K — accent on dark */
  --blue-hour-deep: #3f4677;  /* links and buttons on print — 6.8:1 */
  --blue-hour-wash: #d8dcee;
  --tungsten:       #e3a566;  /* 3200K — on dark only, used rarely */

  /* ---- semantic ---- */
  --bg:     var(--print);
  --fg:     var(--ink);
  --muted:  var(--graphite);
  --accent: var(--blue-hour-deep);

  /* ---- type ---- */
  --font-display: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --font-body:    'Schibsted Grotesk', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-data:    'DM Mono', 'SF Mono', Menlo, monospace;

  --t-xs:   0.75rem;
  --t-sm:   0.875rem;
  --t-base: 1rem;
  --t-md:   clamp(1.06rem, 0.99rem + 0.32vw, 1.2rem);
  --t-lg:   clamp(1.28rem, 1.14rem + 0.68vw, 1.66rem);
  --t-xl:   clamp(1.66rem, 1.32rem + 1.45vw, 2.44rem);
  --t-2xl:  clamp(2.15rem, 1.48rem + 2.9vw,  3.9rem);
  --t-3xl:  clamp(2.7rem,  1.5rem  + 5.4vw,  5.8rem);

  --lh-tight: 0.96;
  --lh-head:  1.08;
  --lh-body:  1.62;

  --track-caps: 0.16em;   /* mono slate lines */
  --track-head: -0.015em;

  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;    --s-10: 8rem;

  --wrap: 1180px;
  --measure: 68ch;

  /* The letterbox. 2.39:1 is the anamorphic frame; the bar is the structural
     unit the whole site is built on. */
  --bar: 1px;
  --ease-shutter: cubic-bezier(0.16, 0.84, 0.28, 1);
}