/* ============================================================
   hal whitman, design tokens v2.0
   The single source of truth. No value outside this file.

   v2.0 is a MAJOR version: the ground inverted from --coal to
   white. Every hue was re-derived, because the v1 hues fail on
   white outright (rim 2.35:1, ok 2.07:1, warn 1.80:1, err 2.59:1).
   The v1 dark values survive only as the "lit" set, used over
   photography where the ground really is dark.

   Layout, type scale, and motion follow the harryjatkins.com
   reference. Letterform identity stays monospace, from the
   key art for "stop it.".
   ============================================================ */
:root{
  /* --- ground, inverted in v2.0 ----------------------------- */
  --paper:     #FFFFFF;   /* the ground                        */
  --surface:   #F4F5F6;   /* panels, wells, cards              */
  --ink:       #0B0D10;   /* primary text, 19.46:1             */
  --ink-2:     #4A5560;   /* secondary text, 7.61:1            */
  --ink-3:     #88909A;   /* UI borders, 3.23:1. NOT text      */
  --rule:      #DDE1E4;   /* decorative hairlines only         */

  /* --- interactive palette, re-derived for white ------------
     Each clears AA as text on white and as a fill under white
     text: rim 6.24  ok 7.61  warn 7.15  err 6.92               */
  --rim:       #7A5B2E;
  --ok:        #2F5D3F;
  --warn:      #6E5410;
  --err:       #9A3B2C;

  --i-1: var(--rim);
  --i-2: var(--ok);
  --i-3: var(--warn);
  --i-4: var(--err);
  --i:   var(--rim);

  /* --- the lit set, for use OVER photography only -----------
     These are the v1 values. On an image the ground is dark, so
     the dark-ground ratios apply and these remain correct. */
  --lit:       #E6EBEF;
  --lit-2:     #93A0AC;
  --coal:      #0B0D10;

  /* --- sanctioned scrims. Both exist for one reason only:
     type legibility over photography. Never decoration. -------- */
  --scrim: linear-gradient(180deg, rgba(11,13,16,0) 0%, rgba(11,13,16,.82) 100%);
  /* a solid ground for small type sitting on photography. Same
     78% coal as the rail scrim, so the same measured 11.7:1 holds
     over the brightest region of any frame in the morph. */
  --on-image: rgba(11,13,16,.78);

  /* the rail rides over the full-bleed hero. 78% coal keeps the
     navigation at 11.7:1 over the brightest region of the key art,
     the lit curtain, measured not estimated. */
  --rail-scrim: linear-gradient(90deg,
      rgba(11,13,16,.82) 0%, rgba(11,13,16,.78) 78%, rgba(11,13,16,0) 100%);

  /* --- POMPIDOU SERVICE CODE -------------------------------
     Piano and Rogers colour-coded the Centre Pompidou's exposed
     services so the building explains itself from outside:
     blue air, green water, yellow electrical, red circulation,
     white structure. The same logic, mapped to this system's
     own services. Every callout inherits its hue from here. */
  --svc-type:      var(--rim);    /* typography                */
  --svc-space:     var(--ok);     /* grid, spacing, layout     */
  --svc-motion:    var(--warn);   /* animation, timing         */
  --svc-color:     var(--err);    /* colour, contrast          */
  --svc-structure: var(--ink-2);  /* markup, semantics         */

  /* --- type -------------------------------------------------
     Scale follows the reference: a sparse ramp with a hard jump
     from 28px to display. Letterforms stay monospace. */
  --mono:  "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --prose: "Archivo", system-ui, -apple-system, sans-serif;
  --w-thin: 200;
  --w-light: 300;
  --w-reg: 400;
  --w-bold: 700;
  --w-med: 500;

  --t-display: clamp(2.125rem, 1rem + 8vw, 7.5rem);   /* to 120px */
  --t-title:   clamp(1.75rem, 1.1rem + 2.6vw, 3.5rem);
  --t-head:    1.75rem;    /* 28 */
  --t-lead:    1.25rem;    /* 20 */
  --t-body:    1rem;
  --t-meta:    .875rem;    /* 14 */
  --t-micro:   .75rem;     /* 12 */
  --t-nano:    .5rem;      /* 8, callout labels only */

  /* line heights from the reference: 100 / 114 / 120 / 133 */
  --lh-display: 1;
  --lh-title:   1;
  --lh-head:    1.14;
  --lh-body:    1.33;
  --lh-meta:    1.2;

  /* tracking: wide on display, from the key art. tight on UI,
     from the reference. the two references disagree here and
     the key art wins on identity, the reference wins on UI. */
  --tr-display: .16em;
  --tr-title:   .1em;
  --tr-head:    .02em;
  --tr-meta:    .12em;
  --tr-body:    0em;
  --tr-tight:  -.02em;

  --measure-prose: 62ch;
  --measure-mono:  52ch;

  /* --- space, from the reference's gutter model -------------- */
  --gutter: 16px;
  --page-margin: 32px;
  --full-bleed: calc(100% + (var(--page-margin) * 2));
  --inner: calc(100% - (var(--page-margin) * 2));

  --s-1: 4px;   --s-2: 8px;   --s-3: 16px;  --s-4: 24px;
  --s-5: 32px;  --s-6: 48px;  --s-7: 64px;  --s-8: 96px;
  --s-9: 128px; --s-10: 192px;

  /* per-film hue, from the reference's per-project colour.
     Each film carries its own hue; the page ground tints toward it
     and breathes at 8s. Lightness stays 97-99% so every contrast
     pair in the table above survives: worst case rim 5.82:1. */
  --film-hue: 210;   /* stop it., from the key art's window light */
  --film-sat: 20%;
  --film-lum: 99%;
  --film-lum-pulse: 97%;

  --container: 1160px;
  --container-wide: 1320px;
  --rail-w: 192px;
  --callout-w: 260px;

  /* --- shape ------------------------------------------------ */
  --radius-sm:    4px;
  --radius:       8px;
  --radius-lg:   16px;
  --radius-curve: 64px;
  --radius-frame: 0px;   /* film frames stay square */
  --hair: 1px;
  --target-min: 44px;

  /* --- exoskeleton, v2.2 -------------------------------------
     The building's frame, joints and instrumentation. */
  --svc-gutter: 64px;   /* the void between rail and text. The hero
                           breakout negates it exactly, so changing
                           this value moves the hero edges too. */
  --node: 7px;          /* structural joint                     */
  --beam: 2px;          /* structural member weight             */
  --draw: 900ms;        /* frame draw-in on load                */

  /* --- motion, from the reference --------------------------- */
  --dur-1: 200ms;
  --dur-2: 400ms;
  --dur-3: 500ms;
  --dur-pulse: 8s;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease:     cubic-bezier(.83, 0, .17, 1);
}

@media (max-width: 767px){
  :root{ --page-margin: 12px; }
}