/* CSS Custom Properties (Variables) */
:root {
    /* Brand Colors */
    --green-lightest: #f0f9f4;
    --green-light: #8ed5ab;
    --green-medium: #01ac6a;
    --green-dark: #00833f;
    --green-darker: #1c5c39;
    --blue-lightest: #f0f6ff;
    --blue-light: #a3c4ef;
    --blue-medium: #397bc9;
    --blue-dark: #1b25ab;
    --blue-darker: #071e61;
    --purple-lightest: #f5f0ff;
    --purple-light: #ba9fef;
    --purple-medium: #8b5cf6;
    --purple-dark: #6d28d9;
    --purple-darker: #4c1d95;

    /* Theme Colors - Light Theme Default */
    --bg-color: #fdfdfd;
    --bg-secondary: rgba(248, 249, 250, 0.8);
    --bg-tertiary: rgba(241, 243, 244, 0.6);
    --text-color: #4a5568;
    --text-secondary: #4a5568;
    --text-muted: #718096;
    --accent-color: var(--green-medium);
    --cta-color: var(--blue-medium);
    --success-color: var(--green-medium);
    --warning-color: #ffd700;
    --border-color: rgba(226, 232, 240, 0.8);
    --border-light: rgba(241, 245, 249, 0.6);

    /* Enhanced Light Background with Gradient */
    --bg-gradient-light: linear-gradient(135deg,
            #fdfdfd 0%,
            rgba(240, 249, 244, 0.4) 25%,
            rgba(240, 246, 255, 0.4) 50%,
            rgba(240, 249, 244, 0.3) 75%,
            #fdfdfd 100%);
    --bg-gradient-hero: linear-gradient(135deg,
            rgba(142, 213, 171, 0.05) 0%,
            rgba(163, 196, 239, 0.05) 50%,
            rgba(142, 213, 171, 0.03) 100%);

    /* Spacing System */
    --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 */
    --spacing-5xl: 4rem;
    /* 64px */

    /* Typography Scale */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'Source Code Pro', 'Fira Code', Consolas, monospace;
    --font-size-xs: 0.75rem;
    /* 12px */
    --font-size-sm: 0.825rem;
    /* 13px */
    --font-size-base: 0.9rem;
    /* 14.4px */
    --font-size-md: 0.95rem;
    /* 15.2px */
    --font-size-lg: 1rem;
    /* 16px */
    --font-size-xl: 1.125rem;
    /* 18px */
    --font-size-2xl: 1.25rem;
    /* 20px */
    --font-size-3xl: 1.5rem;
    /* 24px */
    --font-size-4xl: 1.875rem;
    /* 30px */
    --font-size-5xl: 2.25rem;
    /* 36px */

    /* Layout */
    --container-max: 1100px;
    --container-padding: var(--spacing-3xl);
    --card-padding: var(--spacing-2xl);
    --section-padding: var(--spacing-5xl);

    /* Enhanced Shadows */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px 0 rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
    --shadow-card: 0 2px 4px -1px rgba(142, 213, 171, 0.1), 0 1px 2px -1px rgba(163, 196, 239, 0.1);
    --shadow-elevated: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* Card Styling */
    --card-bg: rgba(255, 255, 255, 0.9);
    --card-border: 1px solid var(--border-color);
    --border-radius: 12px;

    /* Enhanced Gradients */
    --gradient-primary: linear-gradient(135deg, var(--green-light) 0%, var(--green-medium) 100%);
    --gradient-secondary: linear-gradient(135deg, var(--blue-light) 0%, var(--blue-medium) 100%);
    --gradient-accent: linear-gradient(135deg, var(--green-medium) 0%, var(--blue-medium) 100%);

    /* Background Patterns */
    --bg-pattern-light:
        radial-gradient(circle at 20% 80%, rgba(142, 213, 171, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(163, 196, 239, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(142, 213, 171, 0.04) 0%, transparent 50%);

    /* Skills Section Variables */
    --hover-bg: rgba(0, 0, 0, 0.05);
    --shadow-hover: 0 10px 25px rgba(0, 0, 0, 0.15);
    --card-bg: var(--bg-color);
    --shadow: var(--shadow-card);
}

/* Dark Theme Variables */
[data-theme="dark"] {
    --bg-color: #0a0a0a;
    --bg-secondary: #111111;
    --bg-tertiary: #1a1a1a;
    --text-color: #f7fafc;
    --text-secondary: #cbd5e0;
    --text-muted: #a0aec0;
    --accent-color: var(--green-light);
    --cta-color: var(--blue-light);
    --success-color: var(--green-light);
    --border-color: #2d3748;
    --border-light: #1a202c;
    --shadow-xs: 0 1px 2px 0 rgba(255, 255, 255, 0.025);
    --shadow-sm: 0 1px 3px 0 rgba(255, 255, 255, 0.1), 0 1px 2px 0 rgba(255, 255, 255, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(255, 255, 255, 0.1), 0 2px 4px -1px rgba(255, 255, 255, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(255, 255, 255, 0.1), 0 4px 6px -2px rgba(255, 255, 255, 0.05);
    --shadow-card: 0 2px 4px -1px rgba(255, 255, 255, 0.1), 0 1px 2px -1px rgba(255, 255, 255, 0.05);
    --shadow-elevated: 0 20px 25px -5px rgba(255, 255, 255, 0.15), 0 10px 10px -5px rgba(255, 255, 255, 0.1);

    /* Card Styling - Dark Theme */
    --card-bg: rgba(17, 17, 17, 0.9);
    --card-border: 1px solid var(--border-color);

    /* Dark theme reverts to simple patterns */
    --bg-pattern-light: radial-gradient(circle at 25% 25%, rgba(142, 213, 171, 0.01) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(163, 196, 239, 0.01) 0%, transparent 50%);

    /* Dark theme skills variables */
    --hover-bg: rgba(255, 255, 255, 0.05);
    --shadow-hover: 0 10px 25px rgba(0, 0, 0, 0.3);
    --card-bg: var(--bg-secondary);
    --shadow: var(--shadow-card);
}