:root {
  /* Accent colors - Modern red with gradient support */
  --color-accent: #c41e3a;
  --color-accent-light: #e63950;
  --color-accent-dark: #8b1528;
  --color-accent-contrast: #ffffff;
  --color-accent-hover: #a1162f;
  --color-accent-gradient: linear-gradient(135deg, #c41e3a 0%, #e63950 100%);

  /* Background colors - Softer, more modern palette */
  --color-bg-page: #f8f9fa;
  --color-bg-header: #1a1d29;
  --color-bg-section: #ffffff;
  --color-bg-card: #ffffff;
  --color-bg-hover: #f1f3f5;

  /* Text colors - Better contrast */
  --color-text: #212529;
  --color-text-muted: #6c757d;
  --color-text-light: #adb5bd;
  --color-text-inverted: #ffffff;

  /* Link colors */
  --color-link: var(--color-accent);
  --color-link-hover: var(--color-accent-hover);

  /* Border colors - Softer borders */
  --color-border: #dee2e6;
  --color-border-muted: #e9ecef;
  --color-border-focus: var(--color-accent);

  /* Shadow system - Professional depth */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-accent: 0 4px 14px 0 rgba(196, 30, 58, 0.25);

  /* Border radius - Consistent rounded corners */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Font families */
  --font-family-body: "Roboto", "Helvetica Neue", Arial, sans-serif;
  --font-family-display: "Rajdhani", "Montserrat", "Arial Black", sans-serif;
  --font-family-logo: "Racing Sans One", "Rajdhani", cursive;
  --font-family-mono: "Roboto Mono", "Courier New", monospace;

  /* Font weights */
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Font sizes (responsive with clamp) */
  --fs-300: 0.875rem;
  --fs-400: 1rem;
  --fs-500: 1.125rem;
  --fs-600: 1.25rem;
  --fs-700: clamp(1.5rem, 2vw + 1rem, 2rem);
  --fs-800: clamp(1.875rem, 3vw + 1rem, 2.5rem);
  --fs-900: clamp(2.25rem, 4vw + 1rem, 3rem);

  /* Line heights */
  --lh-body: 1.6;
  --lh-heading: 1.2;

  /* Spacing scale */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  /* Layout tokens */
  --container-max: 1200px;
  --grid-gap: var(--space-md);

  /* Breakpoints */
  --bp-tablet: 768px;
  --bp-desktop: 1024px;

  /* Transitions - Smooth animations */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;
}

/* Dark Mode - Enhanced dark theme */
body.dark-mode {
  --color-bg-page: #0f1117;
  --color-bg-header: #0a0c10;
  --color-bg-section: #1a1d29;
  --color-bg-card: #1f2332;
  --color-bg-hover: #252937;

  --color-text: #e4e6eb;
  --color-text-muted: #9ca3af;
  --color-text-light: #6b7280;
  --color-text-inverted: #ffffff;

  --color-accent: #ff4757;
  --color-accent-light: #ff6b7a;
  --color-accent-dark: #ee3542;
  --color-accent-hover: #ff6b7a;
  --color-accent-gradient: linear-gradient(135deg, #ff4757 0%, #ff6b7a 100%);

  --color-border: #2d3441;
  --color-border-muted: #252937;
  --color-border-focus: var(--color-accent);

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4),
    0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4),
    0 4px 6px -2px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5),
    0 10px 10px -5px rgba(0, 0, 0, 0.4);
  --shadow-accent: 0 4px 14px 0 rgba(255, 71, 87, 0.3);
}