/* ═══════════════════════════════════════════════════════════════════
   ShadowFlow · Dark Theme · Design Tokens v1
   Drop into your public/ folder and reference from index.html:
     <link rel="stylesheet" href="/shadowflow-dark-tokens.css" />
   Or @import from styles.css:
     @import url("./shadowflow-dark-tokens.css");
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@300;400;500;600;700&display=swap');

/* ─── Design tokens ──────────────────────────────────────────────── */
:root {
  /* Canvas */
  --sf-night:    #05070E;
  --sf-abyss:    #080B16;
  --sf-panel:    #0D1120;
  --sf-surface:  #121730;
  --sf-surface-2:#171D3A;

  /* Borders */
  --sf-border:   #1F2747;
  --sf-border-2: #2A335B;
  --sf-border-3: #3B4579;

  /* Text */
  --sf-fog:      #E8EDF7;  /* primary */
  --sf-mist:     #9AA5C4;  /* secondary */
  --sf-dust:     #6A7496;  /* tertiary / labels */
  --sf-haze:     #4A5378;  /* quaternary / disabled */

  /* Accents — use purposefully */
  --sf-cyan:     #00E5FF;  /* primary · live · active */
  --sf-lime:     #6EFF9E;  /* up · win · confirm */
  --sf-magenta:  #FF3E9E;  /* trigger · alert · primary CTA alt */
  --sf-amber:    #FFB020;  /* warn · arm · caution */
  --sf-violet:   #8B7DFF;  /* vwap · analytics · meta */
  --sf-red:      #FF4757;  /* error · stop · hard no */

  /* Semantic */
  --sf-up:       #5BFFB0;
  --sf-down:     #FF5C7A;

  /* Accent translucent fills (for chip / surface tints) */
  --sf-cyan-10:   rgba(0, 229, 255, 0.08);
  --sf-cyan-20:   rgba(0, 229, 255, 0.15);
  --sf-cyan-40:   rgba(0, 229, 255, 0.40);
  --sf-cyan-55:   rgba(0, 229, 255, 0.55);
  --sf-lime-10:   rgba(110, 255, 158, 0.08);
  --sf-lime-20:   rgba(110, 255, 158, 0.15);
  --sf-lime-40:   rgba(110, 255, 158, 0.40);
  --sf-magenta-10:rgba(255, 62, 158, 0.08);
  --sf-magenta-20:rgba(255, 62, 158, 0.15);
  --sf-magenta-40:rgba(255, 62, 158, 0.40);
  --sf-amber-10:  rgba(255, 176, 32, 0.08);
  --sf-amber-20:  rgba(255, 176, 32, 0.15);
  --sf-amber-40:  rgba(255, 176, 32, 0.40);

  /* Type */
  --sf-font-display: 'Space Grotesk', system-ui, sans-serif;
  --sf-font-sans:    'Space Grotesk', system-ui, sans-serif;
  --sf-font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Type scale (px, paired with line-heights) */
  --sf-fs-micro:   10px;   --sf-lh-micro:   14px;
  --sf-fs-caption: 11.5px; --sf-lh-caption: 16px;
  --sf-fs-small:   13px;   --sf-lh-small:   20px;
  --sf-fs-body:    14px;   --sf-lh-body:    22px;
  --sf-fs-large:   16px;   --sf-lh-large:   24px;
  --sf-fs-h4:      20px;   --sf-lh-h4:      28px;
  --sf-fs-h3:      28px;   --sf-lh-h3:      34px;
  --sf-fs-h2:      40px;   --sf-lh-h2:      44px;
  --sf-fs-h1:      56px;   --sf-lh-h1:      60px;

  /* Spacing (4px base) */
  --sf-s-1:  4px;   --sf-s-2:  8px;   --sf-s-3:  12px;
  --sf-s-4:  16px;  --sf-s-5:  20px;  --sf-s-6:  24px;
  --sf-s-8:  32px;  --sf-s-10: 40px;  --sf-s-12: 48px;
  --sf-s-16: 64px;  --sf-s-20: 80px;

  /* Radius */
  --sf-r-xs: 4px;
  --sf-r-sm: 6px;
  --sf-r-md: 8px;
  --sf-r-lg: 12px;
  --sf-r-xl: 16px;
  --sf-r-full: 9999px;

  /* Elevation */
  --sf-shadow-panel: 0 1px 0 rgba(255,255,255,0.04) inset, 0 24px 60px -30px rgba(0, 229, 255, 0.10);
  --sf-shadow-btn-primary: 0 1px 0 rgba(255,255,255,0.25) inset, 0 8px 24px -8px rgba(0, 229, 255, 0.40);
  --sf-shadow-btn-magenta: 0 1px 0 rgba(255,255,255,0.25) inset, 0 8px 24px -8px rgba(255, 62, 158, 0.40);
  --sf-ring-cyan:    0 0 0 1px rgba(0, 229, 255, 0.40), 0 0 32px -8px rgba(0, 229, 255, 0.40);
  --sf-ring-magenta: 0 0 0 1px rgba(255, 62, 158, 0.40), 0 0 28px -8px rgba(255, 62, 158, 0.33);
  --sf-ring-lime:    0 0 0 1px rgba(110, 255, 158, 0.40), 0 0 28px -8px rgba(110, 255, 158, 0.33);
  --sf-ring-amber:   0 0 0 1px rgba(255, 176, 32, 0.40), 0 0 28px -8px rgba(255, 176, 32, 0.33);

  /* Motion */
  --sf-t-fast: 120ms;
  --sf-t-base: 200ms;
  --sf-t-slow: 320ms;
  --sf-ease:   cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Z-index */
  --sf-z-base:    1;
  --sf-z-sticky: 10;
  --sf-z-modal: 100;
  --sf-z-toast: 200;
}

