/*
 * Theme System - Light & Dark Mode
 * CSS Custom Properties for consistent theming
 */

/* Default: Dark Theme */
:root,
[data-theme="dark"] {
    --bg-primary: #0d0f14;
    --bg-secondary: #161925;
    --bg-tertiary: #1e2130;
    --bg-elevated: rgba(99, 102, 241, 0.05);

    --text-primary: #ffffff;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;

    --accent-primary: #6467f2;
    --accent-hover: #5558e3;
    --accent-light: rgba(100, 103, 242, 0.1);
    --accent-border: rgba(100, 103, 242, 0.2);

    --border-subtle: rgba(100, 103, 242, 0.1);
    --border-default: rgba(100, 103, 242, 0.2);

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.3);
    --shadow-glow: 0 0 20px rgba(100, 103, 242, 0.1);

    --backdrop-blur: blur(12px);

    /* Status colors */
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-error: #ef4444;
    --color-info: #3b82f6;

    /* Special colors */
    --color-red: #ef4444;
    --color-pink: #ec4899;
    --color-emerald: #10b981;
    --color-amber: #f59e0b;
}

/* Light Theme */
[data-theme="light"] {
    --bg-primary: #f6f6f8;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f1f5f9;
    --bg-elevated: rgba(99, 102, 241, 0.03);

    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;

    --accent-primary: #6467f2;
    --accent-hover: #5558e3;
    --accent-light: rgba(100, 103, 242, 0.1);
    --accent-border: rgba(100, 103, 242, 0.3);

    --border-subtle: rgba(100, 103, 242, 0.1);
    --border-default: rgba(100, 103, 242, 0.2);

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
    --shadow-glow: 0 0 20px rgba(100, 103, 242, 0.15);

    --backdrop-blur: blur(12px);

    /* Status colors */
    --color-success: #059669;
    --color-warning: #d97706;
    --color-error: #dc2626;
    --color-info: #2563eb;

    /* Special colors (same in both themes) */
    --color-red: #ef4444;
    --color-pink: #ec4899;
    --color-emerald: #10b981;
    --color-amber: #f59e0b;
}

/* Smooth theme transition */
html,
body,
nav,
section,
footer,
.navbar,
.hero,
.about-section,
.connect-section,
.bento-card,
.social-card,
.btn {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Respect user's system preference as fallback */
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        --bg-primary: #f6f6f8;
        --bg-secondary: #ffffff;
        --bg-tertiary: #f1f5f9;
        --bg-elevated: rgba(99, 102, 241, 0.03);

        --text-primary: #0f172a;
        --text-secondary: #475569;
        --text-muted: #64748b;

        --accent-primary: #6467f2;
        --accent-hover: #5558e3;
        --accent-light: rgba(100, 103, 242, 0.1);
        --accent-border: rgba(100, 103, 242, 0.3);

        --border-subtle: rgba(100, 103, 242, 0.1);
        --border-default: rgba(100, 103, 242, 0.2);

        --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
        --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
        --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
        --shadow-glow: 0 0 20px rgba(100, 103, 242, 0.15);
    }
}