/* ============================================================
   MEGA Radio — Material Design 3 Expressive Tokens
   Dynamic theming from album art colors — LIGHT MODE DEFAULT
   ============================================================ */

:root {
  /* === Seed / Source Color (updated dynamically by theme-engine.js) === */
  --md-source: 210;  /* hue */

  /* === Primary Tonal Palette (Light Mode Default) === */
  --md-sys-color-primary: hsl(var(--md-source), 75%, 38%);
  --md-sys-color-on-primary: hsl(var(--md-source), 20%, 100%);
  --md-sys-color-primary-container: hsl(var(--md-source), 80%, 90%);
  --md-sys-color-on-primary-container: hsl(var(--md-source), 80%, 12%);
  --md-sys-color-primary-fixed: hsl(var(--md-source), 80%, 88%);
  --md-sys-color-primary-fixed-dim: hsl(var(--md-source), 65%, 45%);

  /* === Secondary Tonal Palette (shifted hue +30) === */
  --md-sys-color-secondary: hsl(calc(var(--md-source) + 30), 45%, 38%);
  --md-sys-color-on-secondary: hsl(calc(var(--md-source) + 30), 10%, 100%);
  --md-sys-color-secondary-container: hsl(calc(var(--md-source) + 30), 50%, 90%);
  --md-sys-color-on-secondary-container: hsl(calc(var(--md-source) + 30), 60%, 14%);

  /* === Tertiary Tonal Palette (shifted hue +60) === */
  --md-sys-color-tertiary: hsl(calc(var(--md-source) + 60), 50%, 38%);
  --md-sys-color-on-tertiary: hsl(calc(var(--md-source) + 60), 10%, 100%);
  --md-sys-color-tertiary-container: hsl(calc(var(--md-source) + 60), 55%, 90%);
  --md-sys-color-on-tertiary-container: hsl(calc(var(--md-source) + 60), 65%, 14%);

  /* === Error === */
  --md-sys-color-error: hsl(0, 75%, 45%);
  --md-sys-color-on-error: hsl(0, 0%, 100%);
  --md-sys-color-error-container: hsl(0, 80%, 92%);
  --md-sys-color-on-error-container: hsl(0, 80%, 15%);

  /* === Surface / Background (Light Neutral) === */
  --md-sys-color-surface: hsl(var(--md-source), 25%, 97%);
  --md-sys-color-surface-dim: hsl(var(--md-source), 20%, 92%);
  --md-sys-color-surface-bright: hsl(var(--md-source), 25%, 99%);
  --md-sys-color-surface-container-lowest: hsl(0, 0%, 100%);
  --md-sys-color-surface-container-low: hsl(var(--md-source), 20%, 95%);
  --md-sys-color-surface-container: hsl(var(--md-source), 22%, 93%);
  --md-sys-color-surface-container-high: hsl(var(--md-source), 22%, 90%);
  --md-sys-color-surface-container-highest: hsl(var(--md-source), 22%, 87%);
  --md-sys-color-on-surface: hsl(var(--md-source), 25%, 10%);
  --md-sys-color-on-surface-variant: hsl(var(--md-source), 15%, 32%);
  --md-sys-color-outline: hsl(var(--md-source), 15%, 65%);
  --md-sys-color-outline-variant: hsl(var(--md-source), 15%, 82%);
  --md-sys-color-inverse-surface: hsl(var(--md-source), 25%, 12%);
  --md-sys-color-inverse-on-surface: hsl(var(--md-source), 20%, 94%);
  --md-sys-color-inverse-primary: hsl(var(--md-source), 70%, 75%);

  /* === Scrim & Shadow === */
  --md-sys-color-scrim: hsla(var(--md-source), 30%, 10%, 0.4);
  --md-sys-color-shadow: hsla(var(--md-source), 30%, 20%, 0.12);

  /* === Glow Colors (derived from primary for Light Mode) === */
  --md-glow-color: hsla(var(--md-source), 75%, 50%, 0.35);
  --md-glow-color-strong: hsla(var(--md-source), 85%, 55%, 0.6);
  --md-glow-color-subtle: hsla(var(--md-source), 60%, 50%, 0.18);

  /* === Liquid Glass Design System Tokens (Ultra Translucent Glass) === */
  --liquid-glass-bg: hsla(var(--md-source), 50%, 98%, 0.35); /* 35% translucent crystal glass */
  --liquid-glass-bg-hover: hsla(var(--md-source), 60%, 99%, 0.52); /* 52% translucent on hover */
  --liquid-glass-bg-active: hsla(var(--md-source), 75%, 92%, 0.72);
  --liquid-glass-border: hsla(0, 0%, 100%, 0.65);
  --liquid-glass-border-subtle: hsla(var(--md-source), 50%, 75%, 0.3);
  --liquid-glass-shadow: 
    0 8px 32px 0 hsla(var(--md-source), 35%, 15%, 0.08),
    inset 0 1.5px 2px 0 hsla(0, 0%, 100%, 0.9),
    inset 0 -1.5px 3px 0 hsla(var(--md-source), 35%, 10%, 0.06);
  --liquid-glass-shadow-hover: 
    0 12px 40px 0 hsla(var(--md-source), 40%, 15%, 0.14),
    inset 0 2px 3px 0 hsla(0, 0%, 100%, 0.98),
    inset 0 -1.5px 4px 0 hsla(var(--md-source), 35%, 10%, 0.09);
  --liquid-glass-shadow-active: 
    0 6px 24px 0 hsla(var(--md-source), 50%, 25%, 0.22),
    inset 0 2px 4px 0 hsla(var(--md-source), 80%, 20%, 0.25);
  --liquid-glass-blur: blur(24px) saturate(210%);
  --fluid-spring-easing: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ============================================================
     M3 Expressive Shape Tokens
     ============================================================ */
  --md-sys-shape-corner-none: 0px;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 20px;
  --md-sys-shape-corner-extra-large: 32px;
  --md-sys-shape-corner-circle: 50%;
  --md-sys-shape-corner-full: 9999px;

  /* ============================================================
     M3 Typography Scale (using Inter)
     ============================================================ */
  --md-sys-typescale-display-large: 600 57px/64px 'Inter', sans-serif;
  --md-sys-typescale-display-medium: 500 45px/52px 'Inter', sans-serif;
  --md-sys-typescale-display-small: 500 36px/44px 'Inter', sans-serif;
  --md-sys-typescale-headline-large: 600 32px/40px 'Inter', sans-serif;
  --md-sys-typescale-headline-medium: 600 26px/34px 'Inter', sans-serif;
  --md-sys-typescale-headline-small: 600 22px/28px 'Inter', sans-serif;
  --md-sys-typescale-title-large: 600 20px/26px 'Inter', sans-serif;
  --md-sys-typescale-title-medium: 600 16px/24px 'Inter', sans-serif;
  --md-sys-typescale-title-small: 600 14px/20px 'Inter', sans-serif;
  --md-sys-typescale-body-large: 400 16px/24px 'Inter', sans-serif;
  --md-sys-typescale-body-medium: 400 14px/20px 'Inter', sans-serif;
  --md-sys-typescale-body-small: 400 12px/16px 'Inter', sans-serif;
  --md-sys-typescale-label-large: 600 14px/20px 'Inter', sans-serif;
  --md-sys-typescale-label-medium: 600 12px/16px 'Inter', sans-serif;
  --md-sys-typescale-label-small: 600 11px/16px 'Inter', sans-serif;

  /* ============================================================
     M3 Elevation (Light Theme Soft Shadows)
     ============================================================ */
  --md-sys-elevation-level0: none;
  --md-sys-elevation-level1: 0 2px 8px -1px hsla(var(--md-source), 25%, 20%, 0.08), 0 1px 4px 0 hsla(var(--md-source), 25%, 20%, 0.04);
  --md-sys-elevation-level2: 0 4px 14px -2px hsla(var(--md-source), 25%, 20%, 0.12), 0 2px 6px 0 hsla(var(--md-source), 25%, 20%, 0.06);
  --md-sys-elevation-level3: 0 8px 24px -4px hsla(var(--md-source), 25%, 20%, 0.16), 0 4px 10px 0 hsla(var(--md-source), 25%, 20%, 0.08);
  --md-sys-elevation-level4: 0 12px 32px -4px hsla(var(--md-source), 25%, 20%, 0.2), 0 6px 14px 0 hsla(var(--md-source), 25%, 20%, 0.1);
  --md-sys-elevation-level5: 0 16px 40px -6px hsla(var(--md-source), 25%, 20%, 0.25), 0 8px 18px 0 hsla(var(--md-source), 25%, 20%, 0.12);

  /* ============================================================
     Motion / Easing
     ============================================================ */
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --md-sys-motion-duration-short1: 50ms;
  --md-sys-motion-duration-short2: 100ms;
  --md-sys-motion-duration-short3: 150ms;
  --md-sys-motion-duration-short4: 200ms;
  --md-sys-motion-duration-medium1: 250ms;
  --md-sys-motion-duration-medium2: 300ms;
  --md-sys-motion-duration-medium3: 350ms;
  --md-sys-motion-duration-medium4: 400ms;
  --md-sys-motion-duration-long1: 450ms;
  --md-sys-motion-duration-long2: 500ms;

  /* ============================================================
     Spacing
     ============================================================ */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
}

/* ============================================================
   Global Reset & Universal Selection Prevention
   ============================================================ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  -webkit-touch-callout: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

img, svg, button, span, div, a, input, label, p, h1, h2, h3, h4, h5, h6 {
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-user-drag: none !important;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font: var(--md-sys-typescale-body-large);
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  min-height: 100vh;
  overflow-x: hidden;
  transition:
    background-color var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-standard),
    color var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-standard);
}

/* Smooth color transitions on ALL elements for theme changes */
*:not(canvas):not(audio):not(video) {
  transition:
    background-color var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-standard),
    color var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard),
    border-color var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard),
    box-shadow var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-standard),
    fill var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
}

a { color: var(--md-sys-color-primary); text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, select { font-family: inherit; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-full); }

::selection {
  background: transparent !important;
  color: inherit !important;
}

::-moz-selection {
  background: transparent !important;
  color: inherit !important;
}