:root {
  /* Brand & Core Theme Colors */
  --yt-red: #FF0000;
  --yt-red-hover: #D90000;
  --yt-blue: #065FD4;
  --yt-blue-hover: #0056B3;
  
  --bg-primary: #F9F9F9;
  --bg-surface: #FFFFFF;
  --bg-surface-hover: #F2F2F2;
  --bg-surface-active: #E5E5E5;
  --bg-secondary: #F4F4F4;
  
  --border-color: #E5E5E5;
  --border-subtle: #EEEEEE;
  --border-dark: #CCCCCC;
  
  --text-primary: #0F0F0F;
  --text-secondary: #606060;
  --text-muted: #909090;
  --text-inverse: #FFFFFF;
  
  --green-success: #168A45;
  --green-bg: #EAF7ED;
  --purple-badge: #9333EA;
  --amber-warning: #D97706;
  --red-error: #DC2626;
  
  /* Dimensions & Spacing System */
  --header-height: 56px;
  --sidebar-width: 240px;
  --sidebar-collapsed-width: 72px;
  --bottom-nav-height: 60px;
  --content-max-width: 1440px;
  
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 9999px;
  
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
  
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  
  --z-header: 100;
  --z-sidebar: 90;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;
}

[data-theme="dark"] {
  --bg-primary: #0F0F0F;
  --bg-surface: #212121;
  --bg-surface-hover: #383838;
  --bg-surface-active: #4C4C4C;
  --bg-secondary: #181818;
  
  --border-color: #383838;
  --border-subtle: #2A2A2A;
  --border-dark: #505050;
  
  --text-primary: #F1F1F1;
  --text-secondary: #AAAAAA;
  --text-muted: #717171;
  --text-inverse: #0F0F0F;
}