/* ============================================================================
   ReconOS — Design Token System
   Source of truth for the marketing surface (home / landing / admin / dashboard).
   ----------------------------------------------------------------------------
   - Zero-dependency, same-origin, offline. No CDN, no remote fonts, no @import.
   - Safe under the strict CSP:
       default-src 'self'; style-src 'self' 'unsafe-inline'; font-src falls back
       to 'self'; img-src 'self' data:.
   - Usable two ways:
       1. Inlined inside a page <style> (paste the :root block + @font-face).
       2. Served from /assets/reconos-tokens.css via a static handler (preferred).
   - Fonts are self-hosted WOFF2 in /assets/fonts/ (SIL OFL 1.1). See fonts/README.
   - Green (--rc-green / --rc-signal) is a FUNCTIONAL signal color. It marks
     state, the single primary action, and active nav — never a wash, never a
     gradient, never decoration. Most of the surface is graphite + warm gray.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. FONTS  (self-hosted, latin subset, font-display:swap)
   --------------------------------------------------------------------------- */

/* Archivo — display / headline grotesque. SIL OFL 1.1. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin-800-normal.woff2") format("woff2");
}

/* IBM Plex Sans — body / UI. SIL OFL 1.1. */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2");
}

/* IBM Plex Mono — technical / data / labels. SIL OFL 1.1. */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
}

