/**
 * CSS Variables - Design tokens for the application
 * Contains color palette, spacing, and typography variables.
 *
 * Dark mode is the default (applied on :root). Light mode is applied when
 * <html data-theme="light"> is set by static/js/theme.js.
 */

:root {
    /* Background colors */
    --bg-primary: #0f0f0f;
    --bg-secondary: #1a1a1a;
    --bg-tertiary: #272727;

    /* Text colors */
    --text-primary: #f1f1f1;
    --text-secondary: #aaaaaa;

    /* Accent colors. YouTube's red is a pure #ff0000; the previous #ff0033 read
       as pink next to it. */
    --accent-red: #ff0000;
    --accent-red-hover: #cc0000;
    --accent-red-light: #ff6b6b;

    /* Border colors */
    --border-color: #3f3f3f;

    /* --- YouTube-style surfaces ------------------------------------------
       YouTube keeps the page flat (#0f0f0f) and raises only chips and the
       description box. These are separate from --bg-secondary/--bg-tertiary so
       the admin screens keep their card look. */
    --yt-surface: #212121;      /* description box, menus */
    --yt-chip: #272727;         /* pill buttons, thumbnails placeholders */
    --yt-chip-hover: #3f3f3f;   /* pill/button hover */
    --yt-hover: rgba(255, 255, 255, 0.1); /* icon button hover */
    --yt-border: #303030;
    --yt-play-red: #ff0000;     /* progress bar + play glyph */
    --yt-thumb-bg: #272727;

    /* Status colors */
    --success-green: #2ecc71;
    --error-red: #e74c3c;
    --info-blue: #3498db;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3);

    /* Border radius */
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;

    color-scheme: dark;
}

[data-theme="light"] {
    /* Background colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f8f8;
    --bg-tertiary: #ececec;

    /* Text colors */
    --text-primary: #0f0f0f;
    --text-secondary: #606060;

    /* Accent colors */
    --accent-red: #ff0000;
    --accent-red-hover: #cc0000;
    --accent-red-light: #ff5c7c;

    /* Border colors */
    --border-color: #dcdcdc;

    /* --- YouTube-style surfaces (light) ---------------------------------- */
    --yt-surface: #f9f9f9;
    --yt-chip: #f2f2f2;
    --yt-chip-hover: #e5e5e5;
    --yt-hover: rgba(0, 0, 0, 0.05);
    --yt-border: #e5e5e5;
    --yt-play-red: #ff0000;
    --yt-thumb-bg: #f2f2f2;

    /* Status colors */
    --success-green: #1f9d55;
    --error-red: #d64541;
    --info-blue: #2b7bb9;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.12);

    color-scheme: light;
}