/* ==========================================================================
   NOI ENGINE · NIGHT WATCH · tokens.css
   The single source of truth. Nothing in this file describes a component.
   If a value appears in site.css or in a page, it must come from here.

   Load order is fixed and non-negotiable:
       /assets/tokens.css   then   /assets/site.css
   ========================================================================== */

:root{

  /* ── FIELD ────────────────────────────────────────────────────────────
     Near-black carrying a blue undertone. NOT pure black. The old navy
     #0C1322 survives only as brand lineage (--brand-navy) and must never
     be used as a page ground.                                            */
  --field:        #05070C;   /* page ground */
  --field-2:      #0A0E17;   /* raised block, table stripe */
  --field-3:      #121826;   /* highest raised surface, input wells */
  --brand-navy:   #0C1322;   /* lineage only. never a page ground. */
  --on-gold:      #14100A;   /* text placed ON a solid gold surface */

  /* ── INK ──────────────────────────────────────────────────────────────
     Every level passes WCAG AA on --field at normal text size.
     --ink-3 is deliberately LIGHTER than the concept's #68738A, which
     measures 4.23:1 and fails. Do not put it back.                       */
  --ink:          #F2F4F8;   /* 18.30:1  headlines, primary body */
  --ink-2:        #9AA5B6;   /*  8.09:1  secondary body, ledes */
  --ink-3:        #7C879B;   /*  5.56:1  micro / telemetry / captions */

  /* ── GOLD ─────────────────────────────────────────────────────────────
     The accent is a GRADIENT, not a flat colour. --accent-grad is the
     brand. The flat stops exist for dots, rules, pulses and focus rings,
     never for large fills.                                               */
  --gold:         #E9B94F;   /* 11.05:1 on field. the one flat gold. */
  --gold-pale:    #F6D488;   /* 14.10:1 */
  --gold-mid:     #C9A23F;   /*  8.37:1 */
  --gold-deep:    #8A6A1C;   /*  3.99:1 GRADIENT STOP ONLY. never flat text. */
  --accent-grad:  linear-gradient(100deg,#8A6A1C 0%,#E9B94F 38%,#F6D488 62%,#C9A23F 100%);

  /* ── SIGNAL ───────────────────────────────────────────────────────────
     One warm counter-accent, used only on exclusion / refusal / "will
     never do" copy. Never decorative, never more than once per page.     */
  --brick:        #C7614A;   /*  5.03:1 */
  --brick-line:   rgba(199,97,74,.5);

  /* ── HAIRLINES AND WASHES ─────────────────────────────────────────── */
  --line:         rgba(255,255,255,.13);
  --line-soft:    rgba(255,255,255,.07);
  --line-strong:  rgba(255,255,255,.22);
  --wash:         rgba(255,255,255,.022);  /* row hover */
  --wash-2:       rgba(255,255,255,.045);  /* pressed / active row */
  --glow-gold:    0 0 24px rgba(233,185,79,.28);
  --scrim-chrome: linear-gradient(to bottom,rgba(5,7,12,.94),rgba(5,7,12,.72) 70%,transparent);

  /* ── TYPE FAMILIES ────────────────────────────────────────────────────
     Two families. Two only. Google Fonts is the only external origin the
     site is permitted to touch.                                          */
  --font-display: 'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:    'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-micro:   'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* ── TYPE WEIGHTS ─────────────────────────────────────────────────── */
  --w-display:    200;   /* h1, h2. the whole look lives here. */
  --w-lift:       300;   /* the gradient phrase, one step heavier */
  --w-body:       400;
  --w-med:        500;
  --w-semi:       600;   /* the wordmark and the skip link. nothing else. */

  /* ── TYPE SIZES ─────────────────────────────────────────────────────
     Fluid. Never hard-code a px size in a page.                         */
  --fs-display:   clamp(36px,5.5vw,84px);   /* fold h1 */
  --fs-h1:        clamp(32px,4.4vw,64px);   /* interior page h1 */
  --fs-h2:        clamp(27px,3.5vw,52px);
  --fs-h3:        clamp(17px,1.5vw,23px);
  --fs-h4:        clamp(15px,1.1vw,17px);
  --fs-lede:      clamp(15px,1.15vw,17px);
  --fs-body:      16px;
  --fs-body-s:    14.5px;
  --fs-micro:     10.5px;   /* floor. never set micro type smaller. */
  --fs-micro-s:   9.5px;    /* footer legal line only */

  /* ── LEADING AND TRACKING ─────────────────────────────────────────── */
  --lh-display:   1.0;
  --lh-h1:        1.03;
  --lh-h2:        1.06;
  --lh-h3:        1.22;
  --lh-body:      1.62;
  --lh-loose:     1.66;
  --lh-micro:     1.7;
  --ls-display:   -.028em;
  --ls-h2:        -.02em;
  --ls-h3:        -.012em;
  --ls-body:      0em;
  --ls-micro:     .13em;
  --ls-mark:      .17em;
  --ls-cta:       .14em;

  /* ── MEASURE ──────────────────────────────────────────────────────── */
  --measure:      46ch;   /* ledes */
  --measure-note: 44ch;   /* band notes, sidebars */
  --measure-prose:68ch;   /* long-form body copy */
  --measure-head: 19ch;   /* display headlines */

  /* ── SPACE ────────────────────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8:144px;

  /* ── LAYOUT ───────────────────────────────────────────────────────── */
  --maxw:         1560px;
  --gutter:       clamp(24px,4.4vw,68px);
  --band-y:       clamp(64px,9vw,132px);
  --band-y-tight: clamp(40px,5.5vw,76px);
  --chrome-h:     64px;   /* AUTHORITATIVE. site.css sets .chrome height to this. */

  /* ── RADII ────────────────────────────────────────────────────────── */
  --r-pill:  100px;
  --r-focus: 2px;

  /* ── DEPTH ────────────────────────────────────────────────────────── */
  --z-base:    1;
  --z-fold:    3;
  --z-rule:    4;
  /* NEGATIVE ON PURPOSE. .menu-sheet is a DESCENDANT of .chrome, so it
     sits inside the chrome's stacking context. Any positive value paints
     the sheet over the mark, the Close control and the CTA pill. -1 puts
     it behind the chrome's own content and in front of .chrome::before,
     which is exactly right. Do not "fix" this to a positive number. */
  --z-sheet:  -1;
  --z-chrome: 90;
  --z-skip:  200;

  /* ── MOTION ───────────────────────────────────────────────────────────
     ONE primitive: a scroll reveal on transform + opacity. Everything
     else is a hover or a state change. No parallax, no count-ups, no
     carousels, no scroll-jacking.                                        */
  --ease-out:    cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-ui:      .2s;    /* colour and opacity on hover */
  --dur-line:    .45s;   /* the hairline arrow extending */
  --dur-sheet:   .3s;    /* the mobile menu */
  --dur-reveal:  .7s;    /* the scroll reveal */
  --rv-shift:    22px;   /* reveal travel */
  --rv-d1:       .08s;
  --rv-d2:       .16s;
  --rv-d3:       .24s;
  --rv-d4:       .32s;

  /* ── PHOTOGRAPHY ──────────────────────────────────────────────────────
     Photography is MASKED into the field. A dark overlay rectangle over
     stock photography is a named AI tell and is banned. The only
     permitted darkening is a filter on the image itself.                 */
  --photo-filter:      saturate(.82) contrast(1.06) brightness(.78);
  --photo-filter-flat: saturate(.66) contrast(1.04) brightness(.62);
  --mask-x-right: linear-gradient(to right,transparent 0%,rgba(0,0,0,.55) 22%,#000 52%);
  --mask-x-soft:  linear-gradient(to right,transparent 0%,#000 12%,#000 88%,transparent 100%);
  --mask-x-none:  linear-gradient(to right,#000,#000);
  --mask-y-fold:  linear-gradient(to bottom,transparent 0%,#000 22%,#000 56%,rgba(0,0,0,.30) 76%,transparent 93%);
  --mask-y-soft:  linear-gradient(to bottom,transparent 0%,#000 16%,#000 84%,transparent 100%);
  --mask-y-down:  linear-gradient(to bottom,#000 55%,transparent 100%);
}

/* ── OKLCH, where a browser can render it ───────────────────────────────
   Every value below is the measured OKLCH equivalent of the hex above.
   The hex block is the fallback and stays authoritative for contrast.   */
@supports (color: oklch(50% 0.1 200)){
  :root{
    --field:      oklch(12.84%  0.0129 263.6);
    --field-2:    oklch(16.43%  0.0202 265.8);
    --field-3:    oklch(21.03%  0.0294 266.1);
    --brand-navy: oklch(18.82%  0.0326 264.4);
    --on-gold:    oklch(17.59%  0.0135  77.7);

    --ink:        oklch(96.68%  0.0058 264.5);
    --ink-2:      oklch(71.87%  0.0277 259.0);
    --ink-3:      oklch(62.13%  0.0329 262.5);

    --gold:       oklch(80.95%  0.1337  84.3);
    --gold-pale:  oklch(88.22%  0.1021  86.3);
    --gold-mid:   oklch(72.97%  0.1238  87.1);
    --gold-deep:  oklch(54.24%  0.1001  85.0);

    --brick:      oklch(61.08%  0.1355  34.0);

    --line:        oklch(100% 0 0 / .13);
    --line-soft:   oklch(100% 0 0 / .07);
    --line-strong: oklch(100% 0 0 / .22);
    --wash:        oklch(100% 0 0 / .022);
    --wash-2:      oklch(100% 0 0 / .045);
  }
}

/* ── Chrome height changes at the mobile chrome breakpoint ───────────── */
@media (max-width:760px){
  :root{ --chrome-h: 56px; }
}

/* ── Motion tokens collapse under a reduced-motion preference ─────────── */
@media (prefers-reduced-motion: reduce){
  :root{
    --dur-ui: .001s; --dur-line: .001s; --dur-sheet: .001s;
    --dur-reveal: .001s; --rv-shift: 0px;
    --rv-d1: 0s; --rv-d2: 0s; --rv-d3: 0s; --rv-d4: 0s;
  }
}