/* css/variables.css */
:root {
  /* Color Palette - Default Light Creamy Theme */
  --bg-main: #faf7f2;
  --text-main: #2d2724;
  --text-muted: #6e665e;
  --card-bg: #ffffff;
  --card-border: #e6e0d4;
  --card-shadow: 0 4px 20px -2px rgba(45, 39, 36, 0.06), 0 2px 6px -1px rgba(0, 0, 0, 0.03);
  
  --stat-box-bg: #f4efe6;
  --stat-box-border: #dfd7c8;
  --stat-box-text: #2d2724;
  
  --input-bg: #ffffff;
  --input-border: #dfd7c8;
  --input-text: #2d2724;
  
  --header-bg: rgba(255, 255, 255, 0.85);
  --header-border: #e6e0d4;
  
  /* Accent Colors */
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-secondary: #4f46e5;
  
  /* Status Colors */
  --color-success: #10b981; /* Green for ≥80% ratio */
  --color-danger: #ef4444;  /* Red for <80% ratio */
  --color-inactive: #e2dcd2;/* Soft cream-grey for inactive calendar days */
  --color-active: #2563eb;  /* Blue for active calendar days */
  
  /* Typography - Scaled Up Bold & Crystal Clear */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-code: 'Fira Code', monospace;
  --font-size-xs: 15px;
  --font-size-small: 17px;
  --font-size-base: 18px;
  --font-size-large: 24px;
  --font-size-xl: 32px;
  
  /* Spacing & Padding */
  --spacing-xs: 6px;
  --spacing-sm: 12px;
  --spacing-md: 20px;
  --spacing-lg: 28px;
  --spacing-xl: 40px;
  
  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
}

/* Clean, Sleek GitHub / Linear Dark Theme */
html.dark, body.dark {
  --bg-main: #0d1117;
  --text-main: #f0f6fc;
  --text-muted: #8b949e;
  --card-bg: #161b22;
  --card-border: #30363d;
  --card-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  
  --stat-box-bg: #21262d;
  --stat-box-border: #30363d;
  --stat-box-text: #f0f6fc;
  
  --input-bg: #0d1117;
  --input-border: #30363d;
  --input-text: #f0f6fc;
  
  --header-bg: rgba(22, 27, 34, 0.9);
  --header-border: #30363d;
  
  --color-primary: #2f81f7;
  --color-primary-hover: #1f6feb;
  --color-secondary: #388bfd;
  
  --color-inactive: #21262d;
  --color-active: #2f81f7;
}