/* theme.css - Global color variables for Light & Dark mode */

/* :root { */
[data-theme="light"] {
    /* Light mode (default) */
    --header-bg: #ffffff;
    --bg-primary: #ffffff;
    --bg-secondary: #f9f9f9;
    --bg-dark: #0a0a0a;
    /* used in video section etc. */
    --text-primary: #111111;
    --text-secondary: #444444;
    --text-muted: #777777;
    --text-light: #ffffff;
    --accent: #2fa7ac;
    --accent-start: #2fa7ac;
    --accent-middle: #e8a71a;
    --accent-end: #ff8c00;
    --accent-dark: #0d47a1;
    --accent-hover: #60a5fa;
    --border: #dddddd;
    --border-light: rgba(0, 0, 0, 0.08);
    --border-video: rgba(255, 255, 255, 0.08);
    --border-input: #2fa7ac;
    --shadow-header: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-scrolled: 0 6px 25px rgba(0, 0, 0, 0.12);
    --shadow-card: 0 16px 60px rgba(0, 0, 0, 0.10);
    --shadow-hover: 0 28px 80px rgba(0, 0, 0, 0.18);
    --shadow-btn: 0 6px 20px rgba(0, 0, 0, 0.15);
    --shadow-btn-hover: 0 12px 32px rgba(0, 0, 0, 0.25);
    --shadow-social: 0 10px 25px rgba(26, 115, 232, 0.35);
    --shadow-video: 0 20px 60px rgba(0, 0, 0, 0.7);
    --glow-video: rgba(26, 115, 232, 0.22);
    --glow-strong: rgba(255, 221, 0, 0.62);
    --glow-medium: rgba(255, 140, 0, 0.45);
    --glow-light: rgba(255, 69, 0, 0.28);
    --glow-focus: rgba(26, 115, 232, 0.15);
    --card-bg: #ffffff;
    --footer-bg: #0f0f0f;
    --footer-text: #d0d0d0;
    --footer-link: #bbb;
    --text-heading: #111111;
    --btn-primary-bg: #000;
    --btn-primary-text: white;
    --btn-primary-hover: #111;
    --btn-secondary-bg: #d8d8d8;
    --btn-secondary-hover: #222;
    --btn-disabled-bg: #000000;
    --input-bg: #fdfdfd;
    --input-bg-focus: #fff;
    --success: #34a853;
    --warning: #fbbc05;
    --tag-bg: #e0e0e0;
    --logo-color: #2fa7ac;
    --social-bg: rgba(255, 255, 255, 0.06);
    --social-icon: #bbb;
    --social-icon-hover: white;
    --text-placeholder: #aaa;
}

[data-theme="dark"] {
    /* Dark mode overrides */
    --header-bg: #202020;
    --bg-primary: #202020;
    --bg-secondary: #1a1a1a;
    --bg-dark: #000000;
    --text-primary: #ffffff;
    --text-secondary: #d1d1d1;
    --text-muted: #888888;
    --text-light: #ffffff;
    --accent: #2fa7ac;
    --accent-start: #4adeb9;
    --accent-middle: #fbbf24;
    --accent-end: #f87171;
    --accent-dark: #3b82f6;
    --accent-hover: #93c5fd;
    --border: #333333;
    --border-light: rgba(255, 255, 255, 0.08);
    --border-video: rgba(255, 255, 255, 0.12);
    --border-input: #4b5563;
    --shadow-header: 0 4px 20px rgba(0, 0, 0, 0.5);
    --shadow-scrolled: 0 6px 25px rgba(0, 0, 0, 0.6);
    --shadow-card: 0 16px 60px rgba(0, 0, 0, 0.5);
    --shadow-hover: 0 28px 80px rgba(0, 0, 0, 0.7);
    --shadow-btn: 0 6px 20px rgba(0, 0, 0, 0.5);
    --shadow-btn-hover: 0 12px 32px rgba(0, 0, 0, 0.6);
    --shadow-social: 0 10px 25px rgba(96, 165, 250, 0.35);
    --shadow-video: 0 20px 60px rgba(0, 0, 0, 0.8);
    --glow-video: rgba(96, 165, 250, 0.25);
    --glow-strong: rgba(251, 191, 36, 0.4);
    --glow-medium: rgba(248, 113, 113, 0.3);
    --glow-light: rgba(59, 130, 246, 0.2);
    --glow-focus: rgba(96, 165, 250, 0.25);
    --card-bg: #1e1e1e;
    --footer-bg: #111111;
    --footer-text: #d0d0d0;
    --footer-link: #cccccc;
    --text-heading: #ffffff;
    --btn-primary-bg: #ffffff;
    --btn-primary-text: #000000;
    --btn-primary-hover: #e0e0e0;
    --btn-secondary-bg: #333333;
    --btn-secondary-hover: #444444;
    --btn-disabled-bg: #444444;
    --input-bg: #1f2937;
    --input-bg-focus: #111827;
    --success: #4ade80;
    --warning: #fbbf24;
    --tag-bg: #374151;
    --logo-color: #2fa7ac;
    --social-bg: rgba(255, 255, 255, 0.08);
    --social-icon: #cccccc;
    --social-icon-hover: #ffffff;
    --text-placeholder: #9ca3af;
}

