/* ==========================================================================
   LIUPARDO EPK - DESIGN TOKENS & SYSTEM VARIABLES
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------------
     COLOR PALETTE (Dark Mode por Padrão — Hard Techno / Schranz Aesthetic)
     -------------------------------------------------------------------------- */
  --color-black:    #060505;
  --color-white:    #F9F7F6;
  --color-red:      #C20A19;
  --color-salmon:   #FF6370;

  /* --------------------------------------------------------------------------
     TYPOGRAPHY (Fontes Embutidas em Base64 Data URI)
     -------------------------------------------------------------------------- */
  --font-display:   "Refrankt", "Syne", "Arial Black", sans-serif;
  --font-body:      "Metrik", "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:      "Geist Mono", ui-monospace, monospace;

  /* Títulos Display (Refrankt) */
  --text-title-line-height: 95%;
  --text-title-letter-spacing: -0.06em;

  /* Corpo de Texto (Metrik / Inter) */
  --text-body-line-height: 150%;
  --text-body-letter-spacing: 0em;
  --text-body-weight: 400;

  /* Textos Complementares (Geist Mono) */
  --text-mono-line-height: 140%;
  --text-mono-letter-spacing: 0em;
  --text-mono-weight-medium: 500;
  --text-mono-weight-semibold: 600;

  /* --------------------------------------------------------------------------
     SPACING & LAYOUT GRID
     -------------------------------------------------------------------------- */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   48px;
  --space-2xl:  80px;
  --space-3xl:  120px;

  --container-max-width: 1200px;
  --container-padding: var(--space-md);

  /* --------------------------------------------------------------------------
     ICONS SYSTEM (Iconoir)
     -------------------------------------------------------------------------- */
  --icon-size: 22px;
  --icon-stroke-width: 1.5;
}

/* --------------------------------------------------------------------------
   REGRAS CONDICIONAIS DE BG (Scoping por Seção)
   -------------------------------------------------------------------------- */
.bg-black, [data-bg="black"] {
  background-color: var(--color-black);
  color: var(--color-white);
}

.bg-black h1,
.bg-black h2,
[data-bg="black"] h1,
[data-bg="black"] h2 {
  font-family: var(--font-display);
  font-weight: 600; /* Refrankt Semibold em Fundo Preto */
  line-height: var(--text-title-line-height);
  letter-spacing: var(--text-title-letter-spacing);
}

.bg-black h3,
[data-bg="black"] h3 {
  font-family: var(--font-mono);
  color: var(--color-salmon);
  line-height: var(--text-mono-line-height);
  letter-spacing: var(--text-mono-letter-spacing);
}

.bg-white, [data-bg="white"] {
  background-color: var(--color-white);
  color: var(--color-black);
}

.bg-white h1,
.bg-white h2,
[data-bg="white"] h1,
[data-bg="white"] h2 {
  font-family: var(--font-display);
  font-weight: 900; /* Refrankt Black em Fundo Branco */
  line-height: var(--text-title-line-height);
  letter-spacing: var(--text-title-letter-spacing);
}

.bg-white h3,
[data-bg="white"] h3 {
  font-family: var(--font-mono);
  color: var(--color-black);
  line-height: var(--text-mono-line-height);
  letter-spacing: var(--text-mono-letter-spacing);
}