/* ==========================================================================
   variables.css — Design System Tokens
   RPG Online v2 | Dark Fantasy Theme
   Dark é o padrão. Light é sobrescrita em theme.css via [data-theme="light"]
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

:root {

  --color-bg-primary:    #0f0f0f;
  --color-bg-secondary:  #1a1a1a;
  --color-bg-tertiary:   #252525;
  --color-surface:       #1e1e1e;
  --color-surface-hover: #2a2a2a;

  --color-border:        #333333;
  --color-border-focus:  #7c3aed;
  --color-border-subtle: #2a2a2a;

  --color-text-primary:   #e0e0e0;
  --color-text-secondary: #a0a0a0;
  --color-text-muted:     #666666;
  --color-text-inverse:   #0f0f0f;

  --color-accent:        #7c3aed;
  --color-accent-hover:  #6d28d9;
  --color-accent-active: #5b21b6;
  --color-accent-light:  rgba(124, 58, 237, 0.15);
  --color-accent-glow:   rgba(124, 58, 237, 0.35);

  --color-success:       #22c55e;
  --color-success-light: rgba(34, 197, 94, 0.15);
  --color-danger:        #ef4444;
  --color-danger-light:  rgba(239, 68, 68, 0.15);
  --color-warning:       #f59e0b;
  --color-warning-light: rgba(245, 158, 11, 0.15);
  --color-info:          #3b82f6;
  --color-info-light:    rgba(59, 130, 246, 0.15);

  --color-hp-full:    #22c55e;
  --color-hp-mid:     #f59e0b;
  --color-hp-low:     #ef4444;

  --color-chat-normal:    #e0e0e0;
  --color-chat-whisper:   #a78bfa;
  --color-chat-action:    #fbbf24;
  --color-chat-narration: #60a5fa;
  --color-chat-roll:      #34d399;

  --color-overlay:       rgba(0, 0, 0, 0.7);
  --color-overlay-light: rgba(0, 0, 0, 0.4);

  --font-display: 'Cinzel', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'Fira Code', 'Courier New', monospace;

  --font-size-xs:   12px;
  --font-size-sm:   13px;
  --font-size-base: 14px;
  --font-size-md:   16px;
  --font-size-lg:   18px;
  --font-size-xl:   20px;
  --font-size-2xl:  24px;
  --font-size-3xl:  32px;

  --font-weight-light:    300;
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight:   1.2;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.7;

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

  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  --shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:     0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg:     0 10px 15px rgba(0, 0, 0, 0.5);
  --shadow-xl:     0 20px 40px rgba(0, 0, 0, 0.6);
  --shadow-accent: 0 0 20px rgba(124, 58, 237, 0.3);
  --shadow-inset:  inset 0 2px 4px rgba(0, 0, 0, 0.4);

  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;

  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    300;
  --z-toast:    400;
  --z-tooltip:  500;

  --navbar-height:      60px;
  --sidebar-width:      320px;
  --content-max-width:  1400px;
}