public/css/tokens.css

:root {
  /* Brand palette */
  --yellow: #e5c846;
  --yellow-dim: #c9a f2e;
  --yellow-glow: rgba(229, 200, 70, 0.18);
  --blue: #3178c6;
  --blue-bright: #4a9eff;
  --blue-dim: rgba(49, 120, 198, 0.18);
  --blue-glow: rgba(74, 158, 255, 0.14);

  /* Neutrals - dark theme defaults */
  --bg: #0d0e11;
  --bg-surface: #131417;
  --bg-raised: #1a1b20;
  --bg-hover: #22242b;
  --bg-active: #2a2c35;
  --border: rgba(255,255,255,0.07);
  --border-bright: rgba(255,255,255,0.14);
  --text: #e8eaf0;
  --text-dim: rgba(232, 234, 240, 0.55);
  --text-muted: rgba(232, 234, 240, 0.35);

  /* Sidebar */
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 56px;
  --sidebar-bg: #0f1013;
  --sidebar-border: rgba(255,255,255,0.06);

  /* Plan colors */
  --plan-free: #8a8fa8;
  --plan-light: #4a9eff;
  --plan-core: #2dd4a6;
  --plan-creator: #a78bfa;
  --plan-professional: #e5c846;

  /* Input */
  --input-bg: #1a1b20;
  --input-border: rgba(255,255,255,0.1);
  --input-focus: rgba(74, 158, 255, 0.5);

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* Transitions */
  --transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.32s cubic-bezier(0.4, 0, 0.2, 1);

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-md: 0 6px 20px rgba(0,0,0,0.4);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.5);
  --shadow-glow-blue: 0 0 0 1px var(--input-focus), 0 0 20px var(--blue-glow);

  /* Fonts */
  --font-sans: 'Geist', system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', 'Fira Code', monospace;

  /* Z-layers */
  --z-sidebar: 100;
  --z-modal: 500;
  --z-notify: 600;
  --z-menu: 400;
}

[data-theme="light"] {
  --bg: #f4f5f7;
  --bg-surface: #ffffff;
  --bg-raised: #f0f1f4;
  --bg-hover: #e8e9ed;
  --bg-active: #dfe0e6;
  --border: rgba(0,0,0,0.08);
  --border-bright: rgba(0,0,0,0.14);
  --text: #1a1b20;
  --text-dim: rgba(26, 27, 32, 0.6);
  --text-muted: rgba(26, 27, 32, 0.38);
  --sidebar-bg: #e8e9ed;
  --sidebar-border: rgba(0,0,0,0.07);
  --input-bg: #ffffff;
  --input-border: rgba(0,0,0,0.12);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-md: 0 6px 20px rgba(0,0,0,0.1);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.12);
}