/* verbin.dev — design tokens. Single source of truth.
   Single theme (soft dark). No light/dark toggle. */

:root {
  /* ---- surfaces ---- */
  --bg-canvas: #24272d;
  --bg-sidebar: #191b20;
  --bg-panel: #2b2f36;
  --bg-panel-hover: #333842;
  --bg-inset: #1f2228;
  --bg-scrim: rgba(12, 13, 16, .58);

  /* ---- borders & lines ---- */
  --border: #363b43;
  --border-strong: #474d57;
  --grid-line: rgba(255, 255, 255, .035);

  /* ---- text ---- */
  --text-primary: #eceef1;
  --text-secondary: #a6adb7;
  --text-muted: #7c838d; /* nudged up from #727982 for AA on --bg-canvas */

  /* ---- accent (single signal colour) ---- */
  --accent: #4ade80;
  --accent-dim: #39a869;
  --accent-glow: rgba(74, 222, 128, .22);
  --accent-wash: rgba(74, 222, 128, .08);

  /* ---- state / data accents ---- */
  --cyan: #4cc2f1;
  --amber: #fbbf24;
  --magenta: #f472b6;
  --red: #f87171;

  /* ---- typography ---- */
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-xs: .75rem;    /* 12px */
  --fs-sm: .8125rem;  /* 13px */
  --fs-base: .875rem; /* 14px */
  --fs-md: 1rem;      /* 16px */
  --fs-lg: 1.25rem;   /* 20px */
  --fs-xl: 1.5rem;    /* 24px */
  --fs-2xl: 2rem;     /* 32px */
  --fs-3xl: 2.75rem;  /* 44px */

  --lh-tight: 1.22;
  --lh-snug: 1.45;
  --lh-body: 1.68;

  --track-label: .14em; /* uppercase micro-labels */

  /* ---- spacing (4px scale) ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-6: 24px;
  --s-8: 32px;
  --s-12: 48px;
  --s-16: 64px;

  /* ---- radius ---- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-pill: 999px;

  /* ---- elevation: borders + faint glow, never heavy shadow ---- */
  --el-1: 0 0 0 1px rgba(0, 0, 0, .18);
  --el-2: 0 0 0 1px rgba(0, 0, 0, .18), 0 18px 40px -28px rgba(0, 0, 0, .55);
  --el-3: 0 0 0 1px rgba(0, 0, 0, .22), 0 30px 70px -22px rgba(0, 0, 0, .7);
  --inner-glow: inset 0 1px 0 rgba(255, 255, 255, .028);
  --ring: 0 0 0 2px var(--accent-glow), 0 0 0 1px var(--accent-dim);

  /* ---- motion ---- */
  --t-fast: 120ms;
  --t-base: 150ms;
  --ease: cubic-bezier(.32, .72, .35, 1);

  /* ---- layout ---- */
  --sidebar-w: 248px;
  --topbar-h: 52px;
  --content-max: 1040px;
  --grid-size: 34px;
  --z-drawer: 50;
  --z-topbar: 20;
  --z-overlay: 100;
  --z-toast: 120;
}

/* Konami easter egg: the single accent hue shifts. Nothing else changes. */
body.accent-alt {
  --accent: #f472b6;
  --accent-dim: #c65a95;
  --accent-glow: rgba(244, 114, 182, .26);
  --accent-wash: rgba(244, 114, 182, .09);
}