:root {
  /* Backgrounds */
  --bg-primary: #0A0A0F;
  --bg-surface: #12121A;
  --bg-surface-raised: #1A1A25;
  --bg-surface-hover: #22222E;
  --bg-input: #0E0E16;

  /* Text */
  --text-primary: #F0F0F5;
  --text-secondary: #8888A0;
  --text-tertiary: #555568;
  --text-disabled: #3A3A4A;

  /* Accent */
  --accent: #4F8CFF;
  --accent-hover: #6BA0FF;
  --accent-subtle: rgba(79, 140, 255, 0.12);
  --accent-text: #4F8CFF;

  /* Semantic */
  --success: #34D399;
  --success-subtle: rgba(52, 211, 153, 0.12);
  --warning: #FBBF24;
  --warning-subtle: rgba(251, 191, 36, 0.12);
  --error: #F87171;
  --error-subtle: rgba(248, 113, 113, 0.12);
  --record: #A78BFA;
  --record-subtle: rgba(167, 139, 250, 0.12);

  /* Borders */
  --border-default: #1E1E2A;
  --border-active: #4F8CFF;
  --border-divider: #18182A;

  /* Timer */
  --timer-active: #4F8CFF;
  --timer-warning: #FBBF24;
  --timer-done: #34D399;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-base: 16px;
  --space-lg: 20px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-card: 12px;
  --radius-drawer: 16px;

  /* Shadows */
  --shadow-drawer: 0 -4px 24px rgba(0, 0, 0, 0.4);

  /* Font */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}