/* ============================================
   ÉVORA — Design Tokens
   ============================================ */

:root {
  /* === CORES PRIMÁRIAS === */
  --color-bg-primary:       #0A0A0A;
  --color-bg-secondary:     #111111;
  --color-bg-tertiary:      #1A1A1A;
  --color-bg-card:          #141414;
  --color-bg-card-hover:    #1E1E1E;

  /* === COR DE DESTAQUE (ACCENT) === */
  --color-accent-primary:   #E8000D;
  --color-accent-hover:     #FF1A26;
  --color-accent-glow:      rgba(232, 0, 13, 0.28);
  --color-accent-soft:      rgba(232, 0, 13, 0.10);

  /* === COR SECUNDÁRIA — branco limpo como contraste === */
  --color-accent-secondary: #FFFFFF;
  --color-accent-warm:      #F0F0F0;

  /* === TEXTOS === */
  --color-text-primary:     #FFFFFF;
  --color-text-secondary:   #B0B0B0;
  --color-text-muted:       #666666;
  --color-text-accent:      #E63946;

  /* === BORDAS E DIVISORES === */
  --color-border-subtle:    #222222;
  --color-border-card:      #2A2A2A;
  --color-border-accent:    rgba(232, 0, 13, 0.35);
  --color-border-glow:      rgba(232, 0, 13, 0.15);

  /* === GRADIENTES === */
  --gradient-hero:          linear-gradient(180deg, #0A0A0A 0%, #111111 50%, #0A0A0A 100%);
  --gradient-accent:        linear-gradient(135deg, #FF1A26 0%, #C0000A 100%);
  --gradient-card:          linear-gradient(180deg, #1A1A1A 0%, #111111 100%);
  --gradient-overlay:       linear-gradient(180deg, rgba(10,10,10,0.8) 0%, rgba(10,10,10,0.95) 100%);
  --gradient-text-accent:   linear-gradient(90deg, #FF1A26, #E8000D);

  /* === SOMBRAS === */
  --shadow-card:            0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-card-hover:      0 8px 40px rgba(0, 0, 0, 0.6);
  --shadow-button:          0 4px 24px rgba(232, 0, 13, 0.45);
  --shadow-button-hover:    0 6px 36px rgba(232, 0, 13, 0.65);
  --shadow-glow:            0 0 40px rgba(232, 0, 13, 0.18);

  /* === FONTES === */
  --font-display:     'Bebas Neue', 'Impact', sans-serif;
  --font-heading:     'Outfit', 'Montserrat', sans-serif;
  --font-body:        'DM Sans', 'Helvetica Neue', sans-serif;

  /* === TAMANHOS — Mobile (base) === */
  --fs-hero:          3rem;
  --fs-section-title: 1.75rem;
  --fs-subtitle:      1.125rem;
  --fs-body:          1rem;
  --fs-body-sm:       0.875rem;
  --fs-caption:       0.75rem;
  --fs-cta:           1.125rem;

  /* === TAMANHOS — Desktop (aplicar via media query) === */
  --fs-hero-lg:          4.5rem;
  --fs-section-title-lg: 2.5rem;
  --fs-subtitle-lg:      1.25rem;
  --fs-body-lg:          1.0625rem;

  /* === LINE HEIGHTS === */
  --lh-tight:   1.1;
  --lh-snug:    1.3;
  --lh-normal:  1.6;
  --lh-relaxed: 1.8;

  /* === LETTER SPACING === */
  --ls-tight:    -0.02em;
  --ls-normal:    0;
  --ls-wide:      0.05em;
  --ls-extra:     0.12em;

  /* === SPACING SCALE === */
  --space-xs:   0.25rem;
  --space-sm:   0.5rem;
  --space-md:   1rem;
  --space-lg:   1.5rem;
  --space-xl:   2rem;
  --space-2xl:  3rem;
  --space-3xl:  4rem;
  --space-4xl:  6rem;
  --space-5xl:  8rem;

  /* === SEÇÃO PADDING (vertical) === */
  --section-py-mobile:  4rem;
  --section-py-desktop: 6rem;

  /* === CONTAINER === */
  --container-max:      1200px;
  --container-px:       1.25rem;
  --container-px-lg:    2rem;

  /* === BORDER RADIUS === */
  --radius-sm:    6px;
  --radius-md:    12px;
  --radius-lg:    16px;
  --radius-xl:    24px;
  --radius-full:  9999px;
}