/* Design tokens — Plantec Colecionável Copa 2026
   Paleta Verde-Amarelo Brasil (campanha 2026):
   • Verde bandeira: #009C3B (primária — campanha)
   • Verde escuro: #00471F (texto/headers/contraste)
   • Amarelo bandeira: #FFDF00 (destaque / lendária / energia)
   • Amarelo dourado: #F4C61F (gold premium / pills)
   • Azul Plantec: #1B2A52 (suporte / estrela da bandeira)
   • Magenta: #D4218C (épica)
   • Turquesa: #26B5B0 (rara)
*/
:root {
  /* Type scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);

  /* Spacing 4px base */
  --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;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  --transition: 220ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Typography */
  --font-display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Content widths */
  --content-default: 1200px;
  --content-wide: 1440px;

  /* Brand swatches (sempre disponíveis em qualquer tema) */
  --brand-navy: #1B2A52;
  --brand-magenta: #D4218C;
  --brand-turquoise: #26B5B0;
  --brand-yellow: #F4C61F;
  --brand-silver: #C8CDD4;

  /* Cores Brasil — campanha Copa 2026 */
  --br-green: #009C3B;        /* verde bandeira */
  --br-green-dark: #00471F;   /* verde escuro / texto */
  --br-green-deep: #006227;   /* verde profundo */
  --br-yellow: #FFDF00;       /* amarelo bandeira */
  --br-yellow-deep: #E6C200;  /* amarelo escuro / hover */
  --br-blue: #002776;         /* azul bandeira */
}

/* LIGHT MODE — Verde-Amarelo Brasil (campanha Copa 2026) */
:root,
[data-theme='light'] {
  --color-bg: #f4f7f1;
  --color-surface: #ffffff;
  --color-surface-2: #f9fbf6;
  --color-surface-offset: #edf2e6;
  --color-surface-dynamic: #e3ebd8;
  --color-divider: #d8e0cb;
  --color-border: #bdc7ad;

  --color-text: #00471F;
  --color-text-muted: #4a6a4f;
  --color-text-faint: #95a597;
  --color-text-inverse: #fbfff5;

  /* Primary — Verde Brasil (campanha Copa 2026) */
  --color-primary: #009C3B;
  --color-primary-hover: #007e30;
  --color-primary-active: #006227;
  --color-primary-highlight: #ccecd8;

  /* Accent — Amarelo Brasil */
  --color-accent: #F4C61F;
  --color-accent-hover: #d9ad0d;
  --color-accent-highlight: #fff3b8;

  /* Gold / Lendária — Amarelo bandeira (alta vibração) */
  --color-gold: #F4C61F;
  --color-gold-hover: #d9ad0d;
  --color-gold-highlight: #fff3b8;

  /* Magenta — Épica (acento extra) */
  --color-magenta: #D4218C;
  --color-magenta-hover: #ad1672;
  --color-magenta-highlight: #f6d2e6;

  /* Rarities — verde-amarelo + apoio */
  --rarity-common: #6b7d6e;
  --rarity-rare: #009C3B;     /* verde Brasil */
  --rarity-epic: #D4218C;     /* magenta */
  --rarity-legend: #F4C61F;   /* amarelo */

  --color-error: #a12c2c;
  --color-success: #009C3B;
  --color-warning: #E6C200;

  --shadow-sm: 0 1px 2px rgba(0, 71, 31, 0.07);
  --shadow-md: 0 8px 24px rgba(0, 71, 31, 0.10);
  --shadow-lg: 0 24px 48px rgba(0, 71, 31, 0.18);
  --shadow-glow: 0 0 0 4px rgba(0, 156, 59, 0.18);
}

[data-theme='dark'] {
  --color-bg: #061a0d;
  --color-surface: #0d2918;
  --color-surface-2: #11371f;
  --color-surface-offset: #154326;
  --color-surface-dynamic: #1d5532;
  --color-divider: #1a3d24;
  --color-border: #245a35;

  --color-text: #f1f9ec;
  --color-text-muted: #a8c0aa;
  --color-text-faint: #6b8470;
  --color-text-inverse: #00471F;

  /* Verde Brasil mais vibrante no escuro */
  --color-primary: #2ed26a;
  --color-primary-hover: #4ee084;
  --color-primary-active: #6cef9c;
  --color-primary-highlight: #133b22;

  --color-accent: #FFDF00;
  --color-accent-hover: #fff04a;
  --color-accent-highlight: #3d3408;

  --color-gold: #FFDF00;
  --color-gold-hover: #fff04a;
  --color-gold-highlight: #3d3408;

  --color-magenta: #ee4ba8;
  --color-magenta-hover: #f56fbb;
  --color-magenta-highlight: #3a1431;

  --rarity-common: #8aa090;
  --rarity-rare: #2ed26a;
  --rarity-epic: #ee4ba8;
  --rarity-legend: #FFDF00;

  --color-error: #e87a7a;
  --color-success: #2ed26a;
  --color-warning: #FFDF00;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 0 4px rgba(46, 210, 106, 0.28);
}