:root {
    /* Primary Colors */
    --color-primary: #22c55e;
    --color-primary-dark: #16a34a;
    --color-primary-light: #10b981;
    --color-secondary: #7c3aed;
    --color-secondary-light: #7c3aed;
    --color-accent: #22c55e;
    --color-accent-hover: #16a34a;
    
    /* Neutral Colors */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-black-light: #1a1a1a;
    --color-gray-dark: #1f2937;
    --color-gray-medium: #374151;
    --color-gray-light: #6b7280;
    --color-gray-lighter: #e5e7eb;
    
    /* Background Colors */
    --color-bg-dark: #0f172a;
    --color-bg-darker: #1e1b4b;
    --color-bg-light: #ffffff;
    --color-bg-secondary: #2a2a2a;
    
    /* Gradient Colors */
    --color-gradient-green: #059669;
    --color-gradient-teal: #16b981;
    --color-gradient-purple: #7c3aed;
    --color-header-overlay: rgba(26, 26, 26, 0.5);
    
    /* Semantic Colors */
    --color-nav-bg: rgba(255, 255, 255, 0.95);
    --color-mobile-menu-bg: rgba(255, 255, 255, 0.98);
    --color-navbar-text: #1f2937;
    --color-navbar-text-auth: #1f2937;
    --color-footer-bg: #1f2937;
    --color-footer-text: #ffffff;
    --color-footer-link: #d1d5db;
    --color-article-header-bg: linear-gradient(135deg, rgba(26, 26, 26, 0.5), rgba(42, 42, 42, 0.5));
    --color-article-text: #000000;
    --color-article-heading: #000000;
    
    /* Typography - Font Families */
    --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --font-mono: 'Courier New', Courier, monospace;
    
    /* Typography - Font Sizes */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    
    /* Typography - Font Weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    
    /* Typography - Line Heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.8;
    
    /* Article Styling */
    --article-header-height: 60vh;
    --article-header-height-mobile: 40vh;
    --article-max-width: 900px;
    --article-padding: 60px 40px;
    --article-padding-mobile: 40px 20px;
    --article-body-line-height: 1.8;
    --article-body-font-size: 1.05rem;
    --article-heading-h1-size: 2.5rem;
    --article-heading-h2-size: 2rem;
    --article-heading-h3-size: 1.5rem;
}