/* ═══════════════════════════════════════════════════════════════
   DESIGN TOKENS — Sistema de Áudio Premium
   Inspirado em: Telegram, Discord, iMessage, Material You
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Cores de Accent (herdam do tema ativo via themes.js) ── */
  --audio-accent:           var(--accent, #6366f1);
  --audio-accent-dim:       var(--accent-glow, rgba(99, 102, 241, 0.18));
  --audio-accent-glow:      var(--accent-glow, rgba(99, 102, 241, 0.40));
  --audio-accent-recording: #ef4444;
  --audio-accent-rec-dim:   rgba(239, 68, 68, 0.18);
  --audio-accent-rec-glow:  rgba(239, 68, 68, 0.40);

  /* ── Superfícies (herdam do tema ativo) ── */
  --audio-surface:          var(--surface, rgba(255, 255, 255, 0.97));
  --audio-surface-raised:   var(--background-elevated, rgba(255, 255, 255, 1));
  --audio-surface-overlay:  var(--glass, rgba(248, 248, 255, 0.92));
  --audio-border:           var(--border, rgba(199, 210, 254, 0.28));
  --audio-blur-radius:      20px;

  /* ── Texto (herdam do tema ativo) ── */
  --audio-text-primary:     var(--text-primary, #1e293b);
  --audio-text-secondary:   var(--text-secondary, #64748b);
  --audio-text-muted:       var(--text-muted, #94a3b8);

  /* ── Lock Hint ── */
  --audio-lock-bg:          #f1f5f9;
  --audio-lock-border:      rgba(148, 163, 184, 0.3);

  /* ── Player ── */
  --audio-player-me-played:   #ffffff;
  --audio-player-me-unplayed: rgba(255, 255, 255, 0.38);
  --audio-player-them-played: var(--accent, #6366f1);
  --audio-player-them-unplayed: var(--accent-glow, rgba(99, 102, 241, 0.28));
  --audio-player-btn-me:      rgba(255, 255, 255, 0.22);
  --audio-player-btn-them:    var(--accent-glow, rgba(99, 102, 241, 0.10));

  /* ── Dimensões ── */
  --audio-btn-size:         40px;
  --audio-mic-size:         40px;
  --audio-player-width:     260px;
  --audio-player-height:    52px;
  --audio-waveform-height:  32px;
  --audio-radius-btn:       50%;
  --audio-radius-bubble:    20px;

  /* ── Easing & Spring ── */
  --audio-ease-spring:    cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --audio-ease-expo-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --audio-ease-smooth:    cubic-bezier(0.4, 0, 0.2, 1);
  --audio-ease-bounce:    cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Tipografia ── */
  --audio-font-mono: 'SF Mono', 'Fira Code', ui-monospace, 'Cascadia Code',
                     'Courier New', monospace;
  --audio-font-ui:   'Inter', system-ui, -apple-system, sans-serif;

  /* ── Shadows ── */
  --audio-shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.08);
  --audio-shadow-md:   0 4px 16px rgba(0, 0, 0, 0.10);
  --audio-shadow-lg:   0 8px 32px rgba(0, 0, 0, 0.12);
  --audio-shadow-glow: 0 0 20px var(--audio-accent-glow);
  --audio-shadow-rec:  0 0 24px var(--audio-accent-rec-glow);

  /* Legacy tokens (mantidos para compatibilidade com outros estilos do app) */
  --recorder-accent:         var(--audio-accent-recording);
  --recorder-accent-hover:   #dc2626;
  --recorder-bg-glass:       var(--audio-surface);
  --recorder-bg-glass-dark:  rgba(20, 20, 30, 0.97);
  --recorder-border:         var(--audio-border);
  --recorder-text-primary:   var(--audio-text-primary);
  --recorder-text-secondary: var(--audio-text-secondary);
  --recorder-lock-bg:        var(--audio-lock-bg);
  --recorder-font-mono:      var(--audio-font-mono);
  --ease-spring:             var(--audio-ease-spring);
  --ease-out-expo:           var(--audio-ease-expo-out);
  --ease-in-out-circ:        cubic-bezier(0.785, 0.135, 0.15, 0.86);
  --recorder-height:         64px;
  --recorder-radius:         32px;
}

/* ── Dark Mode ── */
/* As variáveis de áudio já herdam do tema ativo via var(--accent) etc. */
/* Este bloco existe apenas como fallback para compatibilidade */
[data-theme="dark"] {
  --audio-lock-bg:          var(--surface-2, #1e293b);
  --audio-lock-border:      var(--border, rgba(255, 255, 255, 0.10));

  --recorder-bg-glass: var(--audio-surface);
  --recorder-text-primary: var(--audio-text-primary);
  --recorder-text-secondary: var(--audio-text-secondary);
  --recorder-lock-bg: var(--audio-lock-bg);
  --recorder-border: var(--audio-border);
}