/* ==========================================================================
   NEPHBOX DESIGN TOKENS
   --------------------------------------------------------------------------
   Single source of truth for colour, type, spacing, radii, elevation and
   motion. Load this FIRST, before components.css and any page stylesheet.

   Previously each page stylesheet carried its own :root block. Those copies
   had already drifted (--bg-dark was #121212 on some pages and #0d0d1a on
   others), so surfaces did not match between pages. Everything now resolves
   here.

   Legacy aliases are kept at the bottom of the colour section: the codebase
   grew two naming schemes (--primary vs --primary-color, --border vs
   --border-color) and both are still referenced across templates. The aliases
   let both spellings resolve to the same value, so no page regresses.
   ========================================================================== */

:root {
    /* ----------------------------------------------------------------------
       BRAND
       ---------------------------------------------------------------------- */
    --brand-300: #a988ff;
    --brand-400: #9a76f5;
    --brand-500: #8e63f3;   /* primary */
    --brand-600: #7a53e0;   /* accent / hover */
    --brand-700: #6742c4;

    --primary-color: var(--brand-500);
    --accent: var(--brand-600);

    /* Brand as raw channels, for rgba() composition without hardcoding.
       Use: rgba(var(--brand-rgb), 0.3) */
    --brand-rgb: 142, 99, 243;
    --accent-rgb: 122, 83, 224;

    /* ----------------------------------------------------------------------
       SURFACES
       Unified on the deeper #0d0d1a family, which sits better against the
       purple than the old #121212 and matches what login/admin already used.
       ---------------------------------------------------------------------- */
    --bg-dark: #0d0d1a;
    --bg-secondary: #16162a;
    --bg-tertiary: #1f1f38;
    --bg-hover: #252538;
    --bg-card: #1a1a2e;

    /* Page backdrop: layered brand glows over a deep gradient. Applied via
       the .app-backdrop utility in components.css. */
    --backdrop:
        radial-gradient(circle at 12% 18%, rgba(142, 99, 243, 0.22), transparent 42%),
        radial-gradient(circle at 88% 12%, rgba(66, 153, 225, 0.16), transparent 45%),
        radial-gradient(circle at 75% 85%, rgba(122, 83, 224, 0.18), transparent 48%),
        linear-gradient(135deg, #141225 0%, #15182e 50%, #0d1730 100%);

    /* ----------------------------------------------------------------------
       GLASS
       One recipe, used by every card/panel/modal so surfaces read as one
       material instead of per-page approximations.
       ---------------------------------------------------------------------- */
    --glass-bg: rgba(255, 255, 255, 0.045);
    --glass-bg-strong: rgba(255, 255, 255, 0.07);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-border-hover: rgba(142, 99, 243, 0.6);
    --glass-blur: blur(16px) saturate(150%);
    --glass-blur-heavy: blur(18px) saturate(150%);

    /* ----------------------------------------------------------------------
       TEXT
       ---------------------------------------------------------------------- */
    --text-light: #eeeeee;
    --text-secondary: #bbbbbb;
    --text-muted: #888888;

    /* ----------------------------------------------------------------------
       BORDERS
       ---------------------------------------------------------------------- */
    --border-color: #2a2a3e;
    --border-subtle: rgba(255, 255, 255, 0.08);

    /* ----------------------------------------------------------------------
       STATUS
       ---------------------------------------------------------------------- */
    --success: #48bb78;
    --warning: #ecc94b;
    --error: #f56565;
    --info: #4299e1;

    /* ----------------------------------------------------------------------
       SERVICE ACCENTS
       ---------------------------------------------------------------------- */
    --plex-orange: #e5a00d;
    --overseerr-blue: #5a67d8;
    --ebook-color: #10b981;
    --audiobook-color: #f59e0b;

    /* ----------------------------------------------------------------------
       LEGACY ALIASES
       Second naming scheme still referenced by admin.html, banned.html,
       unauthorized.html and nephflix.html. Kept so both spellings resolve.
       Prefer the canonical names above in new code.
       ---------------------------------------------------------------------- */
    --primary: var(--primary-color);
    --primary-dark: var(--accent);
    --accent-color: var(--primary-color);
    --border: var(--border-color);
    --text-primary: var(--text-light);
    --card-bg: var(--bg-card);
    --error-red: var(--error);
    --warning-orange: #ff6b35;

    /* ----------------------------------------------------------------------
       TYPOGRAPHY
       Replaces roughly a dozen ad-hoc rem values with a real scale.
       ---------------------------------------------------------------------- */
    --font-sans: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    --text-xs:   0.75rem;    /* 12px - meta, captions */
    --text-sm:   0.875rem;   /* 14px - secondary UI */
    --text-base: 1rem;       /* 16px - body */
    --text-md:   1.125rem;   /* 18px - lead */
    --text-lg:   1.25rem;    /* 20px - card titles */
    --text-xl:   1.5rem;     /* 24px - section titles */
    --text-2xl:  1.875rem;   /* 30px */
    --text-3xl:  2.25rem;    /* 36px - page titles */
    --text-4xl:  3rem;       /* 48px - hero */

    --weight-normal:   400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;

    --leading-tight:  1.2;
    --leading-normal: 1.5;
    --leading-loose:  1.7;

    /* ----------------------------------------------------------------------
       SPACING  (4px base)
       ---------------------------------------------------------------------- */
    --space-1: 0.25rem;   /*  4px */
    --space-2: 0.5rem;    /*  8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */

    /* ----------------------------------------------------------------------
       RADII
       ---------------------------------------------------------------------- */
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   20px;
    --radius-2xl:  22px;
    --radius-pill: 999px;

    /* ----------------------------------------------------------------------
       ELEVATION
       ---------------------------------------------------------------------- */
    --shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.25);
    --shadow-md:    0 4px 14px rgba(0, 0, 0, 0.3);
    --shadow-lg:    0 8px 32px rgba(0, 0, 0, 0.35);
    --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --shadow-brand: 0 4px 14px rgba(142, 99, 243, 0.3);
    --shadow-brand-lg: 0 16px 40px rgba(142, 99, 243, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);

    /* ----------------------------------------------------------------------
       MOTION
       ---------------------------------------------------------------------- */
    --transition: 0.3s ease;
    --transition-fast: 0.15s ease;
    --transition-slow: 0.5s ease;

    /* ----------------------------------------------------------------------
       LAYOUT
       ---------------------------------------------------------------------- */
    --container-max: 1400px;
    --z-nav: 1000;
    --z-modal: 2000;
    --z-toast: 9999;

    /* ----------------------------------------------------------------------
       FOCUS
       Previously there was no consistent focus style; keyboard users had
       little or no visible indicator on most controls.
       ---------------------------------------------------------------------- */
    --focus-ring: 0 0 0 3px rgba(142, 99, 243, 0.55);
    --focus-outline: 2px solid var(--primary-color);
    --focus-offset: 2px;
}