:root {
  --primary: #111111;
  --primary-dark: #000000;
  --black: #050505;
  --white: #FFFFFF;
  --bg: #F4F4F2;
  --card: #FFFFFF;
  --border: #D8D8D4;
  --text: #141414;
  --text-light: #686868;

  /* Semantic aliases for long-term maintainability */
  --surface-1: #FFFFFF;
  --surface-2: #F7F7F5;
  --surface-dark: #111111;
  --nav-bg: #050505;
  --nav-text: #FFFFFF;
  --nav-text-muted: #BDBDBD;
  --focus-ring: rgba(0, 0, 0, 0.16);
  --shadow-soft: 0 8px 22px rgba(0, 0, 0, 0.055);
  --shadow-strong: 0 18px 42px rgba(0, 0, 0, 0.14);
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --danger: #111111;
  --danger-soft: #EFEFEB;
  --success: #111111;
  --success-soft: #EFEFEB;
  --warning: #3F3F3F;
  --warning-soft: #EFEFEC;
  --primary-soft: #EEEEEA;
  --primary-soft-2: #E8E8E3;
  --active-indicator: #FFFFFF;
  --inactive-text: #6F6F6F;
  --inactive-bg: #ECECE8;
  --inactive-border: #D0D0CA;
  --empty-border: #C9C9C2;
  --empty-bg: #F7F7F5;
}

/* Prepared for future dark mode rollout without rewriting component styles */
[data-theme="dark"] {
  --primary: #F5F5F2;
  --primary-dark: #FFFFFF;
  --black: #F5F5F2;
  --bg: #0B0B0B;
  --card: #121212;
  --border: #2A2A2A;
  --text: #F5F5F2;
  --text-light: #B8B8B4;
  --surface-1: #151515;
  --surface-2: #1C1C1C;
  --nav-bg: #000000;
  --nav-text: #FFFFFF;
  --nav-text-muted: #B8B8B4;
  --focus-ring: rgba(255, 255, 255, 0.18);
  --shadow-soft: 0 8px 22px rgba(0, 0, 0, 0.34);
  --shadow-strong: 0 18px 42px rgba(0, 0, 0, 0.48);
  --danger: #F5F5F2;
  --danger-soft: rgba(255, 255, 255, 0.08);
  --success: #F5F5F2;
  --success-soft: rgba(255, 255, 255, 0.08);
  --warning: #F5F5F2;
  --warning-soft: rgba(255, 255, 255, 0.08);
  --primary-soft: rgba(255, 255, 255, 0.09);
  --primary-soft-2: rgba(255, 255, 255, 0.13);
  --active-indicator: #FFFFFF;
  --inactive-text: #B8B8B4;
  --inactive-bg: #202020;
  --inactive-border: #353535;
  --empty-border: #3A3A3A;
  --empty-bg: #151515;
}