:root {
    // ==================== COLORS ====================

    // Primary Colors
    --primary-color: #42a5f5;
    --primary-hover: #1e88e5;
    --primary-light: #e3f2fd;
    --primary-bg: #f5fbff;

    // Text Colors
    --text-primary: #232323;
    --text-secondary: #5a5a5a;
    --text-muted: #8b8b8b;
    --text-light: #ffffff;

    // Background Colors
    --bg-gradient-start: #f0f8ff;
    --bg-gradient-end: #e3f2fd;
    --bg-white: #ffffff;
    --bg-light: #f8fcff;
    --bg-hover: #e3f2fd;

    // Border Colors
    --border-light: #e3f2fd;
    --border-color: #e8f4fc;
    --border-primary: #42a5f5;

    // Status Colors
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --error-color: #ef4444;
    --info-color: #42a5f5;

    // ==================== SPACING ====================

    --spacing-xs: 0.25rem; // 4px
    --spacing-sm: 0.5rem; // 8px
    --spacing-md: 0.75rem; // 12px
    --spacing-lg: 1rem; // 16px
    --spacing-xl: 1.5rem; // 24px
    --spacing-2xl: 2rem; // 32px
    --spacing-3xl: 2.5rem; // 40px
    --spacing-4xl: 3rem; // 48px

    // ==================== BORDER RADIUS ====================

    --radius-sm: 4px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    // ==================== BOX SHADOWS ====================

    --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.15);
    --shadow-primary: 0 4px 12px rgba(66, 165, 245, 0.25);
    --shadow-secondary: 0 4px 12px rgba(255, 149, 0, 0.25);

    // ==================== TRANSITIONS ====================

    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-all: all 0.3s ease;

    // ==================== TYPOGRAPHY ====================

    // Font Families
    --font-primary:
        --apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-mono: 'Courier New', monospace;

    // Font Sizes
    --font-xs: 0.75rem; // 12px
    --font-sm: 0.85rem; // 13.6px
    --font-base: 0.9rem; // 14.4px
    --font-md: 0.95rem; // 15.2px
    --font-lg: 1rem; // 16px
    --font-xl: 1.1rem; // 17.6px
    --font-2xl: 1.2rem; // 19.2px
    --font-3xl: 1.5rem; // 24px
    --font-4xl: 2rem; // 32px

    // Font Weights
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    // Line Heights
    --leading-tight: 1.2;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;

    // Letter Spacing
    --tracking-tight: -1px;
    --tracking-normal: 0;
    --tracking-wide: 0.5px;
    --tracking-wider: 1px;

    // ==================== COMPONENTS SPECIFIC ====================

    // Card
    --card-padding: var(--spacing-2xl);
    --card-padding-mobile: var(--spacing-xl);
    --card-radius: var(--radius-xl);
    --card-shadow: var(--shadow-md);
    --card-shadow-hover: var(--shadow-lg);

    // Button
    --btn-padding-y: 0.75rem;
    --btn-padding-x: 1rem;
    --btn-radius: var(--radius-sm);

    // Tabs
    --tabs-height: 3px;
    --tabs-padding: 12px 20px;
    --tabs-padding-mobile: 10px 16px;
}
