/* ═══════════════════════════════════════════════════════════════════
   KAROSHI / FABLE DESIGN TOKENS
   The single source of truth for the redesigned surface. Evolves the
   original brand DNA (near-black + electric mint + mono data) into a
   tokenized system. Legacy var names (--bg, --green, …) are aliased at
   the bottom so unmigrated templates keep rendering during rollout.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Canvas + layers ─────────────────────────────────────────── */
  --k-bg:          #0a0a0f;   /* page canvas */
  --k-bg-raised:   #0e0e15;   /* cards */
  --k-bg-surface:  #13131c;   /* inputs, wells, table headers */
  --k-bg-elevated: #181826;   /* popovers, modals, hover layers */
  --k-bg-overlay:  rgba(6, 6, 11, 0.72);

  /* ── Strokes ─────────────────────────────────────────────────── */
  --k-border:        #1d1d2a;
  --k-border-strong: #2b2b3e;
  --k-border-accent: rgba(20, 241, 149, 0.35);

  /* ── Ink ─────────────────────────────────────────────────────── */
  --k-text:    #eceaf4;
  --k-text-2:  #9c9aac;
  --k-text-3:  #605e72;
  --k-text-on-accent: #04130c;

  /* ── Accent: electric mint is THE accent ─────────────────────── */
  --k-accent:        #14f195;
  --k-accent-bright: #3dffae;
  --k-accent-dim:    rgba(20, 241, 149, 0.14);
  --k-accent-border: rgba(20, 241, 149, 0.32);
  --k-accent-glow:   rgba(20, 241, 149, 0.18);

  /* secondary (Solana purple, demoted to supporting role) */
  --k-violet:      #9945ff;
  --k-violet-dim:  rgba(153, 69, 255, 0.14);
  --k-violet-border: rgba(153, 69, 255, 0.32);

  /* ── PnL semantics (never reuse accent for "down") ───────────── */
  --k-up:        #14f195;
  --k-up-dim:    rgba(20, 241, 149, 0.12);
  --k-down:      #ff4d5e;
  --k-down-dim:  rgba(255, 77, 94, 0.12);
  --k-warn:      #ffb454;
  --k-warn-dim:  rgba(255, 180, 84, 0.12);
  --k-info:      #4da3ff;
  --k-info-dim:  rgba(77, 163, 255, 0.12);

  /* ── Typography ──────────────────────────────────────────────── */
  --k-font-display: 'Outfit', 'Inter', system-ui, sans-serif;
  --k-font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --k-font-mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  --k-fs-2xs: 10px;
  --k-fs-xs:  11px;
  --k-fs-sm:  12px;
  --k-fs-md:  13px;
  --k-fs-lg:  15px;
  --k-fs-xl:  18px;
  --k-fs-2xl: 22px;
  --k-fs-3xl: 28px;
  --k-fs-4xl: 36px;

  --k-track-label: 0.08em;  /* uppercase mono labels */
  --k-track-tight: -0.02em; /* display headlines */

  /* ── Space scale ─────────────────────────────────────────────── */
  --k-sp-1: 4px;
  --k-sp-2: 8px;
  --k-sp-3: 12px;
  --k-sp-4: 16px;
  --k-sp-5: 20px;
  --k-sp-6: 24px;
  --k-sp-8: 32px;
  --k-sp-10: 40px;
  --k-sp-12: 48px;

  /* ── Radii ───────────────────────────────────────────────────── */
  --k-r-sm: 6px;
  --k-r-md: 10px;
  --k-r-lg: 14px;
  --k-r-xl: 20px;
  --k-r-pill: 999px;

  /* ── Elevation ───────────────────────────────────────────────── */
  --k-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --k-shadow-2: 0 4px 16px rgba(0, 0, 0, 0.45);
  --k-shadow-3: 0 12px 40px rgba(0, 0, 0, 0.6);
  --k-glow-accent: 0 0 0 1px var(--k-accent-border), 0 0 24px var(--k-accent-glow);

  /* ── Motion (fast, purposeful) ───────────────────────────────── */
  --k-t-fast: 120ms;
  --k-t-med:  180ms;
  --k-t-slow: 240ms;
  --k-ease:      cubic-bezier(0.22, 1, 0.36, 1);  /* ease-out-quart */
  --k-ease-snap: cubic-bezier(0.34, 1.3, 0.64, 1); /* slight overshoot */

  /* ── Layout ──────────────────────────────────────────────────── */
  --k-sidebar-w: 220px;
  --k-sidebar-w-rail: 60px;
  --k-topbar-h: 52px;
  --k-content-max: 1320px;

  /* ── Z scale ─────────────────────────────────────────────────── */
  --k-z-sticky: 50;
  --k-z-sidebar: 100;
  --k-z-drawer: 600;
  --k-z-modal: 700;
  --k-z-palette: 800;
  --k-z-toast: 900;
  --k-z-pill: 950;
}

/* ── Legacy aliases — keep unmigrated templates coherent ───────── */
:root {
  --bg: var(--k-bg);
  --bg-card: var(--k-bg-raised);
  --bg-surface: var(--k-bg-surface);
  --border: var(--k-border);
  --border-h: var(--k-border-strong);
  --text: var(--k-text);
  --text-2: var(--k-text-2);
  --text-3: var(--k-text-3);
  --green: var(--k-accent);
  --green-dim: #0a7a4c;
  --purple: var(--k-violet);
  --red: var(--k-down);
  --amber: var(--k-warn);
  --blue: var(--k-info);
  --mono: var(--k-font-mono);
  --sans: var(--k-font-body);
  --r: var(--k-r-md);
  --rl: var(--k-r-lg);
  --sidebar-w: var(--k-sidebar-w);
}

/* ═══ Base reset + canvas ═══ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body.k-body {
  background: var(--k-bg);
  color: var(--k-text);
  font-family: var(--k-font-body);
  font-size: var(--k-fs-md);
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Barely-there engineering grid + top vignette. Fixed so content scrolls
   over a stable field; opacity tuned to read as texture, not pattern. */
body.k-body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(236, 234, 244, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(236, 234, 244, 0.022) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 120% 90% at 50% -10%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 120% 90% at 50% -10%, #000 30%, transparent 78%);
}

::selection { background: rgba(20, 241, 149, 0.25); color: var(--k-text); }

a { color: var(--k-accent); }

/* Scrollbars that match the canvas */
* { scrollbar-width: thin; scrollbar-color: var(--k-border-strong) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--k-border-strong); border-radius: 99px; }
*::-webkit-scrollbar-track { background: transparent; }

/* Focus visibility — keyboard-first product */
:focus-visible {
  outline: 2px solid var(--k-accent);
  outline-offset: 2px;
  border-radius: var(--k-r-sm);
}

/* Numbers are data. Everywhere. */
.k-num, .k-mono { font-family: var(--k-font-mono); font-variant-numeric: tabular-nums; }

/* ═══ Reduced motion: kill it all ═══ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}