/* ==========================================================================
   Plague Brasil - CSS Custom Properties (Design Tokens)
   Dark post-apocalyptic theme
   ========================================================================== */

:root {
  /* ---- Brand Colors ---- */
  --crimson-blood: #8B0000;
  --crimson-blood-rgb: 139, 0, 0;
  --scarlet-red: #DC143C;
  --scarlet-red-rgb: 220, 20, 60;

  /* ---- Neutrals ---- */
  --jet-black: #0D0D0D;
  --jet-black-rgb: 13, 13, 13;
  --charcoal: #1A1A1A;
  --charcoal-rgb: 26, 26, 26;
  --ash-gray: #2A2A2A;
  --smoke-gray: #3A3A3A;
  --dust-gray: #6B6B6B;
  --bone-white: #F5F0E1;
  --bone-white-rgb: 245, 240, 225;

  /* ---- Accent Colors ---- */
  --aged-bronze: #CD7F32;
  --aged-bronze-rgb: 205, 127, 50;
  --amber-glow: #FF8C00;
  --amber-glow-rgb: 255, 140, 0;

  /* ---- Tier Colors ---- */
  --tier-supporter: #CD7F32;
  --tier-supporter-rgb: 205, 127, 50;
  --tier-elite: #C0C0C0;
  --tier-elite-rgb: 192, 192, 192;
  --tier-plague: #8B0000;
  --tier-plague-rgb: 139, 0, 0;

  /* ---- Semantic Colors ---- */
  --color-success: #2D6A2E;
  --color-success-light: #4CAF50;
  --color-warning: #FF8C00;
  --color-warning-light: #FFA726;
  --color-error: #DC143C;
  --color-error-light: #EF5350;
  --color-info: #1565C0;
  --color-info-light: #42A5F5;

  /* ---- Surfaces ---- */
  --surface-0: var(--jet-black);
  --surface-1: #1E1E1E;
  --surface-2: #2A2A2A;
  --surface-3: #3A3A3A;
  --surface-elevated: rgba(30, 30, 30, 0.98);

  /* ---- Text Colors ---- */
  --text-primary: var(--bone-white);
  --text-secondary: rgba(245, 240, 225, 0.75);
  --text-tertiary: rgba(245, 240, 225, 0.5);
  --text-disabled: rgba(245, 240, 225, 0.3);
  --text-accent: var(--amber-glow);

  /* ---- Border Colors ---- */
  --border-subtle: rgba(245, 240, 225, 0.08);
  --border-default: rgba(245, 240, 225, 0.12);
  --border-strong: rgba(245, 240, 225, 0.22);
  --border-accent: rgba(205, 127, 50, 0.5);

  /* ---- Typography ---- */
  --font-display: 'Cinzel', 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* Font Sizes (fluid scale) */
  --text-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.75rem);
  --text-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem);
  --text-base: clamp(0.9rem, 0.85rem + 0.25vw, 1rem);
  --text-lg: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-xl: clamp(1.15rem, 1.05rem + 0.5vw, 1.25rem);
  --text-2xl: clamp(1.3rem, 1.1rem + 1vw, 1.5rem);
  --text-3xl: clamp(1.5rem, 1.2rem + 1.5vw, 1.875rem);
  --text-4xl: clamp(1.8rem, 1.4rem + 2vw, 2.25rem);
  --text-5xl: clamp(2.2rem, 1.6rem + 3vw, 3rem);
  --text-6xl: clamp(2.8rem, 1.8rem + 5vw, 4rem);

  /* Font Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Line Heights */
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* Letter Spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.1em;
  --tracking-widest: 0.2em;

  /* ---- Spacing ---- */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */

  /* ---- Border Radius ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.7);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.5);
  --shadow-glow-crimson: 0 0 20px rgba(139, 0, 0, 0.4), 0 0 60px rgba(139, 0, 0, 0.15);
  --shadow-glow-amber: 0 0 20px rgba(255, 140, 0, 0.3), 0 0 60px rgba(255, 140, 0, 0.1);
  --shadow-glow-silver: 0 0 20px rgba(192, 192, 192, 0.25), 0 0 60px rgba(192, 192, 192, 0.1);
  --shadow-glow-bronze: 0 0 20px rgba(205, 127, 50, 0.3), 0 0 60px rgba(205, 127, 50, 0.1);

  /* ---- Transitions ---- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
  --transition-slower: 600ms ease;

  /* ---- Z-Index Scale ---- */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;
  --z-max: 9999;

  /* ---- Layout ---- */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1440px;
  --header-height: 72px;
  --sidebar-width: 260px;
}

/* ---- Dark mode is default — no media query needed ---- */