/* ─── Base canvas ────────────────────────────────────────────────── */
html, body {
  background: var(--sf-night);
  color: var(--sf-fog);
}
body {
  font-family: var(--sf-font-sans);
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(900px 500px at 15% -10%, rgba(0, 229, 255, 0.09) 0%, transparent 60%),
    radial-gradient(800px 600px at 95% 5%,  rgba(255, 62, 158, 0.08) 0%, transparent 55%),
    radial-gradient(700px 500px at 80% 110%, rgba(110, 255, 158, 0.07) 0%, transparent 60%),
    var(--sf-night);
  min-height: 100vh;
}

/* ─── Type utilities ─────────────────────────────────────────────── */
.sf-font-display { font-family: var(--sf-font-display); }
.sf-font-sans    { font-family: var(--sf-font-sans); }
.sf-font-mono    { font-family: var(--sf-font-mono); letter-spacing: 0; }
.sf-number       { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }

.sf-t-micro   { font-size: var(--sf-fs-micro);   line-height: var(--sf-lh-micro); letter-spacing: 0.06em; }
.sf-t-caption { font-size: var(--sf-fs-caption); line-height: var(--sf-lh-caption); }
.sf-t-small   { font-size: var(--sf-fs-small);   line-height: var(--sf-lh-small); }
.sf-t-body    { font-size: var(--sf-fs-body);    line-height: var(--sf-lh-body); }
.sf-t-large   { font-size: var(--sf-fs-large);   line-height: var(--sf-lh-large); }
.sf-t-h4      { font-size: var(--sf-fs-h4);      line-height: var(--sf-lh-h4);    letter-spacing: -0.01em; }
.sf-t-h3      { font-size: var(--sf-fs-h3);      line-height: var(--sf-lh-h3);    letter-spacing: -0.02em; }
.sf-t-h2      { font-size: var(--sf-fs-h2);      line-height: var(--sf-lh-h2);    letter-spacing: -0.025em; }
.sf-t-h1      { font-size: var(--sf-fs-h1);      line-height: var(--sf-lh-h1);    letter-spacing: -0.03em; }

.sf-kicker {
  font-family: var(--sf-font-mono);
  font-size: var(--sf-fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--sf-dust);
}

.sf-glow-cyan    { text-shadow: 0 0 24px rgba(0, 229, 255, 0.60); }
.sf-glow-lime    { text-shadow: 0 0 20px rgba(110, 255, 158, 0.53); }
.sf-glow-magenta { text-shadow: 0 0 20px rgba(255, 62, 158, 0.53); }

/* ─── Semantic text colors ───────────────────────────────────────── */
.sf-text-fog     { color: var(--sf-fog); }
.sf-text-mist    { color: var(--sf-mist); }
.sf-text-dust    { color: var(--sf-dust); }
.sf-text-cyan    { color: var(--sf-cyan); }
.sf-text-lime    { color: var(--sf-lime); }
.sf-text-magenta { color: var(--sf-magenta); }
.sf-text-amber   { color: var(--sf-amber); }
.sf-text-violet  { color: var(--sf-violet); }
.sf-text-up      { color: var(--sf-up); }
.sf-text-down    { color: var(--sf-down); }

