:root {
  /* Colors - Light Theme (Default fallback) */
  --color-primary: #00daf3;
  --color-primary-fixed: #9cf0ff;
  --color-primary-dim: #00daf3;
  --color-primary-container: #00e5ff;
  --color-on-primary: #00363d;
  --color-on-primary-container: #00626e;
  
  --color-secondary: #c6c6c7;
  --color-on-secondary: #2f3131;
  --color-secondary-container: #454747;
  --color-on-secondary-container: #b4b5b5;

  --color-tertiary: #f0ecec;
  --color-on-tertiary: #313030;
  
  --color-error: #ffb4ab;
  --color-on-error: #690005;
  --color-error-container: #93000a;
  --color-on-error-container: #ffdad6;
  
  --color-background: #ffffff;
  --color-on-background: #131313;
  --color-surface: #ffffff;
  --color-on-surface: #131313;
  --color-surface-variant: #e5e2e1;
  --color-on-surface-variant: #353535;
  --color-outline: #849396;
  
  --color-inverse-surface: #131313;
  --color-inverse-on-surface: #e5e2e1;

  /* Typography */
  --font-display: 'Poppins', sans-serif;
  --font-body: 'Poppins', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Font Sizes */
  --text-display-lg: 72px;
  --text-headline-lg: 48px;
  --text-headline-mobile: 32px;
  --text-body-lg: 18px;
  --text-body-md: 16px;
  --text-label-sm: 12px;

  /* Line Heights */
  --lh-display-lg: 80px;
  --lh-headline-lg: 56px;
  --lh-headline-mobile: 40px;
  --lh-body-lg: 28px;
  --lh-body-md: 24px;
  --lh-label-sm: 16px;

  /* Spacing */
  --spacing-base: 8px;
  --spacing-gutter: 24px;
  --spacing-margin-desktop: 80px;
  --spacing-margin-mobile: 20px;
  --max-width: 1440px;

  /* Border Radius */
  --radius-sm: 0.125rem;
  --radius-md: 0.25rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  
  /* Accent Colors for Do It Digital */
  --color-accent-cyan: #00daf3;
}

/* Dark Theme overrides (Charcoal Style) */
.dark, :root {
  --color-background: #141517;
  --color-on-background: #f8fafc;
  --color-surface: #1b1d1f;
  --color-on-surface: #f1f5f9;
  --color-surface-dim: #18191b;
  --color-surface-bright: #242628;
  --color-surface-container-lowest: #101112;
  --color-surface-container-low: #141517;
  --color-surface-container: #1b1d1f;
  --color-surface-container-high: #242628;
  --color-surface-container-highest: #2d3033;
  --color-surface-variant: #242628;
  --color-on-surface-variant: #9ba0a6;
  
  --color-primary: #28c7cb;
  --color-on-primary: #000000;
  
  --color-border: rgba(255, 255, 255, 0.08);
  --color-muted: #9ba0a6;
}