/* Design tokens — ReservaTheus (tech psicodélica profissional) */
:root {
  /* Paleta principal: violeta elétrico + ciano + magenta + âmbar (aurora boreal tech) */
  --accent: #8B5CF6;         /* violeta */
  --accent-2: #22D3EE;        /* ciano */
  --accent-3: #EC4899;        /* magenta quente */
  --accent-4: #F59E0B;        /* âmbar (highlight) */
  --accent-glow:   rgba(139, 92, 246, 0.4);
  --accent-2-glow: rgba(34, 211, 238, 0.35);
  --accent-3-glow: rgba(236, 72, 153, 0.35);

  /* Fundos: deep space, muito mais escuro pra contrastar com aurora */
  --bg: #05040D;
  --bg-elev: #0B0A1A;
  --bg-elev-2: #141127;
  --surface:       rgba(139, 92, 246, 0.06);
  --surface-hover: rgba(139, 92, 246, 0.12);
  --border:        rgba(139, 92, 246, 0.14);
  --border-strong: rgba(139, 92, 246, 0.32);

  --text: #F0EDFA;
  --text-dim: #A8A0C8;
  --text-faint: #6E6591;

  --success: #34D399;
  --warn:    #FBBF24;
  --danger:  #F43F5E;
  --info:    #60A5FA;

  --status-free:     #34D399;
  --status-reserved: #FBBF24;
  --status-occupied: #F43F5E;
  --status-dirty:    #94A3B8;

  /* Gradientes nomeados — reuso pra manter identidade consistente */
  --grad-aurora: linear-gradient(135deg, #8B5CF6 0%, #22D3EE 45%, #EC4899 100%);
  --grad-aurora-soft: linear-gradient(135deg, rgba(139,92,246,0.55) 0%, rgba(34,211,238,0.45) 50%, rgba(236,72,153,0.45) 100%);
  --grad-nebula: conic-gradient(from 140deg at 50% 50%, #8B5CF6, #EC4899, #F59E0B, #22D3EE, #8B5CF6);
  --grad-prism: linear-gradient(120deg, #8B5CF6, #22D3EE 40%, #EC4899 80%, #F59E0B);
  --grad-deep: radial-gradient(ellipse at 30% 20%, rgba(139,92,246,0.25), transparent 60%),
               radial-gradient(ellipse at 80% 80%, rgba(34,211,238,0.18), transparent 55%),
               radial-gradient(ellipse at 20% 90%, rgba(236,72,153,0.14), transparent 60%);
  --grad-glass: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%);
  --grad-border-anim: conic-gradient(from var(--border-angle, 0deg), transparent 60%, var(--accent) 75%, var(--accent-2) 85%, var(--accent-3) 95%, transparent);

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-2xl: 26px;
  --r-pill: 999px;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  --sh-sm: 0 1px 2px rgba(0,0,0,0.4);
  --sh-md: 0 8px 24px rgba(10,5,30,0.55);
  --sh-lg: 0 24px 56px rgba(10,5,30,0.65);
  --sh-glow: 0 0 0 1px var(--accent-glow), 0 12px 32px var(--accent-glow);
  --sh-aurora: 0 10px 40px rgba(139,92,246,0.3), 0 0 60px rgba(34,211,238,0.15);

  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-mono: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  --t-fast: 140ms cubic-bezier(.2,.7,.3,1);
  --t-med: 260ms cubic-bezier(.2,.7,.3,1);
  --t-slow: 480ms cubic-bezier(.2,.7,.3,1);

  --sidebar-w: 248px;
  --topbar-h: 64px;
}

[data-theme="light"] {
  --bg: #F5F3FB;
  --bg-elev: #FFFFFF;
  --bg-elev-2: #EEEAF6;
  --surface: rgba(139,92,246,0.06);
  --surface-hover: rgba(139,92,246,0.12);
  --border: rgba(139,92,246,0.18);
  --border-strong: rgba(139,92,246,0.35);
  --text: #1A1527;
  --text-dim: #555070;
  --text-faint: #827B9F;
}

/* Registra a variável --border-angle pra poder animá-la */
@property --border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}