:root {
  /* Surfaces */
  --bg: #fafafa;
  --bg-elevated: #ffffff;
  --bg-muted: #f4f4f5;
  --bg-hover: #ececef;

  /* Borders */
  --border: #e7e7ea;
  --border-strong: #d4d4d8;

  /* Text */
  --text: #18181b;
  --text-muted: #71717a;
  --text-subtle: #a1a1aa;

  /* Accent */
  --accent: #18181b;
  --accent-contrast: #ffffff;
  --accent-soft: #f4f4f5;

  /* Semantic */
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #3b82f6;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.08);

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --duration: 220ms;

  /* Layout */
  --sidebar-w: 260px;
  --topbar-h: 64px;

  /* Event colors */
  --event-blue: #3b82f6;
  --event-purple: #8b5cf6;
  --event-pink: #ec4899;
  --event-orange: #f97316;
  --event-green: #10b981;
  --event-teal: #14b8a6;
  --event-yellow: #eab308;
  --event-red: #ef4444;
  --event-gray: #6b7280;
}

[data-theme="dark"] {
  --bg: #0a0a0b;
  --bg-elevated: #131316;
  --bg-muted: #1a1a1e;
  --bg-hover: #222227;

  --border: #26262b;
  --border-strong: #3a3a40;

  --text: #fafafa;
  --text-muted: #a1a1aa;
  --text-subtle: #71717a;

  --accent: #fafafa;
  --accent-contrast: #0a0a0b;
  --accent-soft: #1a1a1e;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.5);
}