/* =============================================================
 * SynthRadio / SynthVerse — CSS Design Tokens
 * All global variables — colors, spacing, radii, fonts, glows.
 * Every other CSS file MUST NOT hardcode colors; use these vars.
 * ============================================================= */

:root {
    /* — Background layers (darkest -> lightest) — */
    --sr-black:     #05070A;
    --sr-bg-2:      #080B10;
    --sr-dark:      #0B0F15;
    --sr-panel:     #101722;
    --sr-panel-2:   #151E2C;

    /* — Borders & dividers — */
    --sr-border:        rgba(0,172,255,0.12);
    --sr-border-strong: rgba(0,172,255,0.28);
    --sr-border-crimson: rgba(199,21,133,0.25);

    /* — Primary palette (blue -> cyan) — */
    --sr-blue:     #0066FF;
    --sr-blue-2:   #008CFF;
    --sr-electric: #00A8FF;
    --sr-cyan:     #00D4FF;

    /* — Accents & status — */
    --sr-crimson:  #C71585;
    --sr-danger:   #FF4D6D;
    --sr-success:  #2ECC71;
    --sr-warning:  #FFB547;

    /* — Text — */
    --sr-text:     #F4F8FF;
    --sr-muted:    #8B9AAF;
    --sr-text-dim: #62728A;

    /* — Radii — */
    --sr-radius-sm: 6px;
    --sr-radius:    10px;
    --sr-radius-lg: 16px;
    --sr-radius-xl: 24px;
    --sr-radius-round: 9999px;

    /* — Shadows & glows — */
    --sr-glow-blue:    0 0 24px rgba(0,172,255,0.35);
    --sr-glow-crimson: 0 0 24px rgba(199,21,133,0.35);
    --sr-glow-success: 0 0 18px rgba(46,204,113,0.35);
    --sr-shadow-panel: 0 8px 40px rgba(0,0,0,0.5);
    --sr-shadow-card:  0 4px 24px rgba(0,0,0,0.4);
    --sr-shadow-hover: 0 12px 48px rgba(0,172,255,0.15);

    /* — Spacing scale (4px base) — */
    --sr-space-1: 4px;
    --sr-space-2: 8px;
    --sr-space-3: 12px;
    --sr-space-4: 16px;
    --sr-space-5: 20px;
    --sr-space-6: 24px;
    --sr-space-8: 32px;
    --sr-space-10: 40px;
    --sr-space-12: 48px;
    --sr-space-16: 64px;
    --sr-space-20: 80px;

    /* — Typography — */
    --sr-font: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    --sr-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --sr-fs-xs: 11px;
    --sr-fs-sm: 13px;
    --sr-fs-base: 15px;
    --sr-fs-md: 17px;
    --sr-fs-lg: 20px;
    --sr-fs-xl: 26px;
    --sr-fs-2xl: 34px;
    --sr-fs-3xl: 48px;
    --sr-fs-hero: clamp(42px, 7vw, 84px);
    --sr-lh-tight: 1.15;
    --sr-lh-snug: 1.35;
    --sr-lh-base: 1.55;

    /* — Sizing utilities — */
    --sr-container: 1280px;
    --sr-container-narrow: 960px;
    --sr-header-h: 68px;
    --sr-sidebar-w: 260px;

    /* — Breakpoints (media queries use these values directly) — */
    --sr-bp-sm: 640px;
    --sr-bp-md: 768px;
    --sr-bp-lg: 1024px;
    --sr-bp-xl: 1280px;

    /* — Motion — */
    --sr-transition: 180ms cubic-bezier(.2,.8,.2,1);
    --sr-transition-slow: 320ms cubic-bezier(.2,.8,.2,1);

    /* — Z-index layers — */
    --sr-z-nav:       50;
    --sr-z-dropdown:  80;
    --sr-z-modal:    100;
    --sr-z-live:     110;
    --sr-z-toast:    120;
}