/* Figment design tokens.
   Every value derives from measurements of our own four typefaces, not from
   rules borrowed off another studio's fonts. Measured 2026-08-18:

     face          x-height   cap    sidebearings   natural leading
     Birdie          43.0%   59.6%     106 / 105        1.48
     Hanken          49.3%   69.7%      72 /  66        1.303
     Taxi Driver     32.8%   64.9%     -19 / -74        1.259
     Milk Bar        69.6%   69.3%      62 /  64        1.42

   Three consequences drive this file:
   1. Birdie's sidebearings are 1.54x Hanken's. That loose stamped fit is the
      face, not an error. Do not tighten Birdie. Loosen everything around it.
   2. Hanken reads ~15% larger than Birdie at the same px. Optical parity is
      Hanken 0.87x Birdie. Taxi Driver is 1.31x Birdie. Milk Bar is 0.62x.
   3. Taxi Driver at 38px was 28% of the size it needs to function as display.

   Following OMFGCO where the two studios disagree:
   - Negative tracking ONLY above 48px. Exactly zero below it.
   - Type never exceeds the viewport.
*/

:root {
  /* ---------- COLOR ----------
     Seven values. No grays, no #000, no #FFF, no generated tint ramps.
     Greige is the only value for rules and borders. Oak is a surface only. */
  --limewash:   #F7F4EE;
  --plaster:    #EDE7DC;
  --greige:     #DED7C9;
  --oak:        #C9A77C;
  --charcoal:   #2E2A24;
  --sage:       #6E7A63;
  --terracotta: #C8765A;
  --burnt:      #A85738;
  /* the page ground from the space plan deck, sampled: 250,248,244.
     Cooler and lighter than limewash. Reads as paper rather than plaster. */
  --cream:      #FAF8F4;   /* the only palette value that carries button text at 4.68:1 */

  /* Two named washes added 2026-08-18 so the light ramp can run cool to warm
     while charcoal type stays legible the whole way down. These are NAMED
     palette values, not generated tints, and both are measured:
       sage-wash 10.70:1 and clay-wash 10.15:1 against charcoal.
     The ramp never darkens past 9:1, so body copy never loses contrast. */
  --sage-wash:  #DCE1D4;
  --clay-wash:  #EDD5C8;
  --oak-wash:   #EFE2CE;

  /* The light. Set by JS from scroll position, 0 at the top of the page to 1
     at the bottom. Falls back to plain limewash with JS off. */
  --dusk-surface: var(--limewash);
  --dusk-alt:     var(--plaster);
  --dusk-ink:     var(--charcoal);
  --dusk-warmth:  0;

  --surface:     var(--limewash);
  --surface-alt: var(--plaster);
  --ink:         var(--charcoal);
  --rule:        var(--greige);

  /* ---------- FAMILIES ----------
     Three loaded faces. The wordmark is drawn SVG, not a fourth webfont. */
  --font-display: "Birdie", Georgia, serif;
  --font-body:    "Hanken Grotesk", system-ui, sans-serif;
  --font-hand:    "Taxi Driver", "Birdie", cursive;

  /* ---------- SCALE ----------
     Eight sizes, matching OMFGCO's count. Ratio 168:12 = 14:1, against their
     measured 14.1:1. The gap between 40px and 19px is deliberate; nothing
     lives there, and that void is what makes hierarchy read instantly. */
  --t-hero:    clamp(38px, 5.9vw, 84px);   /* Birdie */
  --t-display: clamp(38px, 6.0vw,  96px);    /* Birdie */
  --t-hand:    clamp(50px, 7.9vw, 126px);    /* Taxi Driver, 1.31x display for optical parity */
  --t-lead:    clamp(23px, 2.6vw,  35px);    /* Hanken */
  --t-body:    19px;
  --t-small:   16px;
  --t-label:   13px;
  --t-micro:   11px;

  /* ---------- TRACKING ----------
     OMFGCO's law: negative only where the type is big enough that it is an
     optical correction rather than a mannerism. Zero everywhere below 48px.
     Birdie is NOT tightened toward Hanken's fit; that would need -0.074em. */
  --tr-hero:    -0.028em;
  --tr-display: -0.024em;
  --tr-hand:     0.018em;   /* loosened: Taxi Driver has negative sidebearings, so letters overlap by default */
  --tr-lead:     0;
  --tr-body:     0;
  --tr-small:    0;
  /* Caps tracking measured off a live OMFGCO build: +0.067em at 15px,
     +0.089em at 11px, +0.103em at 10px. It is a curve, not a constant. */
  --tr-label:    0.082em;   /* 13px */
  --tr-micro:    0.098em;   /* 11px */

  /* ---------- LEADING ----------
     Inverse to size. Body raised from 1.62 to 1.78 so its texture does not
     read as dense beside Birdie's built-in air: at 1.78 Hanken carries 2.6x
     its own x-height in white, against Birdie's 1.2x at hero size. */
  --lh-hero:    0.96;
  --lh-display: 1.06;
  --lh-hand:    1.02;
  --lh-lead:    1.34;
  --lh-body:    1.78;
  --lh-label:   1.6;

  /* ---------- THE HEADING GAP ----------
     The single biggest fix. Measured: Metalab 4.5x body, OMFGCO 7.3x to
     12.8x body. This file previously used 1.05x. Expressed as a multiple of
     body size so it stays correct if the body size ever changes. */
  --gap-after-hero:    calc(var(--t-body) * 7.0);   /* 133px */
  --gap-after-display: calc(var(--t-body) * 4.6);   /*  87px */
  --gap-after-label:   calc(var(--t-body) * 1.6);   /*  30px */
  --gap-para:          calc(var(--t-body) * 1.15);  /*  22px, between paragraphs */

  /* ---------- GRID ----------
     One 12 column grid. Every block places content on the same columns, so
     headings and body copy share origins down the whole page instead of each
     section inventing its own width. Placement classes are c-full, c-lead,
     c-body and c-offset; nothing sets an arbitrary max-width. */
  --grid-max:  1360px;
  --grid-cols: 12;

  /* ---------- SPACE ----------
     Two values plus one exception. That is the entire vertical system. */
  --space-section: 168px;   /* was 210, reduced 20% */
  --space-tight:    51px;    /* was 64, reduced 20% */
  --gutter:         28px;

  /* ---------- MEASURE ----------
     One value. OMFGCO holds 46 chars; Metalab 45 to 55. We hold the character
     count and let the box width float, rather than fixing five max-widths. */
  --measure:      52ch;
  --measure-lead: 26ch;

  /* ---------- MOTION ---------- */
  --dur-micro:    200ms;
  --dur-chrome:   600ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --radius: 2px;
  --grain-opacity: 0.035;

  /* ---------- SLOTS, empty by design ---------- */
  --hero-image: none;
  --hero-scrim-opacity: 0;
  --artifact-size: clamp(64px, 9vw, 132px);
}

