/* ================================================
   ORDEM DOS NAVEGADORES — Design Tokens
   ================================================ */

:root {
  --bg-image: url('../img/bg.jpg');

  /* ── Backgrounds ── */
  --bg-deep:       #050b14;
  --bg-primary:    #080d18;
  --bg-secondary:  #0d1626;
  --bg-card:       #0b1422;
  --bg-card-hover: #0f1b2e;
  --bg-input:      rgba(255, 255, 255, 0.04);

  /* ── Borders ── */
  --border:        rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.12);
  --border-gold:   rgba(201, 168, 76, 0.28);
  --border-cyan:   rgba(0, 212, 255, 0.22);

  /* ── Gold (primary accent) ── */
  --gold:          #c9a84c;
  --gold-light:    #e8c87a;
  --gold-dim:      #8a7030;
  --gold-glow:     rgba(201, 168, 76, 0.18);
  --gold-subtle:   rgba(201, 168, 76, 0.07);
  --gold-gradient: linear-gradient(135deg, #c9a84c 0%, #e8c87a 50%, #c9a84c 100%);

  /* ── Cyan (active / interactive) ── */
  --cyan:          #00d4ff;
  --cyan-dim:      rgba(0, 212, 255, 0.08);
  --cyan-glow:     rgba(0, 212, 255, 0.18);

  /* ── Semantic ── */
  --green:         #22c55e;
  --green-dim:     rgba(34, 197, 94, 0.10);
  --green-glow:    rgba(34, 197, 94, 0.18);

  --red:           #ef4444;
  --red-dim:       rgba(239, 68, 68, 0.10);
  --red-glow:      rgba(239, 68, 68, 0.18);

  --amber:         #f59e0b;
  --amber-dim:     rgba(245, 158, 11, 0.10);
  --amber-glow:    rgba(245, 158, 11, 0.18);

  --blue:          #3b82f6;
  --blue-dim:      rgba(59, 130, 246, 0.10);

  /* ── Text ── */
  --text-primary:   #dce6f5;
  --text-secondary: #7890b0;
  --text-muted:     #3a4e6a;
  --text-gold:      var(--gold-light);

  /* ── Layout ── */
  --sidebar-w:     262px;
  --topbar-h:      64px;

  /* ── Spacing ── */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 20px;  --s6: 24px;  --s8: 32px;  --s10: 40px;  --s12: 48px;

  /* ── Radii ── */
  --r-xs: 4px;  --r-sm: 7px;  --r-md: 11px;
  --r-lg: 16px; --r-xl: 22px; --r-full: 9999px;

  /* ── Easing ── */
  --ease:      250ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-fast: 140ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-slow: 420ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:  300ms cubic-bezier(0.0, 0, 0.2, 1);

  /* ── Shadows ── */
  --shadow-card: 0 4px 32px rgba(0, 0, 0, 0.45);
  --shadow-gold: 0 0 24px rgba(201, 168, 76, 0.12);
  --shadow-cyan: 0 0 20px rgba(0, 212, 255, 0.12);
}