/* ─── Gringos Roleplay — Design Tokens ──────────────────────────────────────── */
:root {
  /* Brand */
  --accent:          #5AAEFF;
  --accent-dim:      #3d8de8;
  --accent-glow:     rgba(90, 174, 255, 0.35);
  --accent-glow-sm:  rgba(90, 174, 255, 0.18);

  /* Backgrounds */
  --bg-base:        #080c12;
  --bg-surface:     #0d1520;
  --bg-elevated:    #121d2e;
  --bg-card:        rgba(13, 21, 32, 0.75);
  --bg-card-hover:  rgba(18, 29, 46, 0.9);
  --bg-overlay:     rgba(8, 12, 18, 0.85);

  /* Glass */
  --glass-bg:       rgba(13, 21, 32, 0.6);
  --glass-border:   rgba(90, 174, 255, 0.12);
  --glass-border-hover: rgba(90, 174, 255, 0.35);

  /* Text */
  --text-primary:   #e8f0fe;
  --text-secondary: #8ca4c8;
  --text-muted:     #4d6180;
  --text-accent:    #5AAEFF;

  /* Status */
  --status-online:  #3ddc84;
  --status-offline: #e25454;
  --status-warning: #f5a623;
  --status-info:    #5AAEFF;

  /* Rank colors */
  --rank-owner:      #ffd700;
  --rank-developer:  #c084fc;
  --rank-head-admin: #f97316;
  --rank-admin:      #ef4444;
  --rank-moderator:  #22d3ee;
  --rank-support:    #3ddc84;

  /* Borders & Dividers */
  --border:         rgba(90, 174, 255, 0.1);
  --border-light:   rgba(255, 255, 255, 0.05);
  --divider:        rgba(90, 174, 255, 0.08);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* Border Radius */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.6);
  --shadow-glow: 0 0 20px var(--accent-glow), 0 4px 16px rgba(0,0,0,0.5);
  --shadow-glow-lg: 0 0 40px var(--accent-glow), 0 8px 32px rgba(0,0,0,0.6);

  /* Transitions */
  --transition-fast:   0.15s ease;
  --transition-base:   0.25s ease;
  --transition-slow:   0.4s ease;

  /* Font */
  --font-primary: 'Chakra Petch', sans-serif;

  /* Z-index layers */
  --z-base:     1;
  --z-dropdown: 100;
  --z-modal:    200;
  --z-toast:    300;
  --z-lightbox: 9990;
  --z-loading:  9995;
  --z-cursor:   100000;

  /* Sidebar */
  --sidebar-width: 240px;
  --topbar-height: 64px;
}