/* ============================================================
   MOONLIGHTER — INSTRUMENT design system (ported from
   ui_kits/instrument). Tokens verbatim; components translated
   from the React kit. Dark is the base; .theme-light remaps.
   ============================================================ */

:root {
  /* Night surfaces */
  --night-950: #070A12; --night-900: #0A0E18; --night-850: #0F1420;
  --night-800: #141A28; --night-750: #1A2130; --night-700: #212A3B; --night-650: #2A344A;
  /* Hairlines */
  --line-faint: rgba(233,240,250,0.06); --line: rgba(233,240,250,0.10); --line-strong: rgba(233,240,250,0.16);
  /* Moonlight text ramp */
  --moon-50: #F4F8FF; --moon-100: #E7EEFA; --moon-300: #AAB6CC;
  --moon-500: #6E7A92; --moon-600: #505B72; --moon-700: #3A4356;
  /* Beam — machine accent */
  --beam-200: #C3D4FF; --beam-300: #A6BEFF; --beam-400: #7CA0FF; --beam-500: #5C86FF; --beam-600: #3E63E8;
  --beam-soft: rgba(124,160,255,0.14); --beam-glow: rgba(124,160,255,0.35);
  /* Signal — needs-the-human amber */
  --signal-300: #FFD89A; --signal-400: #FFC062; --signal-500: #F5A623;
  --signal-soft: rgba(255,192,98,0.14); --signal-glow: rgba(255,192,98,0.30);
  /* Aurora — positive */
  --aurora-300: #8FE9C4; --aurora-400: #5BD6A4; --aurora-500: #34BE87; --aurora-soft: rgba(91,214,164,0.14);
  /* Ember — danger */
  --ember-300: #FF9E9E; --ember-400: #FF6B6B; --ember-500: #ED4E4E; --ember-soft: rgba(255,107,107,0.14);
  /* Viz ramp */
  --viz-1: #7CA0FF; --viz-2: #5BD6A4; --viz-3: #FFC062; --viz-4: #C08CFF; --viz-5: #59D3E0; --viz-6: #FF8FB3;

  /* Semantic aliases */
  --bg-app: var(--night-950); --bg-canvas: var(--night-900);
  --surface-sunken: var(--night-850); --surface-card: var(--night-800);
  --surface-raised: var(--night-750); --surface-hover: var(--night-700); --surface-active: var(--night-650);
  --text-strong: var(--moon-50); --text-primary: var(--moon-100); --text-secondary: var(--moon-300);
  --text-muted: var(--moon-500); --text-placeholder: var(--moon-600); --text-disabled: var(--moon-700);
  --text-on-beam: #0A0E18;
  --border-faint: var(--line-faint); --border: var(--line); --border-strong: var(--line-strong); --border-focus: var(--beam-400);
  --accent: var(--beam-400); --accent-hover: var(--beam-300); --accent-press: var(--beam-600);
  --accent-tint: var(--beam-soft); --focus-ring: var(--beam-glow);
  --attention: var(--signal-400); --attention-tint: var(--signal-soft);
  --status-live: var(--beam-400); --status-positive: var(--aurora-400);
  --status-attention: var(--signal-400); --status-danger: var(--ember-400); --status-idle: var(--moon-500);
  --chip-neutral: rgba(233,240,250,0.06);

  /* Type */
  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', 'Menlo', monospace;
  --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --fs-display: 40px; --fs-title: 28px; --fs-h1: 22px; --fs-h2: 18px; --fs-lg: 16px;
  --fs-body: 14px; --fs-sm: 13px; --fs-xs: 12px; --fs-2xs: 11px;
  --ls-snug: -0.01em; --ls-label: 0.08em;
  --text-body: var(--fw-regular) var(--fs-body)/1.45 var(--font-sans);

  /* Radii */
  --radius-xs: 3px; --radius-sm: 5px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px;

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.40); --shadow-2: 0 4px 12px rgba(0,0,0,0.45);
  --shadow-3: 0 12px 32px rgba(0,0,0,0.55); --shadow-4: 0 24px 60px rgba(2,5,12,0.70);
  --edge-top: inset 0 1px 0 rgba(233,240,250,0.05);
  --ring-focus: 0 0 0 3px var(--beam-glow);
  --glow-beam: 0 0 0 1px rgba(124,160,255,0.30), 0 0 16px rgba(124,160,255,0.25);
  --glow-signal: 0 0 0 1px rgba(255,192,98,0.30), 0 0 16px rgba(255,192,98,0.20);

  /* Motion */
  --dur-fast: 140ms; --dur-base: 200ms; --dur-slow: 320ms;
  --ease-out: cubic-bezier(0.16,1,0.3,1); --ease-in-out: cubic-bezier(0.65,0,0.35,1); --ease-standard: cubic-bezier(0.4,0,0.2,1);
  --transition-control: color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}

/* Light theme — designed, not inverted. Set data-theme on <html> so the
   semantic aliases (defined at :root) re-resolve against the light ramps. */
:root[data-theme="light"], [data-theme="light"], .theme-light {
  --night-950: #F4F6F9; --night-900: #F8FAFC; --night-850: #EEF1F6;
  --night-800: #FFFFFF; --night-750: #FFFFFF; --night-700: #E9EDF3; --night-650: #DFE4EC;
  --line-faint: rgba(17,22,34,0.05); --line: rgba(17,22,34,0.09); --line-strong: rgba(17,22,34,0.14);
  --moon-50: #0B0D13; --moon-100: #191D26; --moon-300: #515A69;
  --moon-500: #78818F; --moon-600: #99A1AD; --moon-700: #BFC5CF;
  --beam-200: #A9BCF7; --beam-300: #6F8CEE; --beam-400: #4667E4; --beam-500: #3552C8; --beam-600: #2B44A8;
  --beam-soft: rgba(70,103,228,0.10); --beam-glow: rgba(70,103,228,0.22);
  --signal-300: #A66A08; --signal-400: #E7960F; --signal-500: #C87E00;
  --signal-soft: rgba(231,150,15,0.13); --signal-glow: rgba(231,150,15,0.22);
  --aurora-300: #158A5B; --aurora-400: #1FA771; --aurora-500: #17885C; --aurora-soft: rgba(31,167,113,0.12);
  --ember-300: #CD3B36; --ember-400: #E24B45; --ember-500: #C63A34; --ember-soft: rgba(226,75,69,0.11);
  --viz-1: #4667E4; --viz-2: #1FA771; --viz-3: #E7960F; --viz-4: #9A5CF0; --viz-5: #1F9FB0; --viz-6: #E06792;
  --text-on-beam: #FFFFFF;
  --chip-neutral: rgba(17,22,34,0.05);
  --shadow-1: 0 1px 2px rgba(16,24,40,0.06); --shadow-2: 0 4px 12px rgba(16,24,40,0.08);
  --shadow-3: 0 12px 28px rgba(16,24,40,0.12); --shadow-4: 0 24px 60px rgba(16,24,40,0.18);
  --edge-top: inset 0 1px 0 rgba(255,255,255,0.6);
  --glow-beam: 0 0 0 1px rgba(70,103,228,0.22), 0 2px 10px rgba(70,103,228,0.12);
  --glow-signal: 0 0 0 1px rgba(231,150,15,0.22), 0 2px 10px rgba(231,150,15,0.10);
  color: var(--text-primary);
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body { margin: 0; background: var(--bg-app); color: var(--text-primary); font: var(--text-body); letter-spacing: var(--ls-snug); font-feature-settings: 'cv01','ss01'; }
.moon-canvas { background: radial-gradient(1200px 480px at 78% -10%, rgba(124,160,255,0.10), transparent 60%), var(--bg-app); }
[data-theme="light"] .moon-canvas, .theme-light.moon-canvas, .theme-light .moon-canvas {
  background: radial-gradient(1100px 460px at 80% -12%, rgba(70,103,228,0.06), transparent 60%), var(--bg-app);
}
h1, h2, h3, h4, p { margin: 0; }
a { color: var(--accent); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--accent-hover); }
.mono, code, kbd { font-family: var(--font-mono); }
.tnum { font-variant-numeric: tabular-nums; }
::selection { background: var(--beam-soft); color: var(--moon-50); }
* { scrollbar-width: thin; scrollbar-color: var(--night-700) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--night-700); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: var(--radius-sm); }

@keyframes moon-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; } }

/* ---- shared primitives ---- */
.eyebrow { font: var(--fw-medium) 10px/1 var(--font-mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted); }

.card { background: var(--surface-card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-1); overflow: hidden; }
.card-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--border); }
.card-head h3 { font: var(--fw-semibold) 15px/1 var(--font-sans); letter-spacing: -0.01em; color: var(--text-primary); }
.card-note { font: var(--fw-regular) var(--fs-2xs)/1 var(--font-mono); color: var(--text-muted); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 30px; padding: 0 12px; border-radius: var(--radius-md); border: 1px solid transparent;
  font: var(--fw-medium) var(--fs-sm)/1 var(--font-sans); cursor: pointer;
  transition: var(--transition-control); white-space: nowrap;
}
.btn:disabled { opacity: .5; cursor: default; }
.btn .lucide { width: 14px; height: 14px; }
.btn-primary { background: var(--beam-400); color: var(--text-on-beam); }
.btn-primary:hover { background: var(--beam-300); }
.btn-secondary { background: var(--surface-card); color: var(--text-primary); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--surface-hover); }
.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover { background: var(--surface-hover); color: var(--text-primary); }
.btn-attention { background: var(--signal-soft); color: var(--signal-300); border-color: var(--signal-glow); }
.btn-attention:hover { box-shadow: var(--glow-signal); }
.btn-full { width: 100%; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface-card);
  color: var(--text-secondary); cursor: pointer; transition: var(--transition-control);
}
.icon-btn:hover { background: var(--surface-hover); color: var(--text-primary); }
.icon-btn .lucide { width: 15px; height: 15px; }

