:root {
  /* ===== Colors ===== */
  --color-primary: #4a90e2;      /* Main brand color */
  --color-secondary: #f5a623;    /* Accent/secondary color */
  --color-accent: #50e3c2;       /* Highlight color */
  --color-background: #ffffff;   /* Page background */
  --color-surface: #f9f9f9;      /* Card/section background */
  --color-text: #333333;         /* Default text */
  --color-text-light: #666666;   /* Muted text */
  --color-border: #e0e0e0;       /* Border lines */
  --color-success: #27ae60;      /* Success state */
  --color-warning: #f39c12;      /* Warning state */
  --color-error: #e74c3c;        /* Error state */

  /* ===== Typography ===== */
  --font-main: 'Roboto', sans-serif;
  --font-heading: 'Montserrat', sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 2rem;
  --line-height: 1.6;

  /* ===== Spacing ===== */
  --spacing-xxs: 2px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* ===== Borders & Radius ===== */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 16px;
  --border-width: 1px;

  /* ===== Shadows ===== */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 20px rgba(0,0,0,0.15);

  /* ===== Transitions ===== */
  --transition-fast: 0.2s ease-in-out;
  --transition-medium: 0.4s ease-in-out;
  --transition-slow: 0.6s ease-in-out;

  /* ===== Layout ===== */
  --container-width: 1200px;
  --sidebar-width: 300px;
  --header-height: 70px;
  --footer-height: 60px;
}