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

:root {
  /* === CORES BASE === */
  --color-black:    #0A0A0A;
  --color-gray-900: #141414;
  --color-gray-800: #1E1E1E;
  --color-gray-700: #2A2A2A;
  --color-gray-600: #444444;
  --color-gray-500: #666666;
  --color-gray-400: #999999;
  --color-gray-200: #CCCCCC;
  --color-white:    #F5F5F5;

  --color-red:       #CC1A1A;
  --color-red-dark:  #A31515;
  --color-red-light: #E83232;
  --color-red-sub:   #2A0808;

  --color-gold:       #F0A500;
  --color-gold-dark:  #C88A00;
  --color-gold-light: #FFB829;
  --color-gold-sub:   #2A1E00;

  --color-success: #22C55E;

  /* === SEMÂNTICOS === */
  --surface-base:    var(--color-black);
  --surface-raised:  var(--color-gray-900);
  --surface-overlay: var(--color-gray-800);
  --surface-border:  var(--color-gray-700);

  --text-primary:   var(--color-white);
  --text-secondary: var(--color-gray-400);
  --text-accent:    var(--color-gold);
  --text-danger:    var(--color-red);

  --action-primary:       var(--color-red);
  --action-primary-hover: var(--color-red-dark);
  --action-secondary:     var(--color-gold);

  /* === TIPOGRAFIA === */
  --font-display: 'Bebas Neue', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-accent:  'Oswald', sans-serif;

  /* === ESCALA DE FONTE === */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  32px;

  /* === ESPAÇAMENTO === */
  --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;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* === BORDER RADIUS === */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* === SOMBRAS === */
  --shadow-sm:   0 2px 8px  rgba(0,0,0,0.4);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.6);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.8);
  --shadow-red:  0 4px 20px rgba(204,26,26,0.4);
  --shadow-gold: 0 4px 20px rgba(240,165,0,0.3);

  /* === TRANSIÇÕES === */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;
}