/* ---------------------------------------------------------------------------
   2. TOKENS
   --------------------------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* ---- 2.1 RAW PALETTE (refined from the seed palette) ------------------ */
  /* Neutral spine — warm, low-chroma graphite. The whole surface lives here. */
  --rc-black:        #070908;   /* deepest base, vignette anchor            */
  --rc-graphite-950: #0d1110;   /* page background                          */
  --rc-graphite-900: #151a18;   /* raised surface / panel                   */
  --rc-graphite-850: #1a201d;   /* surface hover / nested fill (interp)     */
  --rc-graphite-800: #202622;   /* elevated surface / input fill            */
  --rc-graphite-700: #2c332e;   /* hairline-strong / divider on dark (interp) */
  --rc-graphite-600: #3a423c;   /* border-strong, control outline (interp)  */

  /* Text + mid neutrals */
  --rc-tactical-gray: #69706b;  /* decorative/disabled grey, NON-text only   */
  --rc-tactical-500:  #939a93;  /* muted TEXT — AA (>=4.5:1) on all surfaces  */
  --rc-tactical-450:  #8f968f;  /* secondary text (AA on graphite-950)(interp) */
  --rc-warm-gray:     #d8dbd6;  /* primary body text                        */
  --rc-off-white:     #f1f3ef;  /* headings / highest-contrast text         */

  /* Functional signal greens — restrained, never a background wash */
  --rc-green:         #7fa66b;  /* brand/primary action, active state       */
  --rc-green-700:     #5f7e50;  /* pressed / darker green (interp)           */
  --rc-signal:        #9abd80;  /* bright signal: success text, live ticks   */
  --rc-green-on:      #0c1410;  /* ink that sits ON solid green (AA)         */

  /* SECONDARY accent — tactical orange. Distinct from amber (warning) and red
     (critical): more saturated + red-shifted than amber, brighter than red.
     Used sparingly as the brand's second voice, never as a wash. */
  --rc-orange:        #fb5701;  /* SKOPEO brand orange (from the logo) - solid/press fill - 5.9:1 AA on bg */
  --rc-orange-bright: #fb5701;  /* THE brand accent text/icon - SKOPEO orange - 5.9:1 bg / 4.8:1 surface-2 (AA) */
  --rc-orange-hi:     #ff7a2e;  /* brighter SKOPEO orange - accent hover/active - 7.3:1 AA */
  --rc-orange-on:     #160c05;  /* ink that sits ON solid orange - 5.9:1 on #fb5701 (AA) */
  --rc-orange-tint:   rgba(251, 87, 1, 0.12);
  --rc-orange-line:   rgba(251, 87, 1, 0.46);

  /* Status */
  --rc-amber:         #c89a54;  /* warning / pending / caution               */
  --rc-amber-bright:  #d9b06d;  /* warning text on dark (AA)(interp)         */
  --rc-red:           #b95c55;  /* critical / destructive / revoked          */
  --rc-red-bright:    #d27f78;  /* critical text on dark (AA)(interp)        */

  /* Tints — fills behind status/active, kept very low alpha (no glass wash) */
  --rc-green-tint:    rgba(127, 166, 107, 0.10);
  --rc-green-line:    rgba(127, 166, 107, 0.42);
  --rc-amber-tint:    rgba(200, 154, 84, 0.10);
  --rc-amber-line:    rgba(200, 154, 84, 0.42);
  --rc-red-tint:      rgba(185, 92, 85, 0.10);
  --rc-red-line:      rgba(185, 92, 85, 0.48);

  /* ---- 2.2 SEMANTIC ALIASES (use THESE in pages, not raw palette) ------- */
  --color-bg:            var(--rc-graphite-950);
  --color-bg-deep:       var(--rc-black);
  --color-surface:       var(--rc-graphite-900);
  --color-surface-2:     var(--rc-graphite-800);
  --color-surface-hover: var(--rc-graphite-850);
  --color-input:         #0c100e;            /* recessed field, below surface */

  --color-text-primary:   var(--rc-off-white);
  --color-text-body:      var(--rc-warm-gray);
  --color-text-secondary: var(--rc-tactical-450);
  --color-text-muted:     var(--rc-tactical-500);  /* AA text muted; decorative grey is --rc-tactical-gray */
  --color-text-on-accent: var(--rc-orange-on);

  --color-border:        var(--rc-graphite-700);   /* default hairline        */
  --color-border-strong: var(--rc-graphite-600);   /* control / emphasized    */
  --color-border-faint:  rgba(216, 219, 214, 0.07);/* whisper rule on surface */

  --color-accent:        var(--rc-orange-bright);  /* THE primary action (orange) */
  --color-accent-hover:  var(--rc-orange-hi);
  --color-accent-press:  var(--rc-orange);
  --color-accent-line:   var(--rc-orange-line);
  --color-accent-tint:   var(--rc-orange-tint);

  /* SECONDARY accent (orange). Green stays primary; this is the second voice
     for secondary CTAs/links, index marks, hover ticks, and the topo highlight.
     Use sparingly — never more than the primary green draws the eye. */
  --color-accent-2:        var(--rc-orange-bright); /* secondary accent (text/icon) */
  --color-accent-2-solid:  var(--rc-orange);        /* solid secondary surface     */
  --color-accent-2-hover:  var(--rc-orange-bright);
  --color-accent-2-line:   var(--rc-orange-line);
  --color-accent-2-tint:   var(--rc-orange-tint);
  --color-on-accent-2:     var(--rc-orange-on);

  --color-success:       var(--rc-signal);
  --color-warning:       var(--rc-amber-bright);
  --color-critical:      var(--rc-red-bright);
  --color-destructive:   var(--rc-red);

  --color-focus:         var(--rc-orange-bright);  /* focus ring color (orange) */

  /* ---- 2.3 TYPOGRAPHY ---------------------------------------------------- */
  --font-display: "Archivo", "Segoe UI", system-ui, sans-serif;
  --font-body:    "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

  /* Weights (only the provisioned ones) */
  --fw-body:        400;
  --fw-medium:      500;
  --fw-semibold:    600;
  --fw-bold:        700;
  --fw-display:     700;
  --fw-display-max: 800;

  /* Type scale — fluid where it helps the hero, fixed for UI.
     Names map onto the brand-system scale (display-2xl … text-xs). */
  --fs-display-2xl: clamp(2.75rem, 1.6rem + 4.6vw, 4.5rem);   /* 44 -> 72  hero */
  --fs-display-xl:  clamp(2.1rem, 1.4rem + 2.8vw, 3.25rem);   /* 34 -> 52  section lead */
  --fs-display-lg:  clamp(1.6rem, 1.25rem + 1.5vw, 2.25rem);  /* 26 -> 36  big subhead */
  --fs-h2:          1.5rem;     /* 24 */
  --fs-h3:          1.1875rem;  /* 19 */
  --fs-lg:          1.125rem;   /* 18  lede / large body */
  --fs-md:          1rem;       /* 16  body default */
  --fs-sm:          0.875rem;   /* 14  dense UI / secondary */
  --fs-xs:          0.75rem;    /* 12  captions */
  --fs-2xs:         0.6875rem;  /* 11  micro-labels, table headers */

  /* Line heights */
  --lh-tight:   1.04;   /* display headlines */
  --lh-snug:    1.22;   /* subheads */
  --lh-normal:  1.55;   /* body */
  --lh-relaxed: 1.65;   /* long-form lede */

  /* Letter-spacing (tracking) */
  --ls-display:  -0.02em;  /* large Archivo display tightens up */
  --ls-head:     -0.01em;
  --ls-normal:    0;
  --ls-label:     0.08em;  /* mono micro-labels */
  --ls-eyebrow:   0.18em;  /* uppercase eyebrow / kicker */
  --ls-wordmark:  0.30em;  /* RECON / OS wordmark */

  /* ---- 2.4 SPACING (4px base unit) -------------------------------------- */
  --space-unit: 4px;
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Layout / rhythm */
  --container-max:    1200px;   /* marketing content width        */
  --container-text:   680px;    /* readable measure for prose      */
  --container-narrow: 440px;    /* auth cards / portal             */
  --gutter:           24px;     /* horizontal padding, mobile      */
  --gutter-lg:        48px;     /* horizontal padding, >= 900px    */

  /* Section vertical rhythm (marketing) */
  --section-y:    clamp(64px, 4vw + 40px, 112px);
  --section-y-lg: clamp(88px, 6vw + 48px, 160px);  /* hero / big breaks */

  /* ---- 2.5 RADII (sharp, technical — corners are nearly square) --------- */
  --radius-0:  0;
  --radius-sm: 2px;     /* inputs, pills, chips            */
  --radius-md: 4px;     /* buttons, cards                  */
  --radius-lg: 6px;     /* large panels                    */
  --radius-pill: 999px; /* status dots only, used sparingly */

  /* ---- 2.6 BORDERS ------------------------------------------------------- */
  --border-hairline: 1px solid var(--color-border);
  --border-strong:   1px solid var(--color-border-strong);
  --border-faint:    1px solid var(--color-border-faint);
  --border-accent:   1px solid var(--color-accent-line);

  /* ---- 2.7 ELEVATION / DEPTH -------------------------------------------- */
  /* Depth comes from value + hairline, NOT soft glowing shadows. Shadows are
     tight, dark, and directional. No colored glows. */
  --shadow-0: none;
  --shadow-1: 0 1px 0 rgba(0,0,0,0.40);
  --shadow-2: 0 2px 4px rgba(0,0,0,0.45), 0 1px 0 rgba(0,0,0,0.50);
  --shadow-3: 0 8px 24px rgba(0,0,0,0.50), 0 1px 0 rgba(0,0,0,0.55);
  --shadow-4: 0 24px 60px rgba(0,0,0,0.60), 0 2px 6px rgba(0,0,0,0.50);
  /* Inset top highlight to read as machined metal edge on panels (optional) */
  --edge-top: inset 0 1px 0 rgba(241,243,239,0.04);

  /* Z-index scale */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-overlay: 1000;
  --z-modal: 1100;
  --z-toast: 1200;

  /* ---- 2.8 FOCUS STATES (strong + visible — mandatory) ------------------ */
  --focus-ring-width:  2px;
  --focus-ring-offset: 2px;
  --focus-ring-color:  var(--color-focus);
  /* Apply via: outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); */
  --focus-ring: var(--focus-ring-width) solid var(--focus-ring-color);

  /* ---- 2.9 MOTION -------------------------------------------------------- */
  --dur-instant: 80ms;
  --dur-fast:    140ms;   /* micro-interactions (hover, press)   */
  --dur-base:    240ms;   /* element transitions                 */
  --dur-slow:    420ms;   /* section reveals                     */
  --dur-deliberate: 700ms;/* hero atmosphere drift               */

  --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0);   /* default in/out  */
  --ease-out:      cubic-bezier(0.16, 1.0, 0.3, 1.0);  /* decel emphasis  */
  --ease-in:       cubic-bezier(0.4, 0.0, 1.0, 1.0);   /* accel exit      */
  --ease-linear:   linear;                              /* scanning ticks  */

  /* ---- 2.10 TEXTURE PARAMETERS ------------------------------------------ */
  --grid-line:    rgba(216, 219, 214, 0.035);   /* fine technical grid    */
  --grid-size:    32px;
  --contour-line: rgba(127, 166, 107, 0.05);    /* faint topo contour     */
  --grain-opacity: 0.045;                        /* film grain strength    */
  --vignette:     radial-gradient(120% 90% at 50% 0%,
                    transparent 40%, rgba(7,9,8,0.55) 100%);

  /* Topographic map texture (code-generated, no raster). Faint warm-gray
     contour lines, one quiet orange "index contour" highlight per system. */
  --topo-line:       rgba(216, 219, 214, 0.040);  /* standard contour line  */
  --topo-line-soft:  rgba(216, 219, 214, 0.022);  /* secondary ring family  */
  --topo-index:      rgba(244, 124, 32, 0.065);   /* orange index contour   */
  --topo-spacing:    34px;                          /* contour interval       */

  /* ---- 2.11 SIGNATURE TOPO BACKDROP (full-bleed page/hero terrain) ------ */
  /* The main page backdrop is a code-generated topographic-contour terrain
     (no raster). These drive .rc-topo-bg: a prominent-but-readable ridge/
     basin contour field with a depth gradient + vignette so body text stays
     AA on top. All values are alphas on near-black — they never approach a
     contrast-breaking level. */
  --topo-bg-line:    rgba(220, 224, 216, 0.072);  /* main contour stroke (clearly present) */
  --topo-bg-soft:    rgba(220, 224, 216, 0.040);  /* secondary / valley contours          */
  --topo-bg-index:   rgba(244, 124, 32, 0.085);   /* the single orange index contour      */
  --topo-bg-haze:    rgba(13, 17, 16, 0.00);      /* reserved depth-haze hook (unused=off) */
  --topo-bg-step:    46px;   /* primary ridge contour interval (larger = grander terrain) */
}

