/* =============================================================
 * ÓRBITA 360 PREMIUM — Design Tokens
 * Ponto único de personalização visual. config.js pode
 * sobrescrever --accent, --accent-alt e --glass-rgb em runtime.
 * ============================================================= */
:root {
  /* Cores de marca */
  --accent:        #6366F1;
  --accent-rgb:    99, 102, 241;
  --accent-alt:    #22D3EE;
  --accent-grad:   linear-gradient(135deg, var(--accent), var(--accent-alt));

  /* Superfícies de vidro (glassmorphism) */
  --glass-rgb:     18, 20, 28;
  --glass:         rgba(var(--glass-rgb), 0.55);
  --glass-strong:  rgba(var(--glass-rgb), 0.78);
  --glass-border:  rgba(255, 255, 255, 0.12);
  --glass-blur:    18px;

  /* Texto */
  --text:          #ffffff;
  --text-soft:     rgba(255, 255, 255, 0.66);
  --text-faint:    rgba(255, 255, 255, 0.40);

  /* Sombras */
  --shadow-sm:     0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md:     0 8px 30px rgba(0, 0, 0, 0.35);
  --shadow-lg:     0 24px 60px rgba(0, 0, 0, 0.50);
  --glow-accent:   0 0 0 4px rgba(var(--accent-rgb), 0.20);

  /* Geometria */
  --radius-sm:     10px;
  --radius-md:     16px;
  --radius-lg:     22px;
  --radius-pill:   999px;

  /* Espaçamento de layout */
  --bar-h:         60px;     /* altura da barra superior */
  --sidebar-w:     320px;    /* largura do menu lateral */
  --safe:          16px;

  /* Movimento (curvas de animação) */
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:      0.18s;
  --dur:           0.32s;
  --dur-slow:      0.55s;

  /* Camadas (z-index) */
  --z-pano:        0;
  --z-hotspot:     20;
  --z-topbar:      40;
  --z-sidebar:     60;
  --z-scrim:       50;
  --z-popup:       80;
  --z-gallery:     90;
  --z-toast:       95;
  --z-loader:      100;
}