/**
 * Monsterama Design System — Design Tokens & CSS Variables
 * Direção Visual: Pokémon-like — Aventura Colorida & Acolhedora
 */

:root {
  /* ==========================================================================
     1. Cores de Superfície e Fundo (Light Adventure Theme)
     ========================================================================== */
  --bg-app: #f0f5fa;
  --bg-surface-0: #ffffff;
  --bg-surface-1: #ffffff;
  --bg-surface-2: #f1f5f9;
  --bg-surface-3: #e2e8f0;
  --bg-surface-warm: #fefce8;
  --bg-surface-hero: linear-gradient(160deg, #dbeafe 0%, #f0fdf4 40%, #fefce8 100%);

  /* Bordas e Divisores */
  --border-subtle: #e2e8f0;
  --border-default: #cbd5e1;
  --border-strong: #94a3b8;
  --border-focus: #0ea5e9;

  /* Tipografia & Contrastes de Texto */
  --text-primary: #1e293b;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --text-disabled: #cbd5e1;
  --text-inverse: #ffffff;
  --text-on-color: #ffffff;

  /* ==========================================================================
     2. Os 5 Elementos Oficiais (Seção 3 & 4 de start.md)
     ========================================================================== */

  /* Água (Afinidade: Agilidade) */
  --elem-agua: #0ea5e9;
  --elem-agua-light: #e0f2fe;
  --elem-agua-mid: #7dd3fc;
  --elem-agua-dark: #0369a1;
  --elem-agua-gradient: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%);

  /* Ar (Afinidade: Velocidade) — Cinza Azulado */
  --elem-ar: #64748b;
  --elem-ar-light: #f1f5f9;
  --elem-ar-mid: #94a3b8;
  --elem-ar-dark: #334155;
  --elem-ar-gradient: linear-gradient(135deg, #94a3b8 0%, #475569 100%);

  /* Fogo (Afinidade: Força) */
  --elem-fogo: #f97316;
  --elem-fogo-light: #fff7ed;
  --elem-fogo-mid: #fdba74;
  --elem-fogo-dark: #c2410c;
  --elem-fogo-gradient: linear-gradient(135deg, #fb923c 0%, #ef4444 100%);

  /* Terra (Afinidade: Resistência) */
  --elem-terra: #d97706;
  --elem-terra-light: #fef3c7;
  --elem-terra-mid: #fcd34d;
  --elem-terra-dark: #92400e;
  --elem-terra-gradient: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);

  /* Planta (Afinidade: Inteligência) */
  --elem-planta: #16a34a;
  --elem-planta-light: #dcfce7;
  --elem-planta-mid: #86efac;
  --elem-planta-dark: #15803d;
  --elem-planta-gradient: linear-gradient(135deg, #4ade80 0%, #16a34a 100%);

  /* ==========================================================================
     3. As 5 Raridades Oficiais (Seção 9 de start.md)
     ========================================================================== */
  --rarity-comum: #94a3b8;
  --rarity-comum-bg: #f1f5f9;

  --rarity-incomum: #22c55e;
  --rarity-incomum-bg: #dcfce7;

  --rarity-raro: #3b82f6;
  --rarity-raro-bg: #dbeafe;

  --rarity-epico: #a855f7;
  --rarity-epico-bg: #f3e8ff;

  --rarity-lendario: #f59e0b;
  --rarity-lendario-bg: #fef3c7;

  /* ==========================================================================
     4. Os 5 Atributos Treináveis (Seção 17-22 de start.md)
     ========================================================================== */
  --stat-forca: #ef4444;
  --stat-forca-light: #fee2e2;
  --stat-resistencia: #f59e0b;
  --stat-resistencia-light: #fef3c7;
  --stat-agilidade: #06b6d4;
  --stat-agilidade-light: #cffafe;
  --stat-velocidade: #8b5cf6;
  --stat-velocidade-light: #ede9fe;
  --stat-inteligencia: #10b981;
  --stat-inteligencia-light: #d1fae5;

  --stat-hp: #22c55e;
  --stat-hp-low: #ef4444;
  --stat-powerscore: #ec4899;

  /* ==========================================================================
     5. Cores Semânticas de Interface
     ========================================================================== */
  --brand-primary: #0ea5e9;
  --brand-primary-hover: #0284c7;
  --brand-primary-light: #e0f2fe;
  --brand-accent: #eab308;

  --accent-gold: #f59e0b;
  --accent-gold-light: #fef3c7;

  --state-success: #10b981;
  --state-warning: #f59e0b;
  --state-danger: #ef4444;
  --state-info: #0ea5e9;

  /* ==========================================================================
     6. Tipografia (Lúdica & Energética)
     ========================================================================== */
  --font-family-display: 'Fredoka', 'Nunito', sans-serif;
  --font-family-sans: 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-mono: 'JetBrains Mono', 'Fira Code', Consolas, Monaco, monospace;

  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */
  --font-size-4xl: 2.25rem;   /* 36px */
  --font-size-5xl: 3rem;      /* 48px */

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* ==========================================================================
     7. Espaçamentos, Raios e Sombras (Suaves & Arredondados)
     ========================================================================== */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-full: 9999px;

  /* Sombras suaves e amigáveis */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 8px 24px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 16px 40px -8px rgba(0, 0, 0, 0.12);
  --shadow-card: 0 4px 16px -2px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--border-subtle);
  --shadow-card-hover: 0 12px 32px -4px rgba(0, 0, 0, 0.14), 0 0 0 1px var(--border-default);

  /* Transições suaves */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}