/* ── YK Design Tokens v3 — Zinc-toned modern ── */
:root {
  /* ── BRAND ── */
  --yk-accent: #6366f1;
  --yk-accent-light: #818cf8;
  --yk-accent-dim: rgba(99,102,241,0.12);
  --yk-green: #10b981;
  --yk-green-dim: rgba(16,185,129,0.12);
  --yk-green-subtle: rgba(16,185,129,0.06);
  --yk-yellow: #f59e0b;
  --yk-yellow-dim: rgba(245,158,11,0.12);
  --yk-red: #ef4444;
  --yk-red-dim: rgba(239,68,68,0.12);
  --yk-blue: #3b82f6;
  --yk-blue-dim: rgba(59,130,246,0.12);
  /* ── TYPOGRAPHY ── */
  --yk-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --yk-font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
  --yk-text-xs: 11px; --yk-text-sm: 12px; --yk-text-base: 14px; --yk-text-md: 15px;
  --yk-text-lg: 16px; --yk-text-xl: 20px; --yk-text-2xl: 24px; --yk-text-3xl: 32px;
  /* ── SPACING ── */
  --yk-space-1: 4px; --yk-space-2: 8px; --yk-space-3: 12px; --yk-space-4: 16px;
  --yk-space-5: 20px; --yk-space-6: 24px; --yk-space-8: 32px; --yk-space-10: 40px; --yk-space-12: 48px;
  /* ── RADII ── */
  --yk-radius-sm: 6px; --yk-radius-md: 8px; --yk-radius-lg: 12px; --yk-radius-xl: 16px;
  --yk-radius-card: 12px;
  /* ── SHADOWS ── */
  --yk-shadow-sm: 0 1px 3px rgba(0,0,0,0.3); --yk-shadow-md: 0 4px 12px rgba(0,0,0,0.4); --yk-shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
  /* ── TRANSITIONS ── */
  --yk-transition: 150ms ease; --yk-transition-slow: 250ms ease;
  --yk-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* ── GLASS ── */
  --yk-bg-glass: rgba(9,9,11,0.72);
  --yk-blur: blur(16px);
  /* ── Legacy aliases ── */
  --ink: var(--yk-text); --paper: var(--yk-bg);
  --accent: var(--yk-accent); --accent-soft: var(--yk-accent-light);
  --panel: var(--yk-surface); --panel-strong: var(--yk-surface-2); --panel-soft: var(--yk-surface);
  --panel-raised: var(--yk-surface-2); --border-strong: var(--yk-border);
  --text-strong: var(--yk-text); --accent-warm: var(--yk-yellow); --danger: var(--yk-red);
  --yk-amber: var(--yk-yellow); --yk-amber-dim: var(--yk-yellow-dim);
  --yk-success: var(--yk-green); --yk-warning: var(--yk-yellow); --yk-danger: var(--yk-red);
}

/* ── DARK MODE (default) — Zinc-toned ── */
[data-theme="dark"], html:not([data-theme]) {
  --yk-bg: #09090b; --yk-surface: #111113; --yk-surface-2: #18181b; --yk-surface-3: #1f1f23;
  --yk-border: rgba(255,255,255,0.08); --yk-border-subtle: rgba(255,255,255,0.04);
  --yk-text: #fafafa; --yk-text-muted: rgba(250,250,250,0.55); --yk-text-subtle: rgba(250,250,250,0.35);
  --yk-sidebar-bg: #09090b; --yk-topbar-bg: rgba(9,9,11,0.82);
  /* Unprefixed */
  --bg-base: #09090b; --bg-surface: #111113; --bg-elevated: #18181b; --bg-hover: rgba(255,255,255,0.05);
  --text-primary: #fafafa; --text-secondary: rgba(250,250,250,0.60); --text-muted: rgba(250,250,250,0.35);
  --border: rgba(255,255,255,0.08); --border-subtle: rgba(255,255,255,0.04);
  --sidebar-bg: #09090b; --sidebar-text: rgba(250,250,250,0.50); --sidebar-active: #fafafa;
  --sidebar-active-bg: rgba(255,255,255,0.06); --sidebar-active-text: #fafafa;
  --topbar-bg: rgba(9,9,11,0.82); --input-bg: rgba(255,255,255,0.06); --shadow: 0 1px 3px rgba(0,0,0,0.4);
  color-scheme: dark;
}