.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: var(--radius-pill);
  font: var(--fw-semibold) var(--fs-2xs)/1.2 var(--font-sans); white-space: nowrap;
}
.badge::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: currentColor; }
.badge-live { background: var(--beam-soft); color: var(--beam-300); }
.theme-light .badge-live, [data-theme="light"] .badge-live { color: var(--beam-400); }
.badge-positive { background: var(--aurora-soft); color: var(--aurora-300); }
.badge-attention { background: var(--signal-soft); color: var(--signal-300); }
.badge-danger { background: var(--ember-soft); color: var(--ember-300); }
.badge-idle { background: var(--chip-neutral); color: var(--text-muted); }
.badge.pulse::before { animation: moon-pulse 2s var(--ease-in-out) infinite; }

.tag {
  display: inline-flex; align-items: center; padding: 6px 12px; border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--surface-card); color: var(--text-secondary);
  font: var(--fw-medium) var(--fs-sm)/1 var(--font-sans); cursor: pointer; transition: var(--transition-control);
}
.tag:hover { color: var(--text-primary); }
.tag.selected { background: var(--beam-soft); color: var(--accent); border-color: transparent; }

select.ctl, input.ctl, textarea.ctl {
  background: var(--surface-card); border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  color: var(--text-primary); font: var(--fw-regular) var(--fs-sm)/1.3 var(--font-sans); padding: 7px 10px; outline: none;
  transition: var(--transition-control);
}
select.ctl:focus, input.ctl:focus, textarea.ctl:focus { border-color: var(--border-focus); box-shadow: var(--ring-focus); }
textarea.ctl { width: 100%; min-height: 84px; resize: vertical; font-family: var(--font-sans); }

.switch { position: relative; width: 36px; height: 20px; border-radius: 999px; background: var(--surface-active); border: none; cursor: pointer; transition: var(--transition-control); flex: none; padding: 0; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 999px; background: #fff; box-shadow: var(--shadow-1); transition: var(--transition-control); }
.theme-light .switch::after { background: #fff; }
.switch.on { background: var(--beam-400); }
.switch.on::after { left: 18px; }

.rank { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 6px; background: var(--chip-neutral); color: var(--text-muted); font: var(--fw-semibold) 11px/1 var(--font-mono); }
.rank.top { background: var(--beam-soft); color: var(--accent); }

.trend { display: inline-flex; align-items: center; gap: 3px; font: var(--fw-semibold) 11px/1 var(--font-mono); }
.trend.up { color: var(--aurora-300); }
.trend.dn { color: var(--ember-300); }

.meter { height: 6px; background: var(--surface-sunken); border-radius: 999px; overflow: hidden; }
.meter > i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }

/* tables */
table.itab { width: 100%; border-collapse: collapse; font-size: 13px; }
table.itab th { font: var(--fw-semibold) 10px/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); padding: 10px 14px; border-bottom: 1px solid var(--border); text-align: right; }
table.itab th:first-child, table.itab th.l { text-align: left; }
table.itab td { padding: 12px 14px; border-bottom: 1px solid var(--border-faint); text-align: right; font-variant-numeric: tabular-nums; }
table.itab td:first-child, table.itab td.l { text-align: left; }
table.itab tr:last-child td { border-bottom: none; }

/* KPI tile */
.kpi { background: var(--surface-card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow-1); }
.kpi .v { font: var(--fw-semibold) 28px/1 var(--font-mono); letter-spacing: -0.02em; color: var(--moon-50); margin-top: 10px; font-variant-numeric: tabular-nums; }
.kpi .v .unit { font-size: 14px; color: var(--text-muted); }
.kpi .sub { margin-top: 8px; display: flex; gap: 6px; align-items: center; font: var(--fw-regular) var(--fs-xs)/1 var(--font-mono); color: var(--text-muted); }

/* dialogs */
dialog { background: var(--surface-card); color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; max-width: 520px; width: 92%; box-shadow: var(--shadow-4); }
dialog::backdrop { background: rgba(2,5,12,0.55); }
dialog h3 { font: var(--fw-semibold) 17px/1.2 var(--font-sans); letter-spacing: -0.01em; margin-bottom: 6px; }
dialog label { display: block; font: var(--fw-medium) 10px/1 var(--font-mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted); margin: 16px 0 6px; }
dialog input.ctl, dialog select.ctl, dialog textarea.ctl { width: 100%; }