/* =============================================================================
   Rogal Player — Design Tokens (single source of truth)
   Netflix-style: neutral dark base + ONE restrained warm-gold accent.
   Loaded FIRST on every page. Legacy var names are aliased in style.css so the
   whole app cascades onto these tokens; hardcoded hex are swept page-by-page.
   To switch the accent (e.g. to Netflix-red) change only the --accent* values.
   ============================================================================= */
:root {
    /* ---- Base / surface (neutral grays, content-first) ---- */
    --bg-base: #0B0B0F;          /* app background */
    --bg-surface: #15151C;       /* cards / panels */
    --bg-elevated: #1F1F29;      /* raised surfaces, menus */
    --bg-overlay: rgba(0, 0, 0, 0.72); /* scrims behind modals */

    /* ---- Text ---- */
    --text-hi: #ffffff;
    --text-med: rgba(255, 255, 255, 0.72);
    --text-low: rgba(255, 255, 255, 0.50);
    --text-disabled: rgba(255, 255, 255, 0.34);

    /* ---- Accent (single brand accent + states) ---- */
    --accent: #E5A94F;
    --accent-hover: #F0BB68;
    --accent-active: #C9882F;
    --accent-contrast: #0B0B0F;  /* text/icon on top of accent fills */
    --accent-tint-08: rgba(229, 169, 79, 0.08);
    --accent-tint-16: rgba(229, 169, 79, 0.16);
    --accent-glow: rgba(229, 169, 79, 0.45);

    /* ---- Semantic ---- */
    --success: #3FB984;
    --danger: #E5484D;
    --warning: #E5A94F;
    --info: #5B9BD5;

    /* ---- Borders ---- */
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.16);
    --border-accent: rgba(229, 169, 79, 0.40);

    /* ---- Typography (ONE primary) ---- */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Outfit', var(--font-sans);
    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-md: 1rem;
    --fs-lg: 1.25rem;
    --fs-xl: 1.5rem;
    --fs-2xl: 2rem;
    --fs-3xl: 3rem;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --lh-tight: 1.15;
    --lh-normal: 1.5;

    /* ---- Spacing (4px scale) ---- */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;
    --sp-12: 3rem;
    --sp-16: 4rem;

    /* ---- Radii ---- */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 16px;
    --r-xl: 24px;
    --r-pill: 999px;

    /* ---- Elevation (4 levels) ---- */
    --e1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --e2: 0 4px 12px rgba(0, 0, 0, 0.45);
    --e3: 0 12px 32px rgba(0, 0, 0, 0.5);
    --e4: 0 24px 64px rgba(0, 0, 0, 0.6);

    /* ---- Z-index scale ---- */
    --z-base: 0;
    --z-nav: 1000;
    --z-overlay: 2000;
    --z-modal: 3000;
    --z-toast: 4000;
    --z-lock: 10050;

    /* ---- Motion ---- */
    --dur-fast: 0.15s;
    --dur-med: 0.25s;
    --dur-slow: 0.4s;
    --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);

    /* Standard nav offset for the top-bar layout (Phase 2 uses this) */
    --nav-height: 64px;
}

/* Respect reduced-motion globally. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}