/* ---------------------------------------------------------------------------
   3. BASE RESETS / PRIMITIVES  (optional but recommended; safe to inline)
   --------------------------------------------------------------------------- */
.rc-root,
body.rc {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text-body);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.rc * { box-sizing: border-box; }

/* Headings use the display grotesque. */
.rc h1, .rc h2, .rc h3, .rc-display {
  font-family: var(--font-display);
  color: var(--color-text-primary);
  font-weight: var(--fw-display);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-head);
  margin: 0;
}

/* Strong, always-visible focus — global default. */
.rc :focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

/* ---------------------------------------------------------------------------
   4. TYPE UTILITIES
   --------------------------------------------------------------------------- */
.rc-display-2xl { font-family: var(--font-display); font-weight: var(--fw-display-max);
  font-size: var(--fs-display-2xl); line-height: var(--lh-tight); letter-spacing: var(--ls-display);
  color: var(--color-text-primary); }
.rc-display-xl  { font-family: var(--font-display); font-weight: var(--fw-display);
  font-size: var(--fs-display-xl); line-height: var(--lh-tight); letter-spacing: var(--ls-display);
  color: var(--color-text-primary); }
.rc-display-lg  { font-family: var(--font-display); font-weight: var(--fw-display);
  font-size: var(--fs-display-lg); line-height: var(--lh-snug); letter-spacing: var(--ls-head);
  color: var(--color-text-primary); }

