/*
 * OIN DESIGN TOKENS — War Room Cartography
 *
 * Aesthetic: Cold-War Signals Intelligence meets Nautical Cartography
 * A declassified situation room rendered in CSS.
 *
 * Signature elements:
 *   - Topographic contour overlays on every surface
 *   - Radar-sweep loading animation
 *   - Plotting-board grid background
 *   - Phosphor-teal accent on deep navy-black
 *   - Stencil typography for military authority
 */

/* ============================================================
   FONTS

   Instrument Sans — UI labels, navigation, body text
     Geometric, clean, slightly condensed. Military brevity.

   IBM Plex Mono — Data values, tables, code, metrics
     Designed for data density. Tabular-lining figures align columns.

   Departure Mono — Section headers, zone titles, callsigns
     Stencil-cut, cargo-crate aesthetic. Unmistakable authority.
   ============================================================ */
/* SELF-HOSTED FONTS — no Google Fonts CDN leak (anonymous-only mode 2026-05-06).
   All woff2 in /dashboard/assets/fonts/. font-display:swap prevents FOIT. */

@font-face {
  font-family: 'Departure Mono';
  src: url('/dashboard/assets/fonts/departure-mono.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument Sans';
  src: url('/dashboard/assets/fonts/instrument-sans-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('/dashboard/assets/fonts/instrument-sans-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('/dashboard/assets/fonts/instrument-sans-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('/dashboard/assets/fonts/instrument-sans-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/dashboard/assets/fonts/ibm-plex-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/dashboard/assets/fonts/ibm-plex-mono-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/dashboard/assets/fonts/ibm-plex-mono-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Fraunces — editorial serif · variable axes used for display moments
   added 2026-05-17 · elevated aesthetic pass · "intelligence quarterly" direction
   Provides gravitas tension against the dominant mono stack */
@font-face {
  font-family: 'Fraunces';
  src: url('/dashboard/assets/fonts/fraunces-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('/dashboard/assets/fonts/fraunces-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('/dashboard/assets/fonts/fraunces-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/dashboard/assets/fonts/ibm-plex-sans-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/dashboard/assets/fonts/ibm-plex-sans-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/dashboard/assets/fonts/ibm-plex-sans-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-display:    'Departure Mono', monospace;
  --font-ui:         'Instrument Sans', sans-serif;
  --font-data:       'IBM Plex Mono', monospace;
  --font-editorial:  'Fraunces', 'Iowan Old Style', Georgia, serif;

  /* Type Scale — compact for data density */
  --text-2xs:   9px;
  --text-xs:    10px;
  --text-sm:    11px;
  --text-base:  12px;
  --text-md:    13px;
  --text-lg:    14px;
  --text-xl:    16px;
  --text-2xl:   20px;
  --text-3xl:   24px;
  --text-4xl:   32px;
  --text-hero:  40px;

  /* Line Heights */
  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  /* Font Weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Letter Spacing */
  --tracking-tight:    -0.02em;
  --tracking-normal:    0;
  --tracking-wide:      0.04em;
  --tracking-wider:     0.08em;
  --tracking-widest:    0.14em;
  --tracking-stencil:   0.2em;   /* For Departure Mono headers */

  /* ============================================================
     COLOR — Deep Navy-Black + Phosphor Teal

     Background layers progress from void → base → surface → elevated
     like depth layers on a bathymetric chart.
     ============================================================ */

  /* --- Depth Layers (darkest to lightest) --- */
  --void:       #020509;     /* The abyss — page background */
  --base:       #060b14;     /* Primary surface — sidebar, main */
  --surface:    #0b1221;     /* Cards, panels, table rows */
  --elevated:   #101a30;     /* Hover states, active panels */
  --raised:     #162240;     /* Popovers, dropdown menus */
  --peak:       #1c2d52;     /* Highest elevation — modal headers */

  /* --- Borders (from subtle to pronounced) --- */
  --border-ghost:   rgba(0, 212, 170, 0.04);  /* Barely there */
  --border-subtle:  rgba(0, 212, 170, 0.08);  /* Card edges */
  --border-default: rgba(0, 212, 170, 0.14);  /* Standard */
  --border-strong:  rgba(0, 212, 170, 0.22);  /* Emphasis */
  --border-focus:   rgba(0, 212, 170, 0.50);  /* Focus rings */

  /* --- Text Hierarchy --- */
  --text-primary:   #d8e4ec;   /* Primary readability */
  --text-secondary: #7e95a9;   /* Labels, descriptions */
  --text-tertiary:  #6a8195;   /* Timestamps, metadata */
  --text-ghost:     #4a6178;   /* Disabled, decorative */
  --text-inverse:   #020509;   /* On accent backgrounds */

  /* --- Accent: Phosphor Teal --- */
  --accent:         #00d4aa;   /* Primary interactive — phosphor teal */
  --accent-bright:  #00f5c4;   /* Hover, emphasis */
  --accent-dim:     rgba(0, 212, 170, 0.12);  /* Subtle backgrounds */
  --accent-wash:    rgba(0, 212, 170, 0.06);  /* Barely-there tint */
  /* Brass — second voice for editorial moments + premium tier callouts.
     Use sparingly: drop caps, pull quotes, premium CTA edges, key numbers. */
  --accent-brass:        #d49a48;
  --accent-brass-bright: #e8b35a;
  --accent-brass-dim:    rgba(212, 154, 72, 0.14);
  --accent-brass-wash:   rgba(212, 154, 72, 0.06);
  --accent-glow:    0 0 20px rgba(0, 212, 170, 0.25),
                    0 0 60px rgba(0, 212, 170, 0.08);

  /* --- Semantic: Colorblind-Safe Pairs (Blue / Orange) --- */
  --positive:       #3b9eff;   /* Wins, gains, healthy, confirmed */
  --positive-dim:   rgba(59, 158, 255, 0.12);
  --positive-text:  #6cb4ff;   /* Readable on dark */

  --negative:       #ff6b35;   /* Losses, errors, critical alerts */
  --negative-dim:   rgba(255, 107, 53, 0.12);
  --negative-text:  #ff8c5a;   /* Readable on dark */

  /* --- Signal Tiers --- */
  --tier-t1:        #ff4757;   /* Revenue-critical — demands attention */
  --tier-t1-dim:    rgba(255, 71, 87, 0.12);
  --tier-t1-glow:   0 0 12px rgba(255, 71, 87, 0.3);

  --tier-t2:        #ffa502;   /* Intelligence value — important */
  --tier-t2-dim:    rgba(255, 165, 2, 0.12);
  --tier-t2-glow:   0 0 12px rgba(255, 165, 2, 0.2);

  --tier-t3:        #4a6178;   /* Background — low priority */
  --tier-t3-dim:    rgba(74, 97, 120, 0.08);

  /* --- Risk Tiers --- */
  --risk-critical:  #ff2d2d;   /* Immediate threat */
  --risk-high:      #ff6b35;   /* Significant concern */
  --risk-elevated:  #ffb320;   /* Watch closely */
  --risk-moderate:  #3b9eff;   /* Monitoring */
  --risk-low:       #00d4aa;   /* Stable */

  /* --- Data Visualization Palette (12 distinct, colorblind-aware) --- */
  --chart-1:  #00d4aa;   /* Teal */
  --chart-2:  #3b9eff;   /* Blue */
  --chart-3:  #ff6b35;   /* Orange */
  --chart-4:  #a855f7;   /* Purple */
  --chart-5:  #ffb320;   /* Amber */
  --chart-6:  #ec4899;   /* Pink */
  --chart-7:  #06b6d4;   /* Cyan */
  --chart-8:  #84cc16;   /* Lime */
  --chart-9:  #f97316;   /* Deep Orange */
  --chart-10: #8b5cf6;   /* Violet */
  --chart-11: #14b8a6;   /* Teal-green */
  --chart-12: #f43f5e;   /* Rose */

  /* --- Direction Colors --- */
  --direction-no:   #3b9eff;   /* NO position — blue */
  --direction-yes:  #ff6b35;   /* YES position — orange */

  /* --- Wallet Tiers --- */
  --wallet-s: #ffd700;   /* Gold */
  --wallet-a: #c0c0c0;   /* Silver */
  --wallet-b: #cd7f32;   /* Bronze */
  --wallet-c: #4a6178;   /* Steel */
  --wallet-d: #2c3f54;   /* Iron */

  /* ============================================================
     SPACING — 4px Base Unit
     ============================================================ */
  --sp-0:   0;
  --sp-px:  1px;
  --sp-0\.5: 2px;
  --sp-1:   4px;
  --sp-1\.5: 6px;
  --sp-2:   8px;
  --sp-2\.5: 10px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;

  /* ============================================================
     RADII
     ============================================================ */
  --radius-none: 0;
  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-2xl:  20px;
  --radius-full: 9999px;

  /* ============================================================
     SHADOWS — Sharp militaristic cuts + phosphor glow
     ============================================================ */
  --shadow-inset:  inset 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm:     0 1px 3px rgba(0, 0, 0, 0.5),
                   0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md:     0 4px 12px rgba(0, 0, 0, 0.5),
                   0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-lg:     0 8px 28px rgba(0, 0, 0, 0.55),
                   0 4px 10px rgba(0, 0, 0, 0.4);
  --shadow-xl:     0 16px 48px rgba(0, 0, 0, 0.6),
                   0 8px 16px rgba(0, 0, 0, 0.4);

  /* Glow variants — for active/focus states */
  --glow-accent:   0 0 16px rgba(0, 212, 170, 0.20),
                   0 0 40px rgba(0, 212, 170, 0.06);
  --glow-danger:   0 0 16px rgba(255, 71, 87, 0.20),
                   0 0 40px rgba(255, 71, 87, 0.06);
  --glow-positive: 0 0 16px rgba(59, 158, 255, 0.20),
                   0 0 40px rgba(59, 158, 255, 0.06);

  /* ============================================================
     TRANSITIONS & EASING
     ============================================================ */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-snap:     cubic-bezier(0.5, 0, 0, 1);
  --ease-bounce:   cubic-bezier(0.34, 1.8, 0.64, 1);

  --duration-instant: 80ms;
  --duration-fast:    150ms;
  --duration-normal:  250ms;
  --duration-slow:    400ms;
  --duration-glacial:  700ms;

  --transition-fast:    var(--duration-fast) var(--ease-out);
  --transition-normal:  var(--duration-normal) var(--ease-out);
  --transition-slow:    var(--duration-slow) var(--ease-out);
  --transition-spring:  var(--duration-normal) var(--ease-spring);
  --transition-snap:    var(--duration-fast) var(--ease-snap);

  /* ============================================================
     Z-INDEX LAYERS
     ============================================================ */
  --z-buried:   -1;
  --z-base:      0;
  --z-surface:   1;
  --z-sidebar:  10;
  --z-header:   20;
  --z-dropdown: 25;
  --z-drawer:   30;
  --z-overlay:  35;
  --z-modal:    40;
  --z-toast:    50;
  --z-command:  60;   /* Command palette — above everything */

  /* ============================================================
     GLASS MORPHISM — Frosted intelligence panels
     ============================================================ */
  --glass-bg:         rgba(6, 11, 20, 0.82);
  --glass-bg-heavy:   rgba(6, 11, 20, 0.92);
  --glass-bg-light:   rgba(6, 11, 20, 0.65);
  --glass-border:     rgba(0, 212, 170, 0.08);
  --glass-blur:       blur(16px);
  --glass-blur-heavy: blur(24px);

  /* ============================================================
     LAYOUT DIMENSIONS
     ============================================================ */
  --header-height:     48px;
  --sidebar-width:     56px;   /* Collapsed: icons only */
  --sidebar-expanded:  220px;  /* Expanded: icons + labels */
  --context-strip-h:   72px;   /* Bottom focus+context strip */
  --drawer-width:      420px;  /* Detail slide-out panel */

  /* ============================================================
     TOPOGRAPHIC TEXTURES — The Signature Element

     Every surface carries the ghost of terrain contour lines,
     as if the interface is printed on a classified map.
     ============================================================ */

  /* Grid: 40px plotting-board lines */
  --texture-grid:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 39px,
      rgba(0, 212, 170, 0.025) 39px,
      rgba(0, 212, 170, 0.025) 40px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 39px,
      rgba(0, 212, 170, 0.025) 39px,
      rgba(0, 212, 170, 0.025) 40px
    );

  /* Contour: radial rings emanating from card center */
  --texture-contour:
    repeating-radial-gradient(
      ellipse at 30% 50%,
      transparent 0px,
      transparent 24px,
      rgba(0, 212, 170, 0.018) 24px,
      rgba(0, 212, 170, 0.018) 25px,
      transparent 25px,
      transparent 49px,
      rgba(0, 212, 170, 0.012) 49px,
      rgba(0, 212, 170, 0.012) 50px
    );

  /* Noise: SVG turbulence for atmospheric grain */
  --texture-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");

  /* Scanline: horizontal CRT-style lines */
  --texture-scanline:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.06) 2px,
      rgba(0, 0, 0, 0.06) 4px
    );

  /* Composed backgrounds for different contexts */
  --bg-void:     var(--void);
  --bg-page:     var(--texture-grid), var(--texture-noise), var(--void);
  --bg-card:     var(--texture-contour), var(--surface);
  --bg-header:   var(--glass-bg-heavy);
  --bg-sidebar:  var(--base);

  /* ============================================================
     COMPONENT-LEVEL TOKENS
     ============================================================ */

  /* Stat Cards */
  --card-padding:    var(--sp-4);
  --card-gap:        var(--sp-3);
  --card-radius:     var(--radius-lg);

  /* Tables */
  --table-header-bg:    var(--elevated);
  --table-row-hover:    var(--elevated);
  --table-row-selected: rgba(0, 212, 170, 0.06);
  --table-cell-padding: var(--sp-2) var(--sp-3);
  --table-border:       var(--border-ghost);

  /* Badges */
  --badge-padding:  var(--sp-1) var(--sp-2);
  --badge-radius:   var(--radius-sm);
  --badge-font:     var(--text-2xs);
  --badge-weight:   var(--weight-semibold);
  --badge-tracking: var(--tracking-wider);

  /* Buttons */
  --btn-height-sm:  28px;
  --btn-height-md:  34px;
  --btn-height-lg:  40px;
  --btn-padding-sm: var(--sp-1) var(--sp-3);
  --btn-padding-md: var(--sp-2) var(--sp-4);
  --btn-padding-lg: var(--sp-3) var(--sp-6);

  /* Sparklines */
  --sparkline-height:     24px;
  --sparkline-width:      80px;
  --sparkline-stroke:     1.5px;
  --sparkline-color:      var(--accent);
  --sparkline-fill:       rgba(0, 212, 170, 0.08);

  /* Toast Notifications */
  --toast-max-width: 380px;
  --toast-padding:   var(--sp-3) var(--sp-4);
  --toast-radius:    var(--radius-md);
  --toast-shadow:    var(--shadow-lg), var(--glow-accent);

  /* Scrollbar */
  --scrollbar-width:  6px;
  --scrollbar-track:  transparent;
  --scrollbar-thumb:  rgba(0, 212, 170, 0.15);
  --scrollbar-hover:  rgba(0, 212, 170, 0.30);
}

/* ============================================================
   ANIMATIONS — Keyframes used across the system
   ============================================================ */

/* Radar sweep — loading indicator */
@keyframes radar-sweep {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Pulse — live indicator dot */
@keyframes pulse-live {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.85); }
}

/* Fade in — view entry */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Fade out — view exit */
@keyframes fade-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-4px); }
}

