/* Design tokens: light (default) + dark via html[data-theme] */

:root,
[data-theme="light"] {
    color-scheme: light;

    /* Brand */
    --color-brand: #862cfd;
    --color-brand-hover: #6d23d0;
    --color-brand-soft: #f3ebff;
    --color-brand-soft-border: #ddc4ff;
    --color-brand-alpha: rgb(134 44 253 / 12%);

    /* Surfaces */
    --color-bg: #f0f2f5;
    --color-surface: #ffffff;
    --color-surface-2: #f5f5f5;
    --color-surface-3: #eaeaea;
    --color-inverse: #111111;
    --color-inverse-text: #ffffff;

    /* Text */
    --color-text: #000000;
    --color-text-secondary: #444444;
    --color-text-muted: #787878;
    --color-icon: var(--color-text);

    /* Lines */
    --color-border: #dddddd;
    --color-border-strong: #c4c4c4;
    --color-overlay: rgb(0 0 0 / 45%);
    --ripple-color: rgb(0 0 0 / 10%);

    /* Semantic */
    --color-link: #007bff;
    --color-link-hover: #0056b3;
    --color-success: #3bb33b;
    --color-success-soft: #e8f5e9;
    --color-danger: #ff2222;
    --color-danger-soft: #ffe6e6;
    --color-warning: #fb8c00;
    --color-warning-soft: #fff8e0;
    --color-info: #2196f3;
    --color-info-soft: #e3f2fd;
    --color-accent-magenta: #cb11ab;

    /* Elevation / shape */
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 10%);
    --shadow-md: 0 3px 8px 1px rgb(0 0 0 / 15%);
    --radius-sm: 0.3rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-pill: 3rem;
    --font-sans: Roboto, system-ui, -apple-system, "Segoe UI", Ubuntu, Cantarell, "Noto Sans", sans-serif;
    --header-control-size: 40px;
    --touch-min: 44px;

    /* Type scale (override at ≤480 in responsive.css) */
    --fs-display: 1.75rem;
    --fs-h1: 1.5rem;
    --fs-h2: 1.25rem;
    --fs-h3: 1.1rem;
    --fs-body: 1rem;
    --fs-small: 0.875rem;

    /*
     * Breakpoints (Stage 0) — keep in sync with responsive.css / Bootstrap md:
     * --bp-xs: phones narrow (≤480)
     * --bp-sm: phones (≤575)
     * --bp-md: phones / small tablets (≤767) — primary mobile shell cutoff
     * --bp-lg: tablets (≤991)
     * QA widths: 360, 375, 390, 414, 768, 1024
     */
    --bp-xs: 480px;
    --bp-sm: 575px;
    --bp-md: 767px;
    --bp-lg: 991px;
    --mobile-nav-width: min(20rem, 88vw);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-top: env(safe-area-inset-top, 0px);

    /* Vendor */
    --plyr-color-main: var(--color-brand);
}

[data-theme="dark"] {
    color-scheme: dark;

    /* Brand — чуть светлее для контраста на тёмном фоне */
    --color-brand: #9b5cff;
    --color-brand-hover: #b07aff;
    --color-brand-soft: #2a1f3d;
    --color-brand-soft-border: #4a3a6a;
    --color-brand-alpha: rgb(155 92 255 / 18%);

    /* Surfaces */
    --color-bg: #121212;
    --color-surface: #1e1e1e;
    --color-surface-2: #2a2a2a;
    --color-surface-3: #333333;
    --color-inverse: #0a0a0a;
    --color-inverse-text: #ffffff;

    /* Text */
    --color-text: #f2f2f2;
    --color-text-secondary: #c8c8c8;
    --color-text-muted: #9a9a9a;
    --color-icon: var(--color-text);

    /* Lines */
    --color-border: #3a3a3a;
    --color-border-strong: #525252;
    --color-overlay: rgb(0 0 0 / 65%);
    --ripple-color: rgb(255 255 255 / 12%);

    /* Semantic */
    --color-link: #5eb1ff;
    --color-link-hover: #8ec9ff;
    --color-success: #4caf50;
    --color-success-soft: #1b2e1b;
    --color-danger: #ff6b6b;
    --color-danger-soft: #3a1518;
    --color-warning: #ffb74d;
    --color-warning-soft: #3a2a12;
    --color-info: #64b5f6;
    --color-info-soft: #1a2a3a;
    --color-accent-magenta: #e040c0;

    /* Elevation — мягче, без «грязных» чёрных теней */
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 45%);
    --shadow-md: 0 4px 16px rgb(0 0 0 / 55%);

    --plyr-color-main: var(--color-brand);
}