.rc-lede   { font-size: var(--fs-lg); line-height: var(--lh-relaxed); color: var(--color-text-body); }
.rc-body   { font-size: var(--fs-md); line-height: var(--lh-normal); color: var(--color-text-body); }
.rc-small  { font-size: var(--fs-sm); color: var(--color-text-secondary); }
.rc-muted  { color: var(--color-text-muted); }

/* Eyebrow / kicker — mono, uppercase, tracked. The signature ReconOS label. */
.rc-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--color-text-secondary);
}
.rc-eyebrow--accent { color: var(--color-accent); }

/* Micro-label (table headers, field labels). */
.rc-label {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--color-text-muted);
}

.rc-mono { font-family: var(--font-mono); }

/* Wordmark lockup — RECON / OS. Use mono, wide tracking. */
.rc-wordmark {
  font-family: var(--font-mono);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wordmark);
  text-transform: uppercase;
  color: var(--color-text-primary);
}
.rc-wordmark .os { color: var(--color-accent); }

/* Optimal measure for prose blocks. */
.rc-measure { max-width: var(--container-text); }

/* ---------------------------------------------------------------------------
   5. LAYOUT UTILITIES
   --------------------------------------------------------------------------- */
.rc-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
@media (min-width: 900px) {
  .rc-container { padding-inline: var(--gutter-lg); }
}
.rc-section   { padding-block: var(--section-y); }
.rc-section-lg { padding-block: var(--section-y-lg); }