/* Slide in from right — drawer entry */
@keyframes slide-in-right {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* Slide out to right — drawer exit */
@keyframes slide-out-right {
  from { transform: translateX(0); opacity: 1; }
  to   { transform: translateX(100%); opacity: 0; }
}

/* Scale in — modal/command palette entry */
@keyframes scale-in {
  from { transform: scale(0.95); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* Glow pulse — for critical alerts */
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(255, 71, 87, 0.2); }
  50%      { box-shadow: 0 0 24px rgba(255, 71, 87, 0.4),
                          0 0 48px rgba(255, 71, 87, 0.1); }
}

/* Stagger reveal — for card grids */
@keyframes stagger-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Scanline flicker — for dramatic status changes */
@keyframes scanline-flicker {
  0%, 95%, 100% { opacity: 1; }
  96%           { opacity: 0.8; }
  97%           { opacity: 1; }
  98%           { opacity: 0.85; }
}

/* Toast slide in */
@keyframes toast-in {
  from { transform: translateX(120%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* Toast slide out */
@keyframes toast-out {
  from { transform: translateX(0); opacity: 1; }
  to   { transform: translateX(120%); opacity: 0; }
}

/* Value counter tick — number change */
@keyframes value-tick {
  0%   { transform: translateY(0); }
  25%  { transform: translateY(-2px); }
  50%  { transform: translateY(0); }
}

/* ============================================================
   VIEW TRANSITIONS API — Morphing between views
   ============================================================ */
::view-transition-old(main-content) {
  animation: fade-out var(--duration-fast) var(--ease-out);
}
::view-transition-new(main-content) {
  animation: fade-in var(--duration-normal) var(--ease-out);
}

/* Shared elements persist across view transitions */
::view-transition-old(stat-persistent),
::view-transition-new(stat-persistent) {
  animation-duration: var(--duration-normal);
}

/* ============================================================
   MEDIA QUERIES — Reduced Motion + High Contrast
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast:    0ms;
    --duration-normal:  0ms;
    --duration-slow:    0ms;
    --duration-glacial: 0ms;
  }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  :root {
    --accent: LinkText;
    --positive: LinkText;
    --negative: Mark;
    --border-default: ButtonBorder;
    --text-primary: CanvasText;
    --surface: Canvas;
  }

  /* Ensure badges use system colors */
  .badge { border: 2px solid ButtonBorder; }
  .sparkline, .chart-canvas { forced-color-adjust: none; }
}