/* ==========================================================================
   FANTOM DEFENSE — TOKENS
   assets/css/tokens.css
   --------------------------------------------------------------------------
   Written once by the design agent. EVERY other agent consumes this file and
   never edits it. Load order on every page:

     <link rel="stylesheet" href="/assets/css/tokens.css">
     <link rel="stylesheet" href="/assets/css/base.css">
     <link rel="stylesheet" href="/assets/css/components.css">

   Colour + type values below are reproduced verbatim from
   docs/ARSENAL_CANON.md §9 (LOCKED). Do not substitute.

   Two layers of naming:
     1. CANON tokens  (--ink, --paper, --ember …) — the literal palette.
     2. SEMANTIC tokens (--bg, --fg, --rule …)    — what components read.
   Semantic tokens invert inside [data-surface="paper"] so a single component
   works on both the black and the cream surface with no variant CSS.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---------------------------------------------------------------------
     1. COLOUR — CANON, LOCKED (ARSENAL_CANON §9)
     --------------------------------------------------------------------- */
  --ink:        #08090A;              /* primary black background          */
  --ink-2:      #101214;              /* raised surface                    */
  --paper:      #F1F0EC;              /* inverted light sections           */
  --paper-2:    #E4E2DC;
  --white:      #FFFFFF;
  --fog:        #8B9196;              /* muted text on ink                 */
  --slate:      #55595E;              /* muted text on paper               */
  --hairline:   rgba(255, 255, 255, 0.14);
  --hairline-d: rgba(8, 9, 10, 0.14); /* hairline on paper                 */
  --ember:      #FF4D2E;              /* THE ONLY ACCENT.                  */
  --hud:        #7FE3D0;              /* sensor/mesh graphics ONLY         */

  /* Derived tints. Never introduce new hues — these are the canon colours
     at reduced alpha, used for hover washes, scrims and disabled states.  */
  --ink-3:          #171A1C;
  --ember-08:       rgba(255, 77, 46, 0.08);
  --ember-16:       rgba(255, 77, 46, 0.16);
  --ember-40:       rgba(255, 77, 46, 0.40);
  --hud-24:         rgba(127, 227, 208, 0.24);
  --white-04:       rgba(255, 255, 255, 0.04);
  --white-08:       rgba(255, 255, 255, 0.08);
  --white-28:       rgba(255, 255, 255, 0.28);
  --white-64:       rgba(255, 255, 255, 0.64);
  --ink-04:         rgba(8, 9, 10, 0.04);
  --ink-08:         rgba(8, 9, 10, 0.08);
  --ink-28:         rgba(8, 9, 10, 0.28);
  --ink-64:         rgba(8, 9, 10, 0.64);

  /* ---------------------------------------------------------------------
     2. SEMANTIC SURFACE — default surface is INK
     --------------------------------------------------------------------- */
  --bg:             var(--ink);
  --bg-raised:      var(--ink-2);
  --bg-sunken:      #000000;
  --bg-wash:        var(--white-04);      /* subtle hover fill             */
  --fg:             var(--white);
  --fg-muted:       var(--fog);
  --fg-faint:       var(--white-28);
  --rule:           var(--hairline);      /* 1px hairline on this surface  */
  --rule-strong:    var(--white-28);
  --field-bg:       transparent;
  --field-rule:     var(--hairline);
  --accent:         var(--ember);
  --selection-bg:   var(--ember);
  --selection-fg:   var(--ink);

  /* ---------------------------------------------------------------------
     3. FILM SCRIMS
     The ONLY gradients permitted anywhere in this system (canon §9:
     "No gradients except film grade"). Used to seat type over video.
     --------------------------------------------------------------------- */
  --scrim-tile: linear-gradient(
      to top,
      rgba(8, 9, 10, 0.82) 0%,
      rgba(8, 9, 10, 0.55) 18%,
      rgba(8, 9, 10, 0.12) 46%,
      rgba(8, 9, 10, 0) 68%);
  --scrim-hero: linear-gradient(
      to top,
      rgba(8, 9, 10, 0.72) 0%,
      rgba(8, 9, 10, 0.38) 34%,
      rgba(8, 9, 10, 0.28) 62%,
      rgba(8, 9, 10, 0.58) 100%);
  --scrim-flat: linear-gradient(
      to bottom,
      rgba(8, 9, 10, 0.45) 0%,
      rgba(8, 9, 10, 0.45) 100%);
  --scrim-nav: linear-gradient(
      to bottom,
      rgba(8, 9, 10, 0.88) 0%,
      rgba(8, 9, 10, 0) 100%);

  /* ---------------------------------------------------------------------
     4. TYPE FAMILIES  (canon §9)
     Archivo variable — wght 400–800, wdth 62.5–125 (canon uses 100–125).
     JetBrains Mono 400/500 — eyebrows, captions, spec tables, designations.
     --------------------------------------------------------------------- */
  --font-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:    'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo,
                  Consolas, monospace;

  --wght-regular: 400;
  --wght-medium:  500;
  --wght-semi:    600;
  --wght-bold:    700;
  --wght-heavy:   800;

  /* Width axis. Hero + display type run slightly expanded (canon §9). */
  --wdth-normal:  100%;
  --wdth-wide:    112%;
  --wdth-widest:  120%;

  /* ---------------------------------------------------------------------
     5. TYPE SCALE — 11 / 13 / 15 / 17 / 21 / 28 / 40 / 64 / 96 / 140
     Canon values are the DESKTOP end of each ramp. Every step is a fluid
     clamp() interpolating linearly from a 390px viewport to 1600px.
     --------------------------------------------------------------------- */
  --t-11:  clamp(10px,  0.605rem + 0.083vw, 11px);
  --t-13:  clamp(11.5px, 0.689rem + 0.124vw, 13px);
  --t-15:  clamp(13.5px, 0.814rem + 0.124vw, 15px);
  --t-17:  clamp(15px,  0.897rem + 0.165vw, 17px);
  --t-21:  clamp(17px,  0.982rem + 0.331vw, 21px);
  --t-28:  clamp(21px,  1.172rem + 0.579vw, 28px);
  --t-40:  clamp(27px,  1.426rem + 1.074vw, 40px);
  --t-64:  clamp(36px,  1.686rem + 2.314vw, 64px);
  --t-96:  clamp(44px,  1.702rem + 4.298vw, 96px);
  --t-140: clamp(52px,  1.477rem + 7.273vw, 140px);

  /* Leading */
  --lh-hero:   0.92;   /* canon: hero tight leading                        */
  --lh-tight:  1.04;
  --lh-snug:   1.14;
  --lh-normal: 1.32;
  --lh-body:   1.48;
  --lh-loose:  1.62;
  --lh-mono:   1.42;

  /* Tracking */
  --tr-hero:   -0.02em;  /* canon: hero tracking                           */
  --tr-tight:  -0.015em;
  --tr-snug:   -0.008em;
  --tr-normal: 0;
  --tr-mono:   0.12em;   /* canon: mono always +0.12em                     */
  --tr-mono-wide: 0.18em;

  /* ---------------------------------------------------------------------
     6. SPACING SCALE  (4px base)
     --------------------------------------------------------------------- */
  --s-0:   0;
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   24px;
  --s-6:   32px;
  --s-7:   48px;
  --s-8:   64px;
  --s-9:   96px;
  --s-10:  128px;
  --s-11:  192px;

  /* Fluid block rhythm */
  --pad-section:    clamp(64px, 7.5vw, 128px);
  --pad-section-sm: clamp(40px, 4.5vw, 72px);
  --pad-section-lg: clamp(88px, 11vw, 192px);
  --stack:          clamp(20px, 2.2vw, 32px);   /* default vertical stack   */

  /* ---------------------------------------------------------------------
     7. LAYOUT / GRID  (canon §9: 12-col, max 1600px, 24px gutters)
     --------------------------------------------------------------------- */
  --container-max: 1600px;
  --gutter:        24px;
  --grid-cols:     12;
  --grid-gap:      24px;

  /* Bento module. Measured from the anduril capture: the whole product grid
     is a 3-column SQUARE module grid; every tile is an integer span of it.
     Gap measured 14px @1100px viewport = 1.27vw -> 20px at 1600. */
  --bento-cols: 3;
  --bento-gap:  clamp(10px, 1.25vw, 20px);
  --tile-pad:   clamp(16px, 1.5vw, 24px);   /* measured 13px @1100 -> ~19px */

  /* Chrome */
  --nav-h:        72px;    /* measured 55px @1100 viewport                  */
  --nav-h-sm:     60px;
  --search-h:     90px;    /* measured 69px @1100                           */
  --hairline-w:   1px;
  --rule-w:       1px;

  /* ---------------------------------------------------------------------
     8. MOTION  (canon §9)
     --------------------------------------------------------------------- */
  --ease:       cubic-bezier(0.16, 1, 0.3, 1);   /* the house curve        */
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --ease-linear: linear;

  --dur-1:  120ms;   /* micro: colour, opacity on small marks              */
  --dur-2:  240ms;   /* control state                                      */
  --dur-3:  420ms;   /* tile hover                                         */
  --dur-4:  600ms;   /* canon floor for reveals / panels                   */
  --dur-5:  750ms;
  --dur-6:  900ms;   /* canon ceiling                                      */

  --reveal-rise: 24px;   /* canon: scroll reveal = 24px rise + opacity     */

  /* Named transitions */
  --tx-fast:  var(--dur-2) var(--ease);
  --tx-base:  var(--dur-3) var(--ease);
  --tx-slow:  var(--dur-4) var(--ease);

  /* ---------------------------------------------------------------------
     9. Z-LAYERS
     --------------------------------------------------------------------- */
  --z-base:     0;
  --z-media:    1;
  --z-scrim:    2;
  --z-content:  3;
  --z-sticky:   50;
  --z-nav:      100;
  --z-mega:     110;
  --z-search:   120;
  --z-drawer:   130;
  --z-modal:    150;
  --z-skip:     200;

  /* ---------------------------------------------------------------------
     10. FOCUS
     --------------------------------------------------------------------- */
  --focus-ring:   2px;
  --focus-offset: 2px;
  --focus-color:  var(--ember);
}