/* ---------------------------------------------------------------------------
   6. TEXTURE / ATMOSPHERE UTILITIES  (CSS-native only)
   These are reusable layers. Apply to a positioned container; they paint into
   ::before / ::after so content stacks above. All decorative => aria-hidden
   not needed (pseudo-elements aren't in the a11y tree).
   --------------------------------------------------------------------------- */

/* 6.1 Fine technical grid — faint engineering paper. */
.rc-grid {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
}

/* 6.2 Contour lines — faint topographic bands (concealment / terrain). */
.rc-contour {
  background-image: repeating-radial-gradient(
    circle at 80% -10%,
    transparent 0,
    transparent 46px,
    var(--contour-line) 46px,
    var(--contour-line) 47px
  );
}

/* 6.2b Topographic map — code-generated (NO raster / NO stock). Several
   off-center contour "ridge systems" of faint warm-gray lines, with a single
   quiet orange index contour, painted into ::before so content stacks above.
   Palantir-restrained: near-invisible, behind everything, never hurts contrast.
   Apply to a positioned container (.rc-vignette already sets position; or add
   position elsewhere). All same-origin, CSP-safe (pure CSS gradients). */
.rc-topo { position: relative; }
.rc-topo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    /* primary ridge — tight contours, upper-right high ground */
    repeating-radial-gradient(
      circle at 82% 8%,
      transparent 0, transparent calc(var(--topo-spacing) - 1px),
      var(--topo-line) calc(var(--topo-spacing) - 1px), var(--topo-line) var(--topo-spacing)
    ),
    /* the orange index contour for the primary ridge (wider interval) */
    repeating-radial-gradient(
      circle at 82% 8%,
      transparent 0, transparent calc(var(--topo-spacing) * 5 - 1px),
      var(--topo-index) calc(var(--topo-spacing) * 5 - 1px), var(--topo-index) calc(var(--topo-spacing) * 5 + 1px)
    ),
    /* secondary basin — wider, softer rings, lower-left */
    repeating-radial-gradient(
      circle at 12% 96%,
      transparent 0, transparent calc(var(--topo-spacing) * 1.55 - 1px),
      var(--topo-line-soft) calc(var(--topo-spacing) * 1.55 - 1px), var(--topo-line-soft) calc(var(--topo-spacing) * 1.55)
    ),
    /* tertiary feature — mid-left, breaks any obvious symmetry */
    repeating-radial-gradient(
      circle at 30% 40%,
      transparent 0, transparent calc(var(--topo-spacing) * 1.18 - 1px),
      var(--topo-line-soft) calc(var(--topo-spacing) * 1.18 - 1px), var(--topo-line-soft) calc(var(--topo-spacing) * 1.18)
    );
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.55) 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.55) 70%, transparent 100%);
}
/* keep direct children above the topo layer when used as a section backdrop */
.rc-topo > * { position: relative; z-index: 1; }