/* ─── Focus ──────────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--sf-cyan);
  outline-offset: 2px;
  border-radius: var(--sf-r-sm);
}

/* ─── Panels ─────────────────────────────────────────────────────── */
.sf-panel {
  background: linear-gradient(180deg, var(--sf-panel) 0%, #0A0E1A 100%);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-r-lg);
  transition: border-color var(--sf-t-base) var(--sf-ease);
}
.sf-panel:hover { border-color: var(--sf-border-2); }
.sf-panel-static:hover { border-color: var(--sf-border); }
.sf-panel-raised { box-shadow: var(--sf-shadow-panel); }

.sf-ring-cyan    { box-shadow: var(--sf-ring-cyan); }
.sf-ring-magenta { box-shadow: var(--sf-ring-magenta); }
.sf-ring-lime    { box-shadow: var(--sf-ring-lime); }
.sf-ring-amber   { box-shadow: var(--sf-ring-amber); }

/* ─── Backdrops ──────────────────────────────────────────────────── */
.sf-grid-bg {
  background-image:
    linear-gradient(rgba(255,255,255,0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.024) 1px, transparent 1px);
  background-size: 44px 44px;
}
.sf-dotgrid {
  background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 16px 16px;
}

/* ─── Chips ──────────────────────────────────────────────────────── */
.sf-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px;
  border-radius: var(--sf-r-sm);
  font-family: var(--sf-font-mono);
  font-size: 11px; font-weight: 500; letter-spacing: 0.02em;
  border: 1px solid var(--sf-border-2);
  background: var(--sf-surface);
  color: var(--sf-mist);
  transition: border-color var(--sf-t-fast) var(--sf-ease);
}
.sf-chip-cyan    { border-color: var(--sf-cyan-55);   color: var(--sf-cyan);    background: var(--sf-cyan-10); }
.sf-chip-lime    { border-color: rgba(110,255,158,.55);color: var(--sf-lime);    background: var(--sf-lime-10); }
.sf-chip-magenta { border-color: rgba(255,62,158,.55); color: var(--sf-magenta); background: var(--sf-magenta-10); }
.sf-chip-amber   { border-color: rgba(255,176,32,.55); color: var(--sf-amber);   background: var(--sf-amber-10); }