/* Respect system preference (optional but recommended) */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        /* Light mode (default) */
        --header-bg: #ffffff;
        --bg-primary: #ffffff;
        --bg-secondary: #f9f9f9;
        --bg-dark: #0a0a0a;
        /* used in video section etc. */
        --text-primary: #111111;
        --text-secondary: #444444;
        --text-muted: #777777;
        --text-light: #ffffff;
        --accent: #2fa7ac;
        --accent-start: #2fa7ac;
        --accent-middle: #e8a71a;
        --accent-end: #ff8c00;
        --accent-dark: #0d47a1;
        --accent-hover: #60a5fa;
        --border: #dddddd;
        --border-light: rgba(0, 0, 0, 0.08);
        --border-video: rgba(255, 255, 255, 0.08);
        --border-input: #2fa7ac;
        --shadow-header: 0 4px 20px rgba(0, 0, 0, 0.08);
        --shadow-scrolled: 0 6px 25px rgba(0, 0, 0, 0.12);
        --shadow-card: 0 16px 60px rgba(0, 0, 0, 0.10);
        --shadow-hover: 0 28px 80px rgba(0, 0, 0, 0.18);
        --shadow-btn: 0 6px 20px rgba(0, 0, 0, 0.15);
        --shadow-btn-hover: 0 12px 32px rgba(0, 0, 0, 0.25);
        --shadow-social: 0 10px 25px rgba(26, 115, 232, 0.35);
        --shadow-video: 0 20px 60px rgba(0, 0, 0, 0.7);
        --glow-video: rgba(26, 115, 232, 0.22);
        --glow-strong: rgba(255, 221, 0, 0.62);
        --glow-medium: rgba(255, 140, 0, 0.45);
        --glow-light: rgba(255, 69, 0, 0.28);
        --glow-focus: rgba(26, 115, 232, 0.15);
        --card-bg: #ffffff;
        --footer-bg: #0f0f0f;
        --footer-text: #d0d0d0;
        --footer-link: #bbb;
        --text-heading: #111111;
        --btn-primary-bg: #000;
        --btn-primary-text: white;
        --btn-primary-hover: #111;
        --btn-secondary-bg: #d8d8d8;
        --btn-secondary-hover: #222;
        --btn-disabled-bg: #000000;
        --input-bg: #fdfdfd;
        --input-bg-focus: #fff;
        --success: #34a853;
        --warning: #fbbc05;
        --tag-bg: #e0e0e0;
        --logo-color: #2fa7ac;
        --social-bg: rgba(255, 255, 255, 0.06);
        --social-icon: #bbb;
        --social-icon-hover: white;
        --text-placeholder: #aaa;
    }
}
/* @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --header-bg: #202020;
        --bg-primary: #202020;
        --bg-primary-a: #202020;
        --bg-secondary: #1a1a1a;
        --text-primary: #000000;
        --text-secondary: #d6d6d6;
        --text-muted: #888888;
        --accent: #2fa7ac;
        --accent-start: #4ade80;
        --accent-middle: #fbbf24;
        --accent-end: #f87171;
        --border: #333333;
        --shadow-header: 0 4px 20px rgba(0, 0, 0, 0.5);
        --shadow-scrolled: 0 6px 25px rgba(0, 0, 0, 0.6);
        --shadow-card: 0 16px 60px rgba(0, 0, 0, 0.5);
        --shadow-hover: 0 28px 80px rgba(0, 0, 0, 0.7);
        --card-bg: #1e1e1e;
        --footer-bg: #111111;
        --footer-text: #d0d0d0;
        --btn-primary-bg: #ffffff;
        --btn-primary-text: #000000;
        --btn-primary-hover: #e0e0e0;
    }
} */