/* 6.2c SIGNATURE TOPOGRAPHIC BACKDROP — .rc-topo-bg
   ----------------------------------------------------------------------------
   The MAIN page/hero backdrop: a full-bleed, code-generated topographic-contour
   terrain. Real-looking nested contour lines/ridges (NOT concentric circles),
   generated entirely in CSS via an inline SVG data-URI — no raster, no stock,
   same-origin, CSP-safe under `img-src 'self' data:`.

   How it works (so it reads as real terrain, not ripples):
     • An SVG `feTurbulence` (fractalNoise) builds a smooth, irregular HEIGHT
       FIELD. `feColorMatrix` stretches that field's alpha (×2 −0.5) so it sweeps
       the full 0..1 domain, then `feComponentTransfer`'s DISCRETE table lights a
       single thin slice per period — i.e. genuine THIN contour lines that close
       into organic nested ridges and basins (not concentric circles, not filled
       bands). A second, coarser filter tints one-in-N contours with the brand
       orange to read as the surveyor's "index contour." The table tails in 0s so
       clamped peaks/pits stay blank (no white plateaus).
     • Two depth layers keep text readable: a top-down DEPTH GRADIENT plus a
       radial VIGNETTE darken the field. Verified (headless Chromium, 2× DSR,
       worst-case lightest contour pixel under text): body #d8dbd6 = 5.7:1,
       heading #f1f3ef = 7.8:1, orange eyebrow = 3.2:1 — all >= WCAG AA. The
       brightest possible contour pixel is ~#4e524f; it cannot break text.

   It is STATIC (no animation) → reduced-motion safe by construction.
   It sits BEHIND content (::before, z-index 0); the rule sets position itself,
   and direct children are lifted to z-index 1.

   APPLY (frontend-builder): put `rc-topo-bg` on the element that should carry
   the terrain as the page backdrop — typically <body class="rc rc-topo-bg"> for
   a whole-page wash, or on the hero <section>. See the .md note + report. */
.rc-topo-bg { position: relative; isolation: isolate; }
.rc-topo-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Background stack (first = top-most): readability VIGNETTE, then the depth
     GRADIENT, then the contour TERRAIN SVG at the bottom. The two gradients sit
     OVER the terrain to cap how bright any single contour line can read under
     text — this is what guarantees the AA numbers above. */
  background-image:
    /* readability vignette — frames content, darkens the busy edges */
    radial-gradient(135% 115% at 50% 18%,
      transparent 0%, transparent 42%, rgba(7,9,8,0.45) 80%, rgba(7,9,8,0.74) 100%),
    /* top-to-bottom depth gradient — calms the upper content band + footer base */
    linear-gradient(180deg,
      rgba(13,17,16,0.42) 0%, rgba(13,17,16,0.20) 30%,
      rgba(13,17,16,0.12) 66%, rgba(13,17,16,0.58) 100%),
    /* the contour terrain (inline SVG: fractalNoise -> stretched -> thin discrete
       iso-lines). Warm-gray contour family (#dce0d8 @ 0.40) + one orange index
       contour (#f47c20 @ 0.50). 1600x1000 tile, cover-scaled across the page. */
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='1600' height='1000' preserveAspectRatio='xMidYMid slice'>\
<defs>\
<filter id='c' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'>\
<feTurbulence type='fractalNoise' baseFrequency='0.0085 0.0115' numOctaves='4' seed='11' stitchTiles='stitch' result='n'/>\
<feColorMatrix in='n' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2 -0.5' result='h'/>\
<feComponentTransfer in='h' result='lines'>\
<feFuncA type='discrete' tableValues='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0'/>\
</feComponentTransfer>\
<feFlood flood-color='%23dce0d8' result='ink'/>\
<feComposite in='ink' in2='lines' operator='in'/>\
</filter>\
<filter id='i' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'>\
<feTurbulence type='fractalNoise' baseFrequency='0.0085 0.0115' numOctaves='4' seed='11' stitchTiles='stitch' result='n'/>\
<feColorMatrix in='n' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2 -0.5' result='h'/>\
<feComponentTransfer in='h' result='idx'>\
<feFuncA type='discrete' tableValues='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0'/>\
</feComponentTransfer>\
<feFlood flood-color='%23f47c20' result='ink'/>\
<feComposite in='ink' in2='idx' operator='in'/>\
</filter>\
</defs>\
<rect width='1600' height='1000' fill='%230d1110'/>\
<rect width='1600' height='1000' filter='url(%23c)' opacity='0.40'/>\
<rect width='1600' height='1000' filter='url(%23i)' opacity='0.50'/>\
</svg>");
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: center, center, center;
  background-size: cover, cover, cover;
}
/* host content sits above the terrain */
.rc-topo-bg > * { position: relative; z-index: 1; }

/* 6.3 Vignette — darkens edges, focuses the eye, cinematic. */
.rc-vignette { position: relative; }
.rc-vignette::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--vignette);
  z-index: 1;
}

