/* ============================================================
   STATIONFALL — Design System Tokens
   Colors + Type (CSS variables and semantic styles)
   ============================================================ */

@font-face {
  font-family: 'Audiowide';
  src: url('./fonts/Audiowide-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fira Code';
  src: url('./fonts/FiraCode-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Base / Surfaces ---------- */
  --sf-bg-a: #01030a;               /* near-black, deep blue */
  --sf-bg-b: #050a14;               /* slightly lighter */
  --sf-panel-bg: rgba(3, 6, 14, 0.92);
  --sf-panel-bg-solid: #03060e;
  --sf-panel-border: rgba(0, 240, 255, 0.10);
  --sf-panel-border-hover: rgba(0, 240, 255, 0.30);
  --sf-panel-divider: rgba(0, 240, 255, 0.06);

  /* ---------- Text ---------- */
  --sf-fg-1: #c8daf0;               /* main text, pale cool blue-grey */
  --sf-fg-2: #5a7a9e;               /* dim text */
  --sf-fg-3: rgba(200, 218, 240, 0.4); /* tertiary (captions, italic notes) */
  --sf-fg-inverse: #01030a;

  /* ---------- Accents (semantic) ---------- */
  --sf-accent: #00f0ff;             /* primary — cyan */
  --sf-accent-dim: rgba(0, 240, 255, 0.25);
  --sf-accent-soft: rgba(0, 240, 255, 0.06);
  --sf-amber: #f0a030;              /* alerts / hot / Arbiter notes */
  --sf-red: #ff3040;                /* hostile / destructive */
  --sf-red-soft: #ff6070;
  --sf-green: #40e870;              /* friendly / allied */
  --sf-green-soft: #80ed99;

  /* ---------- Faction Palette (10) ---------- */
  --sf-faction-1: #ffb703;  /* amber gold */
  --sf-faction-2: #00b4d8;  /* cyan teal */
  --sf-faction-3: #8338ec;  /* violet */
  --sf-faction-4: #2dc653;  /* emerald */
  --sf-faction-5: #ef476f;  /* rose */
  --sf-faction-6: #fb5607;  /* orange */
  --sf-faction-7: #3a86ff;  /* cobalt */
  --sf-faction-8: #ff006e;  /* magenta */
  --sf-faction-9: #06d6a0;  /* mint */
  --sf-faction-10: #e9c46a; /* sand */

  /* ---------- Glows & effects ---------- */
  --sf-glow-primary: 0 0 6px rgba(0, 240, 255, 0.3);
  --sf-glow-intense: 0 0 12px rgba(0, 240, 255, 0.6);
  --sf-glow-amber: 0 0 8px rgba(240, 160, 48, 0.25);
  --sf-glow-red: 0 0 8px rgba(255, 48, 64, 0.25);
  --sf-glow-green: 0 0 8px rgba(64, 232, 112, 0.25);
  --sf-scanline: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 2px,
    rgba(0, 240, 255, 0.015) 2px,
    rgba(0, 240, 255, 0.015) 4px
  );
  --sf-body-gradient: linear-gradient(180deg, #050a14, #01030a);

  /* ---------- Type families ---------- */
  --sf-font-hud: 'Fira Code', 'SF Mono', 'Cascadia Code', 'JetBrains Mono', ui-monospace, monospace;
  --sf-font-body: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --sf-font-display: 'Audiowide', 'Fira Code', monospace;

  /* ---------- Type scale (HUD dense — built for 14px base) ---------- */
  --sf-fs-xxs: 0.50rem;   /* 7px  — tiny labels (section caps) */
  --sf-fs-xs:  0.58rem;   /* 8px  — meta, timestamps */
  --sf-fs-sm:  0.66rem;   /* 9px  — button labels, captions */
  --sf-fs-md:  0.72rem;   /* 10px — control inputs */
  --sf-fs-lg:  0.88rem;   /* 12px — body text (lore) */
  --sf-fs-xl:  1.10rem;   /* 15px — section headers */
  --sf-fs-2xl: 1.40rem;   /* 20px — epitaph names */
  --sf-fs-3xl: 2.40rem;   /* 34px — lore title */

  /* ---------- Tracking / weights ---------- */
  --sf-track-tight: 0.04em;
  --sf-track-normal: 0.08em;
  --sf-track-wide: 0.15em;
  --sf-track-xwide: 0.30em;
  --sf-track-display: 0.50em;

  /* ---------- Spacing ---------- */
  --sf-space-0: 0;
  --sf-space-1: 2px;
  --sf-space-2: 4px;
  --sf-space-3: 6px;
  --sf-space-4: 8px;
  --sf-space-5: 10px;
  --sf-space-6: 12px;
  --sf-space-7: 14px;
  --sf-space-8: 16px;
  --sf-space-10: 20px;
  --sf-space-12: 24px;
  --sf-space-16: 32px;
  --sf-space-20: 40px;

  /* ---------- Radii (deliberately minimal — hard edges) ---------- */
  --sf-radius-0: 0;
  --sf-radius-1: 2px;   /* default — almost-sharp */
  --sf-radius-2: 3px;   /* dialogs */
  --sf-radius-round: 50%;

  /* ---------- Motion ---------- */
  --sf-ease-snap: cubic-bezier(0.2, 0.8, 0.2, 1);
  --sf-ease-out: ease-out;
  --sf-dur-tick: 0.15s;   /* interactive feedback */
  --sf-dur-short: 0.25s;  /* panel open / hover */
  --sf-dur-slide: 0.6s;   /* boot line appear */
  --sf-dur-breathe: 2s;   /* pulse-glow, blink */
  --sf-dur-scan: 3s;      /* scanline travel */

  /* ---------- Z layers ---------- */
  --sf-z-canvas: 0;
  --sf-z-3d-overlay: 5;
  --sf-z-hud: 10;
  --sf-z-panel: 20;
  --sf-z-modal: 60;
  --sf-z-lore: 100;
  --sf-z-scanline: 999;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES (drop-in)
   ============================================================ */

.sf-body, body.sf {
  margin: 0;
  font-family: var(--sf-font-hud);
  font-size: 14px;
  color: var(--sf-fg-1);
  background: var(--sf-body-gradient);
  -webkit-font-smoothing: antialiased;
}

/* Display — used for wordmark, lore title */
.sf-h1, h1.sf {
  font-family: var(--sf-font-display);
  font-size: var(--sf-fs-3xl);
  font-weight: 400;
  letter-spacing: var(--sf-track-normal);
  text-transform: uppercase;
  color: var(--sf-accent);
  text-shadow: 0 0 24px rgba(0, 240, 255, 0.25), 0 0 80px rgba(0, 240, 255, 0.06);
  margin: 0;
}

/* Section / epitaph name */
.sf-h2, h2.sf {
  font-family: var(--sf-font-hud);
  font-size: var(--sf-fs-2xl);
  font-weight: 300;
  letter-spacing: var(--sf-track-xwide);
  text-transform: uppercase;
  color: var(--sf-fg-1);
  margin: 0;
}

/* Panel title */
.sf-h3, h3.sf {
  font-family: var(--sf-font-hud);
  font-size: var(--sf-fs-xl);
  font-weight: 400;
  letter-spacing: var(--sf-track-wide);
  text-transform: uppercase;
  color: var(--sf-accent);
  text-shadow: 0 0 20px rgba(0, 240, 255, 0.4);
  margin: 0;
}

/* Section label — small-caps accent */
.sf-eyebrow {
  font-family: var(--sf-font-hud);
  font-size: var(--sf-fs-xs);
  letter-spacing: var(--sf-track-wide);
  text-transform: uppercase;
  color: rgba(0, 240, 255, 0.45);
}

/* Body / lore paragraph */
.sf-p, p.sf {
  font-family: var(--sf-font-body);
  font-size: var(--sf-fs-lg);
  line-height: 1.85;
  color: rgba(200, 218, 240, 0.68);
  margin: 0 0 14px;
}

.sf-p strong { color: rgba(200, 218, 240, 0.92); font-weight: 600; }

/* Code / inline telemetry */
.sf-code, code.sf {
  font-family: var(--sf-font-hud);
  font-size: var(--sf-fs-md);
  color: var(--sf-accent);
  background: rgba(0, 240, 255, 0.04);
  padding: 1px 4px;
  border-radius: var(--sf-radius-1);
}

/* Log / terminal line */
.sf-log-line {
  font-family: var(--sf-font-hud);
  font-size: var(--sf-fs-sm);
  line-height: 1.6;
  color: rgba(180, 220, 200, 0.65);
}
.sf-log-line .sf-timestamp {
  color: rgba(0, 240, 255, 0.2);
  margin-right: 6px;
  font-size: var(--sf-fs-xs);
}

/* Dim / meta */
.sf-meta {
  font-family: var(--sf-font-hud);
  font-size: var(--sf-fs-xs);
  color: var(--sf-fg-2);
  letter-spacing: var(--sf-track-tight);
}

/* Utility classes */
.sf-mono { font-family: var(--sf-font-hud); }
.sf-display { font-family: var(--sf-font-display); }
.sf-accent { color: var(--sf-accent); }
.sf-amber  { color: var(--sf-amber); }
.sf-red    { color: var(--sf-red-soft); }
.sf-green  { color: var(--sf-green-soft); }
.sf-dim    { color: var(--sf-fg-2); }

/* ============================================================
   KEYFRAMES (brand motion vocabulary)
   ============================================================ */

@keyframes sf-pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
@keyframes sf-glow-pulse {
  0%, 100% { box-shadow: 0 0 4px rgba(0, 240, 255, 0.3); }
  50% { box-shadow: 0 0 12px rgba(0, 240, 255, 0.6); }
}
@keyframes sf-scan-line {
  from { top: -2px; }
  to   { top: 100%; }
}
@keyframes sf-boot-line-appear {
  from { opacity: 0; transform: translateX(-5px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes sf-corner-flicker {
  0%, 92%, 100% { opacity: 0.6; }
  94% { opacity: 0.2; }
  96% { opacity: 0.8; }
}
@keyframes sf-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }