/**
 * TekoDesk Fit — Design Tokens Premium (themes.css)
 * Versão visual: 0.9.0 — Dark premium default / Light polished
 * Direção: Fitness tech SaaS, mobile-first, elegante e confiável.
 */

:root {
  /* ─── DARK MODE (default) ──────────────────────────────────── */

  /* Backgrounds — camadas de profundidade */
  --bg-base:        hsl(220, 40%, 4%);
  --bg-surface:     hsl(220, 30%, 8%);
  --bg-elevated:    hsl(220, 24%, 12%);
  --bg-overlay:     hsla(220, 40%, 4%, 0.85);
  --bg-glass:       hsla(220, 24%, 14%, 0.72);
  --surface-2:      hsl(220, 24%, 12%);
  --surface-3:      hsla(220, 24%, 14%, 0.72);

  /* Text — hierarquia nítida */
  --text-primary:   hsl(0, 0%, 98%);
  --text-secondary: hsl(220, 12%, 62%);
  --text-muted:     hsl(220, 10%, 44%);
  --text-inverse:   hsl(220, 40%, 4%);

  /* Accent — Green Neon Fitness */
  --accent:         hsl(160, 100%, 45%);
  --accent-hover:   hsl(160, 100%, 55%);
  --accent-soft:    hsla(160, 100%, 45%, 0.12);
  --accent-glow:    hsla(160, 100%, 45%, 0.35);

  /* Secondary Accent — Cyan Tech */
  --accent-2:       hsl(190, 100%, 50%);
  --accent-2-soft:  hsla(190, 100%, 50%, 0.12);
  --accent-2-glow:  hsla(190, 100%, 50%, 0.30);

  /* Semantic */
  --danger:         hsl(0, 90%, 65%);
  --danger-soft:    hsla(0, 90%, 65%, 0.12);
  --danger-glow:    hsla(0, 90%, 65%, 0.30);
  --warning:        hsl(42, 100%, 55%);
  --warning-soft:   hsla(42, 100%, 55%, 0.12);
  --success:        hsl(160, 100%, 45%);
  --info:           hsl(210, 100%, 60%);
  --info-soft:      hsla(210, 100%, 60%, 0.12);

  /* MEV/MAV/MRV específicos */
  --volume-below:    hsl(220, 12%, 62%);
  --volume-mev:      hsl(42, 100%, 55%);
  --volume-mav:      hsl(160, 100%, 45%);
  --volume-mrv-near: hsl(18, 100%, 58%);
  --volume-mrv-over: hsl(0, 90%, 65%);

  /* Borders & Shadows */
  --border:         hsla(220, 20%, 22%, 0.6);
  --border-focus:   var(--accent);
  --shadow-sm:      0 1px 2px hsla(0, 0%, 0%, 0.40), 0 0 0 1px hsla(220, 20%, 22%, 0.3);
  --shadow-md:      0 4px 12px hsla(0, 0%, 0%, 0.45), 0 0 0 1px hsla(220, 20%, 22%, 0.3);
  --shadow-lg:      0 12px 32px hsla(0, 0%, 0%, 0.55), 0 0 0 1px hsla(220, 20%, 22%, 0.3);
  --shadow-glow:    0 0 24px hsla(160, 100%, 45%, 0.15);
  --shadow-glow-2:  0 0 24px hsla(190, 100%, 50%, 0.12);

  /* Spacing — refinado */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* Radius — mais suave */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 9999px;

  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:   'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.25rem;
  --text-4xl:  3rem;

  /* Transitions */
  --transition-fast: 180ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 350ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Z-index */
  --z-base:    1;
  --z-sticky:  10;
  --z-nav:     100;
  --z-modal:   1000;
  --z-toast:   2000;

  /* Layout */
  --header-h:      60px;
  --bottom-nav-h:  68px;
}

