/* Global Color Theme */
:root {
    /* Background gradients */
    --bg-gradient-start: #f5f5f0;
    --bg-gradient-end: #e8e5f0;

    /* Text colors */
    --text-primary: #1a202c;
    --text-secondary: #4a5568;
    --text-muted: #718096;
    --text-light: #a0aec0;

    /* Accent colors */
    --accent-primary: #667eea;

    /* Border colors */
    --border-light: #e2e8f0;

    /* Background colors */
    --bg-white: white;
    --bg-white-overlay: rgba(255, 255, 255, 0.9);

    /* Shadow colors */
    --shadow-sm: rgba(0, 0, 0, 0.1);
    --shadow-md: rgba(0, 0, 0, 0.15);
    --shadow-lg: rgba(0, 0, 0, 0.2);
    --shadow-xl: rgba(0, 0, 0, 0.3);

    /* Font sizes (1rem = 16px) */
    --font-xs: 0.75rem; /* 12px */
    --font-sm: 0.875rem; /* 14px */
    --font-base: 1rem; /* 16px */
    --font-lg: 1.125rem; /* 18px */
    --font-xl: 1.75rem; /* 28px */
    --font-2xl: 2rem; /* 32px */
    --font-3xl: 3rem; /* 48px */
}

/* Tablet breakpoint */
@media (min-width: 480px) and (max-width: 769px) {
    html {
        font-size: 22px; /* Increases rem base from 16px to 18px */
    }
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    :root {
        /* Background gradients */
        --bg-gradient-start: #1a1a2e;
        --bg-gradient-end: #16213e;

        /* Text colors */
        --text-primary: #f7fafc;
        --text-secondary: #e2e8f0;
        --text-muted: #cbd5e0;
        --text-light: #a0aec0;

        /* Accent colors */
        --accent-primary: #818cf8;

        /* Border colors */
        --border-light: #2d3748;

        /* Background colors */
        --bg-white: #1f2937;
        --bg-white-overlay: rgba(31, 41, 55, 0.95);

        /* Shadow colors */
        --shadow-sm: rgba(0, 0, 0, 0.3);
        --shadow-md: rgba(0, 0, 0, 0.4);
        --shadow-lg: rgba(0, 0, 0, 0.5);
        --shadow-xl: rgba(0, 0, 0, 0.6);
    }
}