/* Short viewports: laptops at 1440x760 and similar. The hero carries the form,
   and the form must stay above the fold, so the display scale steps down with
   available height rather than with width. */
@media (min-width: 721px) and (max-height: 830px) {
  :root { --t-hero: clamp(34px, 4.8vw, 68px); --space-tight: 38px; }
}
@media (max-height: 790px) {
  :root { --t-hero: clamp(30px, 4.2vw, 56px); --space-tight: 28px; --t-lead: clamp(19px, 1.9vw, 24px); }
}

@media (max-width: 720px) {
  :root {
    --gap-after-display: calc(var(--t-body) * 3.2);
    --space-section: 120px;
    --space-tight:    38px;
    --gutter:         20px;
    --t-body:         18px;
    --measure:        40ch;
    --measure-lead:   20ch;
  }
}

/* narrow and short together, the tightest case: iPhone SE and similar. */
@media (max-width: 460px) and (max-height: 780px) {
  :root { --t-hero: clamp(26px, 6.8vw, 32px); --space-tight: 18px;
          --t-lead: 18px; --t-body: 16px;
          --gap-after-display: calc(var(--t-body) * 1.9); }
}

/* the floor: very short viewports, older and budget phones. The hero stops
   claiming a full screen and the scale steps down again, so the form still
   lands above the fold rather than the hero winning a fight it should not. */
@media (max-height: 680px) {
  :root { --t-hero: clamp(24px, 6vw, 32px); --t-lead: 18px; --t-body: 16px;
          --space-tight: 18px; --gap-after-display: calc(var(--t-body) * 1.8); }
}

/* The recessed edge on the terracotta field. Tuned to sit under the threshold
   of notice: 5.6% darker than the field at the very edge, gone by 44px. */
:root{
  --edge-blur: 44px;
  --edge-ink:  rgba(96, 44, 28, 0.20);
}