/* ── LIGHT MODE ── */
[data-theme="light"] {
  --yk-bg: #f4f5f9; --yk-surface: #ffffff; --yk-surface-2: #eef0f6; --yk-surface-3: #e8eaf2;
  --yk-border: rgba(0,0,0,0.08); --yk-border-subtle: rgba(0,0,0,0.04);
  --yk-text: #0d0f1a; --yk-text-muted: rgba(13,15,26,0.55); --yk-text-subtle: rgba(13,15,26,0.35);
  --yk-sidebar-bg: #ffffff; --yk-topbar-bg: rgba(244,245,249,0.92);
  --yk-shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --yk-shadow-md: 0 4px 12px rgba(0,0,0,0.1); --yk-shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
  /* Unprefixed */
  --bg-base: #f4f5f9; --bg-surface: #ffffff; --bg-elevated: #eef0f6; --bg-hover: rgba(0,0,0,0.04);
  --text-primary: #0d0f1a; --text-secondary: rgba(13,15,26,0.60); --text-muted: rgba(13,15,26,0.38);
  --border: rgba(0,0,0,0.08); --border-subtle: rgba(0,0,0,0.04);
  --sidebar-bg: #ffffff; --sidebar-text: rgba(13,15,26,0.55); --sidebar-active: #0d0f1a;
  --sidebar-active-bg: rgba(99,102,241,0.08); --sidebar-active-text: #4f52d9;
  --topbar-bg: rgba(244,245,249,0.95); --input-bg: rgba(0,0,0,0.04); --shadow: 0 1px 3px rgba(0,0,0,0.08);
  color-scheme: light;
}

/* ── Global resets ── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  color: var(--yk-text);
  font-family: var(--yk-font-sans);
  font-size: var(--yk-text-base);
  line-height: 1.5;
  letter-spacing: -0.011em;
  background: var(--yk-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background 200ms, color 200ms;
}
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--yk-surface-3); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--yk-text-subtle); }
a { color: var(--yk-accent-light); text-underline-offset: 0.18em; text-decoration: none; }
a:hover { text-decoration: underline; }
code, pre { font-family: var(--yk-font-mono); }

/* ── Typography ── */
h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.03em; color: var(--yk-text); }
h2 { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: var(--yk-text); }
h3 { font-size: 14px; font-weight: 600; color: var(--yk-text); }

/* ── Labels ── */
.label, .eyebrow {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--yk-text-subtle);
}

/* ── Status badges ── */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.badge-up { color: var(--yk-green); background: var(--yk-green-dim); }
.badge-down { color: var(--yk-red); background: var(--yk-red-dim); }
.badge-warn { color: var(--yk-yellow); background: var(--yk-yellow-dim); }
.badge-accent { color: var(--yk-accent-light); background: var(--yk-accent-dim); }

/* ── Stat cards ── */
.stat-value { font-size: 28px; font-weight: 700; letter-spacing: -0.03em; color: var(--yk-text); }
.stat-label { font-size: 11px; color: var(--yk-text-subtle); text-transform: uppercase; letter-spacing: 0.06em; }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--yk-radius-md); font-size: 13px; font-weight: 500; cursor: pointer; border: none; transition: opacity 150ms, background 150ms; font-family: inherit; }
.btn:hover { opacity: 0.85; }
.btn-primary { background: var(--yk-accent); color: #fff; }
.btn-ghost { background: transparent; border: 1px solid var(--yk-border); color: var(--yk-text-muted); }
.btn-ghost:hover { color: var(--yk-text); background: var(--yk-surface-2); }
.btn-danger { background: var(--yk-red-dim); color: var(--yk-red); border: 1px solid rgba(239,68,68,0.2); }
.btn-success { background: var(--yk-green-dim); color: var(--yk-green); border: 1px solid rgba(16,185,129,0.2); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }