/* ============================================================
   RSC OVERWATCH — colors_and_type.css
   Locked tokens. Mirror of the production stack (RECCE + OVERWATCH).
   Do not introduce additional accent colours.
   ============================================================ */

/* ---------- FONTS ---------- */

@font-face {
  font-family: "Bebas Neue";
  src: url("./fonts/bebas-neue-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Outfit";
  src: url("./fonts/outfit-latin.woff2") format("woff2-variations"),
       url("./fonts/outfit-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Allison";
  src: url("./fonts/allison-v13-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* IBM Plex Mono is the only family we don't self-host yet.
   OVERWATCH production loads it from its own asset pipeline; in the
   design system we fall back to system mono if the file is missing. */
@font-face {
  font-family: "IBM Plex Mono";
  src: local("IBM Plex Mono"),
       local("IBMPlexMono"),
       url("./fonts/ibm-plex-mono.woff2") format("woff2");
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- TOKENS ---------- */

:root {
  /* Surface ladder — only five greys exist. */
  --base:              #0D0B09;  /* deep near-black ground */
  --surface:           #1A1714;  /* panel backgrounds */
  --surface-elevated:  #2C2520;  /* card / hover surface */
  --hairline:          #2C2520;  /* 1px borders against --surface */
  --hairline-strong:   #3A322C;  /* dividers inside panels */

  /* Text ladder */
  --text-primary:      #F5F0EB;  /* headings, primary data */
  --text-secondary:    #A8A29E;  /* body, labels */
  --text-tertiary:     #78716C;  /* metadata, timestamps */
  --text-quiet:        #57534E;  /* disabled, ghost */

  /* State-change colours — NEVER decorative */
  --accent:            #845132;  /* bronze. Hover, state-change, current selection */
  --accent-glow:       #C4956A;  /* bronze on dark — confidence ≥0.8, amber-tier signal */
  --alert:             #DC2626;  /* one true red, critical + unhandled only */

  /* Confidence band colours (used in feed) */
  --conf-low:          var(--text-tertiary);   /* <0.5 */
  --conf-mid:          var(--text-secondary);  /* 0.5 – 0.79 */
  --conf-high:         var(--accent-glow);     /* ≥0.8 */

  /* Type — base families */
  --font-display: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  --font-body:    "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-script:  "Allison", "Brush Script MT", cursive;

  /* Semantic type roles
     Bebas display + Outfit body. Aggressive weight contrast: 200 vs 600. */
  --type-wordmark-size:     32px;
  --type-wordmark-tracking: 0.18em;
  --type-display-size:      28px;   /* section labels in Bebas */
  --type-display-tracking:  0.08em;
  --type-h1-size:           48px;
  --type-h2-size:           32px;
  --type-h3-size:           18px;
  --type-body-size:         13px;   /* dense default */
  --type-body-lh:           1.5;
  --type-data-size:         13px;   /* numbers, mono-numerals */
  --type-meta-size:         11px;   /* timestamps, labels */
  --type-meta-tracking:     0.12em;

  /* Spacing — 4px grid */
  --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;

  /* Border radii — capped at 8px per W9 */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;

  /* Density — Palantir-Foundry-informed */
  --row-height:      30px;
  --row-height-tall: 38px;
  --col-padding:     16px;
  --gutter:          32px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-max:  300ms;

  /* Grain — 1% noise overlay handled via .grain helper */
  --grain-opacity: 0.04;
}

/* ---------- SEMANTIC ROLES (use these in components) ---------- */

.wordmark {
  font-family: var(--font-display);
  font-size: var(--type-wordmark-size);
  letter-spacing: var(--type-wordmark-tracking);
  text-transform: uppercase;
  color: var(--text-primary);
  line-height: 1;
}

.endorser {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

.section-label {
  font-family: var(--font-display);
  font-size: var(--type-display-size);
  letter-spacing: var(--type-display-tracking);
  text-transform: uppercase;
  color: var(--text-primary);
  line-height: 1;
}

.col-header {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: 400;
}

.label-meta {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--type-meta-size);
  letter-spacing: var(--type-meta-tracking);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.data-primary  { font-family: var(--font-body); font-weight: 500; font-size: var(--type-body-size); color: var(--text-primary); }
.data-secondary{ font-family: var(--font-body); font-weight: 200; font-size: var(--type-body-size); color: var(--text-secondary); }
.data-tertiary { font-family: var(--font-body); font-weight: 200; font-size: var(--type-meta-size); color: var(--text-tertiary); }

.mono-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  letter-spacing: 0;
}

.script-flourish {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 56px;
  color: var(--text-primary);
  line-height: 0.9;
}

/* ---------- BASE ---------- */

html, body {
  background: var(--base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent); color: var(--text-primary); }

/* Grain helper — apply to any container that should carry the 1% film noise */
.grain {
  position: relative;
}
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}