/* ==========================================================================
   Media Layer Design Tokens — triBBBal
   Single source of truth for colors, sizing, motion, spacing, and z-index
   across mini-player, floating video, feed listening bar, and resume prompt.
   ========================================================================== */

:root {
  /* ── Media Layer Design Tokens ──────────────────────────────────────────
     Single source of truth for colors, sizing, motion, spacing, and z-index
     across mini-player, floating video, feed listening bar, and resume prompt.
     ──────────────────────────────────────────────────────────────────────── */

  /* Colors — Base palette */
  --ml-color-bg-dark: #1a1a2e;
  --ml-color-bg-darker: #0d1117;
  --ml-color-bg-elevated: #16213e;
  --ml-color-accent: #e94560;
  --ml-color-accent-hover: #c73750;
  --ml-color-text-primary: #f0f0f0;
  --ml-color-text-secondary: #8b8ba3;
  --ml-color-text-emphasis: #e0e0e0;

  /* Colors — Transparency */
  --ml-color-bg-translucent: rgba(26, 26, 46, 0.92);
  --ml-color-bg-translucent-strong: rgba(26, 26, 46, 0.96);
  --ml-color-overlay: rgba(0, 0, 0, 0.5);
  --ml-color-overlay-strong: rgba(0, 0, 0, 0.6);
  --ml-color-progress-track: rgba(255, 255, 255, 0.15);
  --ml-color-control-hover: rgba(255, 255, 255, 0.1);
  --ml-color-control-hover-strong: rgba(255, 255, 255, 0.15);
  --ml-color-control-active: rgba(255, 255, 255, 0.14);
  --ml-color-border-subtle: rgba(255, 255, 255, 0.08);
  --ml-color-border-muted: rgba(255, 255, 255, 0.06);
  --ml-color-border-visible: rgba(255, 255, 255, 0.1);

  /* Sizing — Component dimensions */
  --ml-mini-height: 64px;
  --ml-mini-width-desktop: 400px;
  --ml-floating-width: 320px;
  --ml-floating-height: 180px;
  --ml-fab-size: 52px;
  --ml-fab-size-mobile: 48px;
  --ml-fab-size-small: 44px;

  /* Sizing — Corner radii */
  --ml-radius-sm: 6px;
  --ml-radius-md: 12px;
  --ml-radius-lg: 16px;
  --ml-radius-pill: 24px;
  --ml-radius-round: 50%;

  /* Sizing — Avatar */
  --ml-avatar-sm: 24px;
  --ml-avatar-md: 28px;
  --ml-avatar-lg: 36px;

  /* Sizing — Controls */
  --ml-control-sm: 28px;
  --ml-control-md: 32px;
  --ml-control-lg: 36px;
  --ml-control-xl: 40px;
  --ml-control-touch: 44px;

  /* Motion — Durations */
  --ml-duration-fast: 0.15s;
  --ml-duration-normal: 0.2s;
  --ml-duration-slow: 0.3s;
  --ml-duration-expand: 0.35s;

  /* Motion — Easings */
  --ml-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ml-ease-snap: cubic-bezier(0.2, 0, 0, 1);
  --ml-ease-linear: linear;

  /* Motion — Composed transitions */
  --ml-transition-default: var(--ml-duration-slow) var(--ml-ease-default);
  --ml-transition-fast: var(--ml-duration-fast) ease;
  --ml-transition-snap: var(--ml-duration-slow) var(--ml-ease-snap);

  /* Spacing */
  --ml-edge-margin: 20px;
  --ml-edge-margin-mobile: 16px;
  --ml-gap-sm: 4px;
  --ml-gap-md: 8px;
  --ml-gap-lg: 12px;
  --ml-gap-xl: 16px;
  --ml-gap-2xl: 20px;

  /* Elevation — Shadows */
  --ml-shadow-sm: 0 -2px 16px rgba(0, 0, 0, 0.35);
  --ml-shadow-md: 0 4px 24px rgba(0, 0, 0, 0.35);
  --ml-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
  --ml-shadow-artwork: 0 8px 32px rgba(0, 0, 0, 0.4);

  /* Z-index stack */
  --ml-z-feed-bar: 8400;
  --ml-z-mini: 8500;
  --ml-z-floating: 9000;
  --ml-z-snackbar: 9999;

  /* Layout — Stacking offsets (when multiple surfaces active) */
  --ml-stack-mini-offset: 84px; /* mini height 64px + 20px gap */
  --ml-stack-floating-offset: 220px; /* floating 180px + gaps */
  --ml-stack-combined-offset: 300px; /* both active */

  /* Backdrop */
  --ml-backdrop-blur: blur(12px);
}

/* ── Reduced Motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ml-duration-fast: 0.01s;
    --ml-duration-normal: 0.01s;
    --ml-duration-slow: 0.01s;
    --ml-duration-expand: 0.01s;
    --ml-transition-default: 0.01s var(--ml-ease-default);
    --ml-transition-fast: 0.01s ease;
    --ml-transition-snap: 0.01s var(--ml-ease-snap);
  }
}