/* =============================================================
   Operator Console v2 — design tokens
   Aesthetic: "Pressed"  (Linear × Stripe × Teenage Engineering × Bloomberg)
   ============================================================= */

/* ---- fonts ---- */
@font-face {
  font-family: "Switzer";
  src: url("/static/fonts/Switzer-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("/static/fonts/Switzer-VariableItalic.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Monaspace Neon";
  src: url("/static/fonts/MonaspaceNeon.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---- tokens ---- */
:root {
  /* canvas — zero-blue-tint near-black */
  --bg-canvas:       #0c0d0e;
  --bg-elevated:     #141618;
  --bg-hover:        #1a1d20;

  --hairline:        #24272b;
  --hairline-strong: #34383d;
  --inner-highlight: rgba(255, 255, 255, 0.04);

  /* luminance ladder — no color in the text scale */
  --text-hero:       #ffffff;
  --text-primary:    #e8eaed;
  --text-secondary:  #a8adb5;
  --text-muted:      #6c7079;
  --text-ghost:      #4a4e55;

  /* the three signal colors — each has ONE semantic */
  --signal-live:     #00e1a3;  /* live / profit / OK */
  --signal-alert:    #fb7185;  /* stale / loss / breach */
  --signal-pending:  #818cf8;  /* market-closed / info */

  /* spacing — 8px baseline */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;

  /* radii — almost none */
  --radius-sm: 2px;
  --radius-md: 4px;

  /* type scale — upped +1-2px across the board for operator-terminal readability
     (Bloomberg-density still, but no more eye-strain) */
  --type-meta:      11px;
  --type-label:     13px;
  --type-body:      15px;
  --type-table:     15px;
  --type-panel-h:   20px;
  --type-metric:    26px;
  --type-pulse:     48px;
  --type-hero:      76px;

  /* line-heights tuned to baseline */
  --lh-body: 1.5;
  --lh-tight: 1.15;
  --lh-hero: 1.0;

  /* families */
  --font-ui:   "Switzer", system-ui, -apple-system, "SF Pro Text", sans-serif;
  --font-mono: "Monaspace Neon", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* timings */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-bloom: 200ms;
  --dur-heart: 1.5s;
}

/* film grain — inline SVG turbulence, fixed position, pointer-events none */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
  opacity: 0.02;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'>\
<filter id='n'>\
<feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/>\
<feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.95  0 0 0 0 0.95  0 0 0 1 0'/>\
</filter>\
<rect width='100%' height='100%' filter='url(%23n)'/>\
</svg>");
}

/* edge vignette — radial gradient 0% center → 4% darker at corners */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  background: radial-gradient(ellipse at center,
    transparent 40%,
    rgba(0, 0, 0, 0.04) 70%,
    rgba(0, 0, 0, 0.12) 100%);
}