:root {
  /* Default: Dark Mode (Trello Clean Slate Dark) */
  --bg-app: #0f1215;
  --bg-header: #181c20;
  --bg-board: #161a1e;
  --bg-list: #1d2125;
  --bg-list-header: #1d2125;
  --bg-card: #22272b;
  --bg-card-hover: #282e33;
  --bg-card-selected: #2c333a;
  
  --bg-surface: #22272b;
  --bg-surface-sunken: #161a1d;
  --bg-surface-raised: #282e33;
  --bg-surface-overlay: #2c333a;
  --bg-input: #161a1d;
  --bg-input-focus: #22272b;
  
  --border-subtle: #282e33;
  --border-default: #38414a;
  --border-bold: #596773;
  --border-focus: #579dff;
  
  --text-primary: #b6c2cf;
  --text-secondary: #9fadbc;
  --text-subtle: #738496;
  --text-inverse: #172b4d;
  
  --accent-primary: #579dff;
  --accent-primary-hover: #85b8ff;
  --accent-primary-active: #cce0ff;
  --accent-primary-subtle: rgba(87, 157, 255, 0.12);
  --accent-primary-border: rgba(87, 157, 255, 0.3);
  
  --success: #4bce97;
  --success-subtle: rgba(75, 206, 151, 0.16);
  --warning: #f5cd47;
  --warning-subtle: rgba(245, 205, 71, 0.16);
  --danger: #f87168;
  --danger-hover: #ff8b82;
  --danger-subtle: rgba(248, 113, 104, 0.16);
  
  --shadow-card: 0 1px 1px rgba(0, 0, 0, 0.2), 0 0 1px rgba(0, 0, 0, 0.3);
  --shadow-card-hover: 0 4px 8px rgba(0, 0, 0, 0.3), 0 0 1px rgba(0, 0, 0, 0.4);
  --shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-modal: 0 12px 32px rgba(0, 0, 0, 0.6);

  /* Spacing (Generous, clean breathing room) */
  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 28px;
  --space-3xl: 36px;

  /* Border Radius */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  /* Font */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Noto Sans', 'Ubuntu', 'Helvetica Neue', sans-serif;
  --font-size-xs: 11px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-md: 15px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 22px;
  --font-size-3xl: 28px;

  /* Scrollbar */
  --scrollbar-thumb: #38414a;
  --scrollbar-track: rgba(0, 0, 0, 0.1);
}

/* Light Mode (Authentic Trello Clean Light) */
[data-theme="light"] {
  --bg-app: #f4f5f7;
  --bg-header: #ffffff;
  --bg-board: #0079bf; /* Classic Trello Blue backdrop */
  --bg-list: #f1f2f4;
  --bg-list-header: #f1f2f4;
  --bg-card: #ffffff;
  --bg-card-hover: #f7f8f9;
  --bg-card-selected: #e9f2ff;
  
  --bg-surface: #ffffff;
  --bg-surface-sunken: #f4f5f7;
  --bg-surface-raised: #ffffff;
  --bg-surface-overlay: #ffffff;
  --bg-input: #ffffff;
  --bg-input-focus: #ffffff;
  
  --border-subtle: #ebecf0;
  --border-default: #dfe1e6;
  --border-bold: #c1c7d0;
  --border-focus: #0052cc;
  
  --text-primary: #172b4d;
  --text-secondary: #44546f;
  --text-subtle: #626f86;
  --text-inverse: #ffffff;
  
  --accent-primary: #0052cc;
  --accent-primary-hover: #0065ff;
  --accent-primary-active: #0747a6;
  --accent-primary-subtle: #deebff;
  --accent-primary-border: #b3d4ff;
  
  --success: #1f845a;
  --success-subtle: #dcf5e7;
  --warning: #9e6c00;
  --warning-subtle: #fff3c4;
  --danger: #ae2a19;
  --danger-hover: #c9372c;
  --danger-subtle: #ffebe6;
  
  --shadow-card: 0 1px 1px rgba(9, 30, 66, 0.25), 0 0 1px rgba(9, 30, 66, 0.31);
  --shadow-card-hover: 0 4px 8px rgba(9, 30, 66, 0.15), 0 0 1px rgba(9, 30, 66, 0.31);
  --shadow-overlay: 0 8px 24px rgba(9, 30, 66, 0.2);
  --shadow-modal: 0 12px 32px rgba(9, 30, 66, 0.25);

  --scrollbar-thumb: #c1c7d0;
  --scrollbar-track: rgba(0, 0, 0, 0.05);
}