/* ==========================================================================
   PAPER SURFACE INVERSION
   --------------------------------------------------------------------------
   The black -> cream section flip. Put data-surface="paper" on ANY block
   (a <section>, a <footer>, a panel) and every semantic token beneath it
   inverts: text, hairlines, washes, selection. Components need no variants.

     <section class="section" data-surface="paper"> … </section>
     <section class="section section--paper">        … </section>   (alias)

   Nest data-surface="ink" inside a paper block to flip back (e.g. a dark
   tile sitting in a light news section).
   ========================================================================== */

[data-surface='paper'],
.section--paper,
.footer--paper,
.u-paper {
  color-scheme: light;

  --bg:          var(--paper);
  --bg-raised:   var(--paper-2);
  --bg-sunken:   var(--paper-2);
  --bg-wash:     var(--ink-04);
  --fg:          var(--ink);
  --fg-muted:    var(--slate);
  --fg-faint:    var(--ink-28);
  --rule:        var(--hairline-d);
  --rule-strong: var(--ink-28);
  --field-rule:  var(--hairline-d);
  --selection-bg: var(--ink);
  --selection-fg: var(--paper);

  --scrim-tile: linear-gradient(
      to top,
      rgba(8, 9, 10, 0.72) 0%,
      rgba(8, 9, 10, 0.34) 30%,
      rgba(8, 9, 10, 0) 62%);

  background-color: var(--bg);
  color: var(--fg);
}

