:root {
  /* === Dark Theme — Default === */
  /* Scene: a knowledge worker at night, under low ambient light, focused and calm */
  --bg-canvas: #0c0e14;
  --bg-card: #161822;
  --bg-sidebar: #10121a;
  --bg-nav: #12141e;
  --bg-hover: rgba(255,255,255,0.04);
  --bg-selected: rgba(91,156,246,0.10);

  /* Text — ink on dark surfaces */
  --ink: #e2e4eb;
  --ink-secondary: #8b91a0;
  --ink-tertiary: #5c6178;
  --ink-inverse: #0c0e14;

  /* Accent */
  --accent: #4d8ef7;
  --accent-light: rgba(77,142,247,0.10);
  --accent-glow: rgba(77,142,247,0.20);

  /* Borders */
  --border: #282b3a;
  --border-light: #212436;
  --border-strong: #3a3e50;

  /* Category colors — vivid on dark */
  --cat-1: #f06060;   /* Faith - red */
  --cat-2: #e8a017;   /* Money - amber */
  --cat-3: #2dd4a0;   /* Life - emerald */
  --cat-4: #5b9cf6;   /* Mind - blue */
  --cat-5: #14c5a3;   /* Tools - teal */
  --cat-6: #d6409f;   /* Body - pink */

  /* Canvas dot grid */
  --canvas-dot: rgba(255,255,255,0.05);
  --canvas-dot-large: rgba(255,255,255,0.08);

  /* Sizing */
  --sidebar-w: 260px;
  --nav-h: 48px;

  /* Spacing */
  --pad-xs: 4px;
  --pad-sm: 8px;
  --pad-md: 12px;
  --pad-lg: 16px;
  --pad-xl: 20px;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;

  /* Shadows — subtle, dark-appropriate */
  --shadow-card: 0 1px 2px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.03);
  --shadow-card-hover: 0 4px 16px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05);
  --shadow-nav: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-sidebar: 1px 0 0 rgba(255,255,255,0.03);
  --shadow-elevated: 0 8px 32px rgba(0,0,0,0.5);

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --dur-fast: 120ms;
  --dur-md: 250ms;
  --dur-slow: 400ms;

  /* Font */
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; font-family: var(--font); color: var(--ink); background: var(--bg-canvas); -webkit-font-smoothing: antialiased; }
input, button { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }
::selection { background: var(--accent-light); }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-tertiary); }