:root {
   color-scheme: light dark;

   
   --font-display: 'Inter', system-ui, sans-serif;
   --font-body: 'Inter', system-ui, sans-serif;
   --font-mono: ui-monospace, 'SFMono-Regular', Consolas, monospace;

   --font-light: 300;
   --font-regular: 400;
   --font-medium: 500;
   --font-semibold: 600;
   --font-bold: 700;

   --text-xs: 11px;
   --text-sm: 12px;
   --text-base: 14px;
   --text-md: 16px;
   --text-lg: 18px;
   --text-xl: 20px;
   --text-2xl: 24px;
   --text-3xl: 32px;
   --text-4xl: 40px;

   
   --space-1: 4px;
   --space-2: 8px;
   --space-3: 12px;
   --space-4: 16px;
   --space-5: 20px;
   --space-6: 24px;
   --space-8: 32px;
   --space-10: 40px;
   --space-12: 48px;
   --space-16: 64px;

   
   --sidebar-width: 240px;
   --sidebar-collapsed: 68px;
   --header-height: 52px;
   --content-max-width: 900px;
   --table-row-height: 42px;

   
   --radius-sm: 3px;
   --radius-md: 4px;
   --radius-lg: 8px;
   --radius-xl: 12px;
   --radius-full: 9999px;

   
   --transition-fast: 60ms ease;
   --transition-base: 120ms ease;
   --transition-slow: 200ms ease;
   --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

   

   
   --bg-primary: light-dark(#ffffff, #161a1f);
   --bg-secondary: light-dark(#f7f6f3, #1e2228);

   
   --text-primary: light-dark(#37352f, #f2f2f2);
   --text-secondary: light-dark(#787774, #aeb4be);
   --text-muted: light-dark(#9b9a97, #6c717a);

   
   --border: light-dark(#e9e9e7, #2d333b);
   --border-focus: var(--primary);

   
   --primary: hsl(39 97% 61%);
   
   --secondary: hsl(35 90% 52%);
   
   --primary-raw: 39 97% 61%;
   --secondary-raw: 35 90% 52%;

   
   --primary-hover: light-dark(#303030, #f3f4f6);

   
   --success: light-dark(hsl(142 76% 36%), hsl(142 70% 45%));
   --destructive: light-dark(hsl(0 84% 60%), hsl(0 80% 60%));

   
   --accent-red: #E16259;
   --accent-orange: #D9730D;
   --accent-yellow: #DFAB01;
   --accent-green: #4DAB9A;
   --accent-blue: #2383E2;
   --accent-purple: #9065B0;

   
   --status-not-started: var(--text-secondary);
   --status-not-started-bg: var(--bg-secondary);
   --status-planning: #D9730D;
   --status-planning-bg: var(--bg-secondary);
   --status-in-progress: #2383E2;
   --status-in-progress-bg: color-mix(in srgb, var(--primary) 15%, transparent);
   --status-complete: #0F7B6C;
   --status-complete-bg: color-mix(in srgb, var(--success) 15%, transparent);

   
   --gradient-primary: linear-gradient(135deg, var(--primary), var(--secondary));

   
   --glow-start: light-dark(hsl(39 97% 61% / 0.4), hsl(39 97% 61% / 0.3));
   --glow-end: light-dark(hsl(35 90% 52% / 0.4), hsl(35 90% 52% / 0.3));
   --gradient-glow: linear-gradient(135deg, var(--glow-start), var(--glow-end));

   
   --shadow-sm: 0 1px 3px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.3));
   --shadow-md: 0 4px 16px light-dark(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.4));
   --shadow-lg: 0 0 0 1px light-dark(rgba(55, 53, 47, 0.09), rgba(255, 255, 255, 0.06)),
      0 4px 12px light-dark(rgba(55, 53, 47, 0.12), rgba(0, 0, 0, 0.5));
   --shadow-glow: 0 0 20px 0 light-dark(hsl(39 97% 61% / 0.2), hsl(39 97% 61% / 0.15));

   

   
   --item-hover: light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.10));

   
   --bg-card: var(--bg-primary);
   --color-bg-primary: var(--bg-primary);
   --color-bg-secondary: var(--bg-secondary);
   --color-bg-backdrop: light-dark(rgba(255, 255, 255, 0.50), rgba(40, 40, 40, 0.25));
   --color-bg-tertiary: var(--bg-secondary);
   --color-bg-card: var(--bg-primary);
   --color-text-primary: var(--text-primary);
   --color-text-secondary: var(--text-secondary);
   --color-text-tertiary: var(--text-muted);
   --color-border: var(--border);
   --color-primary: var(--primary);
   --color-primary-hover: var(--primary-hover);
   --color-primary-light: color-mix(in srgb, var(--primary) 15%, transparent);
   --focus-color: var(--border-focus);
   --theme-primary: var(--primary);
   --theme-bg-primary: var(--bg-primary);
   --theme-bg-secondary: var(--bg-secondary);
   --theme-border: var(--border);
   --theme-success: var(--success);
}

:root[data-theme="light"] {
   color-scheme: light;
}

:root[data-theme="dark"] {
   color-scheme: dark;
}