/* ─── Buttons ────────────────────────────────────────────────────── */
.sf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--sf-border-2);
  border-radius: var(--sf-r-md);
  padding: 8px 14px;
  font-family: var(--sf-font-sans);
  font-weight: 600; font-size: 13px;
  background: var(--sf-surface);
  color: var(--sf-fog);
  cursor: pointer;
  transition: all var(--sf-t-fast) var(--sf-ease);
}
.sf-btn:hover  { border-color: var(--sf-border-3); background: var(--sf-surface-2); transform: translateY(-1px); }
.sf-btn:active { transform: translateY(0); }
.sf-btn-primary {
  background: linear-gradient(180deg, var(--sf-cyan) 0%, #009FD4 100%);
  color: #03121A; border-color: transparent;
  box-shadow: var(--sf-shadow-btn-primary);
}
.sf-btn-primary:hover { filter: brightness(1.08); }
.sf-btn-magenta {
  background: linear-gradient(180deg, var(--sf-magenta) 0%, #CC1B78 100%);
  color: #1A0512; border-color: transparent;
  box-shadow: var(--sf-shadow-btn-magenta);
}
.sf-btn-ghost {
  background: transparent; border-color: transparent; color: var(--sf-mist);
}
.sf-btn-ghost:hover { background: var(--sf-surface); border-color: var(--sf-border); transform: none; }
.sf-btn-icon { padding: 8px; }

/* ─── Tabs / pills ───────────────────────────────────────────────── */
.sf-tab {
  padding: 5px 12px;
  border-radius: var(--sf-r-md);
  font-family: var(--sf-font-mono);
  font-size: 12px; font-weight: 500;
  color: var(--sf-mist);
  cursor: pointer;
  transition: all var(--sf-t-fast) var(--sf-ease);
}
.sf-tab:hover { color: var(--sf-fog); background: var(--sf-surface); }
.sf-tab.is-active {
  background: var(--sf-surface);
  color: var(--sf-cyan);
  box-shadow: inset 0 0 0 1px rgba(0, 229, 255, 0.27), 0 0 16px -6px rgba(0, 229, 255, 0.33);
}

/* ─── Form fields ────────────────────────────────────────────────── */
.sf-input {
  width: 100%;
  background: var(--sf-surface);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-r-md);
  padding: 8px 12px;
  font-family: var(--sf-font-mono);
  font-size: 13px;
  color: var(--sf-fog);
  transition: border-color var(--sf-t-fast) var(--sf-ease);
}
.sf-input::placeholder { color: var(--sf-dust); }
.sf-input:focus { border-color: var(--sf-cyan); outline: none; box-shadow: 0 0 0 1px var(--sf-cyan-55), 0 0 20px -4px var(--sf-cyan-55); }

/* ─── LEDs ───────────────────────────────────────────────────────── */
.sf-led {
  width: 6px; height: 6px; border-radius: var(--sf-r-full);
  display: inline-block;
}
.sf-led-lime    { background: var(--sf-lime);    box-shadow: 0 0 8px var(--sf-lime), 0 0 16px rgba(110,255,158,.25); }
.sf-led-cyan    { background: var(--sf-cyan);    box-shadow: 0 0 8px var(--sf-cyan); }
.sf-led-magenta { background: var(--sf-magenta); box-shadow: 0 0 8px var(--sf-magenta); }
.sf-led-amber   { background: var(--sf-amber);   box-shadow: 0 0 8px var(--sf-amber); }
.sf-led-red     { background: var(--sf-red);     box-shadow: 0 0 8px var(--sf-red); }

/* ─── Progress bars ──────────────────────────────────────────────── */
.sf-pbar {
  height: 4px;
  background: var(--sf-border);
  border-radius: var(--sf-r-full);
  overflow: hidden;
}
.sf-pbar > span {
  display: block; height: 100%;
  border-radius: var(--sf-r-full);
  transition: width var(--sf-t-base) var(--sf-ease);
}
.sf-pbar-thin { height: 2px; }
.sf-bar-up    { background: linear-gradient(180deg, var(--sf-lime) 0%, #00A86B 100%); }
.sf-bar-down  { background: linear-gradient(180deg, var(--sf-down) 0%, #C42949 100%); }
.sf-bar-grad  { background: linear-gradient(90deg, var(--sf-cyan), var(--sf-lime)); }

/* ─── KBD ────────────────────────────────────────────────────────── */
.sf-kbd {
  font-family: var(--sf-font-mono);
  font-size: 10px;
  padding: 2px 5px;
  border-radius: var(--sf-r-xs);
  background: var(--sf-surface-2);
  border: 1px solid var(--sf-border-2);
  color: var(--sf-mist);
  box-shadow: 0 1px 0 rgba(0,0,0,0.38);
}

/* ─── Animations ─────────────────────────────────────────────────── */
@keyframes sf-blink {
  0%, 75%  { opacity: 1; }
  76%,100% { opacity: 0.25; }
}
.sf-blink { animation: sf-blink 1.8s ease-in-out infinite; }

@keyframes sf-pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.40); }
  70%  { box-shadow: 0 0 0 8px rgba(0, 229, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0); }
}
.sf-pulse-ring { animation: sf-pulse-ring 2.4s ease-out infinite; }

@keyframes sf-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.sf-ticker-track { animation: sf-ticker 60s linear infinite; }

@keyframes sf-cursor-blink { 50% { opacity: 0; } }
.sf-cursor {
  display: inline-block;
  width: 8px; height: 14px;
  background: var(--sf-cyan);
  vertical-align: -2px;
  margin-left: 2px;
  animation: sf-cursor-blink 1s steps(2) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .sf-blink, .sf-pulse-ring, .sf-ticker-track, .sf-cursor {
    animation: none !important;
  }
}

/* ─── Tables ─────────────────────────────────────────────────────── */
.sf-table {
  width: 100%;
  font-family: var(--sf-font-mono);
  font-size: var(--sf-fs-small);
  border-collapse: collapse;
}
.sf-table thead th {
  font-family: var(--sf-font-mono);
  font-size: var(--sf-fs-micro);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--sf-dust);
  text-align: left;
  padding: 8px 0;
  border-bottom: 1px solid var(--sf-border);
}
.sf-table tbody td {
  padding: 8px 0;
  border-bottom: 1px solid rgba(31, 39, 71, 0.4);
}
.sf-table tbody tr:hover td {
  background: rgba(18, 23, 48, 0.4);
}

/* ─── Film noise overlay (optional, use on body) ─────────────────── */
.sf-noise {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: var(--sf-z-base);
  opacity: 0.03;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
}

/* ═══════════════════════════════════════════════════════════════════
   Usage notes
   ───────────────────────────────────────────────────────────────────
   · All tokens are CSS custom properties on :root — override by
     redefining them on a scope (e.g. [data-theme="high-contrast"]).
   · Component classes use the sf- prefix to avoid collisions with
     your existing Tailwind / other utility classes.
   · Accent ordering of importance:  cyan > magenta > amber > lime/violet.
     Don't use more than two accents inside the same card.
   · Numbers ALWAYS use .sf-font-mono + .sf-number for tabular figures.
   · Motion is disabled automatically under prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════ */