:root {
    /* ===== COLORS ===== */
    --color-primary: #007bff;
    --color-primary-light: #00c6ff;
    --color-dark: #222;
    --color-text: #333;
    --color-background: #ffffff;
    --color-muted: #f4f4f4;
    --color-success: #28a745;
    --color-error: #dc3545;
  
    /* ===== TYPOGRAPHY ===== */
    --font-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-size-base: 1rem;
    --font-size-sm: 0.875rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 2rem;
    --font-size-xxl: 3rem;
  
    /* ===== SPACING ===== */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 32px;
    --space-xl: 64px;
  
    /* ===== LAYOUT ===== */
    --max-width: 1000px;
    --border-radius: 4px;
  
    /* ===== SHADOWS ===== */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.15);
  
    /* ===== TRANSITIONS ===== */
    --transition-fast: 0.2s ease-in-out;
    --transition-base: 0.3s ease;
  }