/* ==========================================================================
   AuraSound Cloud - 核心設計變數系統 (Design Tokens)
   深邃擬態玻璃 (Deep Glassmorphic) + 霓虹微光流動 (Ambient Glow)
   ========================================================================== */

:root {
  /* 基礎深色調調色盤 */
  --bg-dark-base: #0a0e17;
  --bg-dark-surface: rgba(18, 24, 38, 0.75);
  --bg-glass-card: rgba(25, 33, 52, 0.65);
  --bg-glass-card-nested: rgba(15, 20, 32, 0.55);
  --bg-glass-pill: rgba(255, 255, 255, 0.08);
  --bg-glass-pill-hover: rgba(255, 255, 255, 0.16);
  --bg-glass-active: rgba(0, 229, 255, 0.18);

  /* 擬態玻璃邊框與陰影 */
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-border-subtle: rgba(255, 255, 255, 0.06);
  --glass-border-glow: rgba(0, 229, 255, 0.45);
  --glass-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
  --glass-glow-shadow: 0 0 25px rgba(0, 229, 255, 0.25);
  --glass-blur: blur(24px);
  --glass-blur-sm: blur(14px);

  /* 霓虹主題光效色彩 */
  --primary-cyan: #00f2fe;
  --primary-blue: #4facfe;
  --primary-gradient: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%);
  --accent-purple: #9d4edd;
  --accent-pink: #f72585;
  --accent-gradient: linear-gradient(135deg, #7928ca 0%, #ff0080 100%);
  --audiobook-gold: #f5af19;
  --audiobook-orange: #e65c00;
  --audiobook-gradient: linear-gradient(135deg, #f5af19 0%, #e65c00 100%);

  /* 文字階層色彩 */
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.78);
  --text-muted: rgba(255, 255, 255, 0.48);
  --text-dim: rgba(255, 255, 255, 0.28);

  /* 狀態色彩 */
  --status-success: #10b981;
  --status-warning: #f59e0b;
  --status-error: #ef4444;
  --status-info: #3b82f6;

  /* 字體系統 */
  --font-family-base: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Outfit", "PingFang SC", "Noto Sans TC", sans-serif;
  --font-family-mono: "SF Mono", Menlo, Monaco, Consolas, monospace;

  /* 動畫時間與曲線 */
  --transition-fast: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* 手機專屬安全區與佈局尺規 */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 16px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --nav-bar-height: 64px;
  --mini-player-height: 66px;
  --header-height: 58px;

  /* 圓角 */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;
}