/* ─── LIGHT MODE ───────────────────────────────────────────── */
[data-theme="light"] {
  --bg-base:        hsl(210, 20%, 98%);
  --bg-surface:     hsl(0, 0%, 100%);
  --bg-elevated:    hsl(210, 16%, 96%);
  --bg-overlay:     hsla(0, 0%, 100%, 0.85);
  --bg-glass:       hsla(0, 0%, 100%, 0.72);
  --surface-2:      hsl(210, 16%, 96%);
  --surface-3:      hsla(0, 0%, 100%, 0.72);

  --text-primary:   hsl(220, 30%, 10%);
  --text-secondary: hsl(220, 10%, 45%);
  --text-muted:     hsl(220, 10%, 60%);
  --text-inverse:   hsl(0, 0%, 100%);

  --border:         hsla(220, 14%, 88%, 0.8);
  --border-focus:   hsl(160, 84%, 36%);

  --shadow-sm:      0 1px 3px hsla(220, 30%, 10%, 0.06), 0 0 0 1px hsla(220, 14%, 88%, 0.5);
  --shadow-md:      0 4px 16px hsla(220, 30%, 10%, 0.08), 0 0 0 1px hsla(220, 14%, 88%, 0.5);
  --shadow-lg:      0 12px 40px hsla(220, 30%, 10%, 0.10), 0 0 0 1px hsla(220, 14%, 88%, 0.5);
  --shadow-glow:    0 0 32px hsla(160, 84%, 36%, 0.12);
  --shadow-glow-2:  0 0 32px hsla(190, 90%, 42%, 0.10);

  --accent:         hsl(160, 84%, 36%);
  --accent-hover:   hsl(160, 84%, 30%);
  --accent-soft:    hsla(160, 84%, 36%, 0.10);
  --accent-glow:    hsla(160, 84%, 36%, 0.20);

  --accent-2:       hsl(190, 90%, 42%);
  --accent-2-soft:  hsla(190, 90%, 42%, 0.10);
  --accent-2-glow:  hsla(190, 90%, 42%, 0.18);
}

/* Respeitar preferência do sistema na primeira visita */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg-base:        hsl(210, 20%, 98%);
    --bg-surface:     hsl(0, 0%, 100%);
    --bg-elevated:    hsl(210, 16%, 96%);
    --bg-overlay:     hsla(0, 0%, 100%, 0.85);
    --bg-glass:       hsla(0, 0%, 100%, 0.72);
    --surface-2:      hsl(210, 16%, 96%);
    --surface-3:      hsla(0, 0%, 100%, 0.72);
    --text-primary:   hsl(220, 30%, 10%);
    --text-secondary: hsl(220, 10%, 45%);
    --text-muted:     hsl(220, 10%, 60%);
    --text-inverse:   hsl(0, 0%, 100%);
    --border:         hsla(220, 14%, 88%, 0.8);
    --border-focus:   hsl(160, 84%, 36%);
    --shadow-sm:      0 1px 3px hsla(220, 30%, 10%, 0.06), 0 0 0 1px hsla(220, 14%, 88%, 0.5);
    --shadow-md:      0 4px 16px hsla(220, 30%, 10%, 0.08), 0 0 0 1px hsla(220, 14%, 88%, 0.5);
    --shadow-lg:      0 12px 40px hsla(220, 30%, 10%, 0.10), 0 0 0 1px hsla(220, 14%, 88%, 0.5);
    --shadow-glow:    0 0 32px hsla(160, 84%, 36%, 0.12);
    --shadow-glow-2:  0 0 32px hsla(190, 90%, 42%, 0.10);
    --accent:         hsl(160, 84%, 36%);
    --accent-hover:   hsl(160, 84%, 30%);
    --accent-soft:    hsla(160, 84%, 36%, 0.10);
    --accent-glow:    hsla(160, 84%, 36%, 0.20);
    --accent-2:       hsl(190, 90%, 42%);
    --accent-2-soft:  hsla(190, 90%, 42%, 0.10);
    --accent-2-glow:  hsla(190, 90%, 42%, 0.18);
  }
}

/* Acessibilidade: reduzir animação */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}