[data-surface='ink'],
.u-ink {
  color-scheme: dark;

  --bg:          var(--ink);
  --bg-raised:   var(--ink-2);
  --bg-sunken:   #000000;
  --bg-wash:     var(--white-04);
  --fg:          var(--white);
  --fg-muted:    var(--fog);
  --fg-faint:    var(--white-28);
  --rule:        var(--hairline);
  --rule-strong: var(--white-28);
  --field-rule:  var(--hairline);
  --selection-bg: var(--ember);
  --selection-fg: var(--ink);

  --scrim-tile: linear-gradient(
      to top,
      rgba(8, 9, 10, 0.82) 0%,
      rgba(8, 9, 10, 0.55) 18%,
      rgba(8, 9, 10, 0.12) 46%,
      rgba(8, 9, 10, 0) 68%);

  background-color: var(--bg);
  color: var(--fg);
}

/* Media laid over film always keeps ink-surface tokens regardless of the
   section it sits in — type over video is always white on dark. */
[data-surface='film'] {
  --fg:       var(--white);
  --fg-muted: var(--white-64);
  --fg-faint: var(--white-28);
  --rule:     var(--hairline);
  color: var(--fg);
}

/* ==========================================================================
   SMALL-VIEWPORT TOKEN OVERRIDES
   Gutters stay at the canon 24px; chrome and rhythm tighten.
   ========================================================================== */

@media (max-width: 767px) {
  :root {
    --nav-h:     var(--nav-h-sm);
    --search-h:  68px;
    --grid-gap:  16px;
    --bento-gap: 12px;
  }
}

@media (max-width: 420px) {
  :root {
    --gutter:   20px;
    --tile-pad: 16px;
  }
}

/* ==========================================================================
   REDUCED MOTION — collapse every duration at the token level so nothing
   downstream has to remember to.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 1ms;
    --dur-2: 1ms;
    --dur-3: 1ms;
    --dur-4: 1ms;
    --dur-5: 1ms;
    --dur-6: 1ms;
    --reveal-rise: 0px;
  }
}