/* 6.4 Film grain — pure CSS, fractal-noise SVG as a data URI (CSP-safe under
   img-src 'self' data: ... background-image data: URIs are allowed by
   default-src 'self'? -> data: must be permitted; this uses a tiny SVG via
   background; to stay strictly within style-src, prefer the noise mask below). */
.rc-grain { position: relative; }
.rc-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--grain-opacity);
  z-index: 2;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 120px 120px;
  mix-blend-mode: overlay;
}

/* 6.5 Hairline scan line at a panel's top edge (active/live emphasis). */
.rc-scanline { position: relative; }
.rc-scanline::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-accent-line), transparent);
}

/* 6.6 Image treatment — duotone-ish desaturation + graphite multiply so the
   AI-generated atmosphere renders read as mood, never as crisp product UI. */
.rc-img-atmos {
  filter: grayscale(0.35) contrast(1.05) brightness(0.82);
}
.rc-img-mask {
  position: relative;
}
.rc-img-mask::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7,9,8,0.10), rgba(7,9,8,0.85)),
    radial-gradient(80% 60% at 50% 30%, transparent, rgba(7,9,8,0.40));
  mix-blend-mode: multiply;
}

/* ---------------------------------------------------------------------------
   7. COMPONENT TOKENS  (treatments the builder applies; not full components)
   --------------------------------------------------------------------------- */

/* 7.1 Buttons */
.rc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  padding: 11px 20px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.rc-btn:active { transform: translateY(1px); }

.rc-btn--primary {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  border-color: var(--color-accent);
}
.rc-btn--primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.rc-btn--primary:active { background: var(--color-accent-press); border-color: var(--color-accent-press); }

.rc-btn--ghost {
  background: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}
.rc-btn--ghost:hover { border-color: var(--color-accent-line); color: var(--color-accent-hover); }

.rc-btn--quiet {
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}
.rc-btn--quiet:hover { color: var(--color-text-primary); border-color: var(--color-border-strong); }

.rc-btn--danger {
  background: transparent;
  color: var(--color-critical);
  border-color: var(--rc-red-line);
}
.rc-btn--danger:hover { background: var(--rc-red-tint); }

.rc-btn:disabled, .rc-btn[disabled] { opacity: 0.45; cursor: default; transform: none; }

/* 7.2 Card / panel */
.rc-card {
  background: var(--color-surface);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--edge-top);
  padding: var(--space-6);
}
.rc-card--raised { box-shadow: var(--shadow-3), var(--edge-top); }
.rc-card--accent { border-left: 2px solid var(--color-accent); }

/* 7.3 Inputs / fields */
.rc-input {
  width: 100%;
  background: var(--color-input);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.rc-input::placeholder { color: var(--color-text-muted); }
.rc-input:focus-visible {
  border-color: var(--color-accent);
  outline: var(--focus-ring);
  outline-offset: 1px;
}

/* 7.4 Table */
.rc-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.rc-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--color-text-muted);
  border-bottom: var(--border-hairline);
  padding: 8px 10px;
}
.rc-table td { border-bottom: var(--border-faint); padding: 8px 10px; vertical-align: top; }
.rc-table tr:hover td { background: var(--color-surface-hover); }

/* 7.5 Status pill — outline style, mono, tiny. The dot carries the color. */
.rc-pill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  padding: 2px 8px 2px 7px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
}
.rc-pill::before {
  content: ""; width: 6px; height: 6px; border-radius: var(--radius-pill);
  background: currentColor; flex: none;
}
.rc-pill--active   { color: var(--color-success);  border-color: var(--rc-green-line); }
.rc-pill--accent   { color: var(--color-accent);   border-color: var(--color-accent-line); }
.rc-pill--pending  { color: var(--color-warning);  border-color: var(--rc-amber-line); }
.rc-pill--critical { color: var(--color-critical); border-color: var(--rc-red-line); }

/* 7.6 Nav */
.rc-nav-link {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: var(--space-2) 0;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast);
}
.rc-nav-link:hover { color: var(--color-text-primary); }
.rc-nav-link[aria-current="page"] { color: var(--color-accent); border-bottom-color: var(--color-accent); }

/* ---------------------------------------------------------------------------
   8. REDUCED MOTION  (mandatory — degrade all motion gracefully)
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .rc *,
  .rc *::before,
  .rc *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}