/* ==========================================================================
   RAIO X DA TERRA — DESIGN TOKENS
   Identidade Visual & Brandbook 2026 · raioxdaterra.com.br
   ==========================================================================
   Carregue este arquivo em qualquer página. Todos os tokens estão em :root.
   Para temas, sobrescreva no escopo desejado (ex.: .theme-dark).
   ========================================================================== */

/* ---------- 1. FONTES ---------- */

@font-face {
  font-family: "Arpona";
  src: url("fonts/Arpona_Bold.otf") format("opentype"),
       url("assets/fonts/Arpona-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("fonts/Inter_24pt-Regular.ttf") format("truetype"),
       url("assets/fonts/Inter-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter_24pt-Medium.ttf") format("truetype"),
       url("assets/fonts/Inter-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter_24pt-SemiBold.ttf") format("truetype"),
       url("assets/fonts/Inter-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter_24pt-Bold.ttf") format("truetype"),
       url("assets/fonts/Inter-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- 2. PALETA PRINCIPAL ---------- */
  --rxt-vermelho-terra: #a44818;   /* Cor mãe — energia da marca */
  --rxt-verde-planta:   #3d3f21;   /* Solidez, território */
  --rxt-bege-palha:     #e2cba3;   /* Calor, papel terroso */

  /* ---------- 3. PALETA SECUNDÁRIA ---------- */
  --rxt-branco-areia:   #ebe4d2;   /* Fundo claro alternativo */
  --rxt-preto-mogno:    #402f2a;   /* Texto sobre claros, profundo */
  --rxt-verde-agua:     #1d4a4b;   /* Apoio, frescor */
  --rxt-azul-ceu:       #b9cac3;   /* Apoio claro, neutro frio */
  --rxt-amarelo-sol:    #ffce6d;   /* Acento de destaque */
  --rxt-marrom-barro:   #7d3d22;   /* Variação quente do vermelho */
  --rxt-laranja-mel:    #cf893a;   /* Laranja quente (atualizado 2026) */

  /* ---------- 4. SEMÂNTICOS — TEMA CLARO ---------- */
  --rxt-bg:             var(--rxt-bege-palha);
  --rxt-bg-soft:        var(--rxt-branco-areia);
  --rxt-bg-deep:        var(--rxt-verde-planta);
  --rxt-fg:             var(--rxt-preto-mogno);
  --rxt-fg-soft:        #5a4a3f;
  --rxt-fg-muted:       #8a7868;
  --rxt-accent:         var(--rxt-vermelho-terra);
  --rxt-accent-deep:    var(--rxt-marrom-barro);
  --rxt-line:           rgba(64, 47, 42, 0.22);
  --rxt-line-soft:      rgba(64, 47, 42, 0.10);

  /* ---------- 5. TIPOGRAFIA ---------- */
  --rxt-font-display:   "Arpona", "Inter", Georgia, serif;
  --rxt-font-text:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --rxt-text-xs:        0.75rem;   /* 12 — meta */
  --rxt-text-sm:        0.875rem;  /* 14 — captions */
  --rxt-text-base:      1rem;      /* 16 — corpo */
  --rxt-text-lg:        1.125rem;  /* 18 — corpo grande */
  --rxt-text-xl:        1.5rem;    /* 24 */
  --rxt-text-2xl:       2rem;      /* 32 — subtítulo */
  --rxt-text-3xl:       3rem;      /* 48 — título seção */
  --rxt-text-4xl:       4.5rem;    /* 72 — display */
  --rxt-text-5xl:       7rem;      /* 112 — hero */

  --rxt-leading-tight:  1.02;      /* Arpona display */
  --rxt-leading-snug:   1.15;
  --rxt-leading-normal: 1.45;
  --rxt-leading-loose:  1.6;

  --rxt-tracking-mono:  0.08em;    /* Eyebrows / coordenadas */
  --rxt-tracking-flat:  -0.01em;   /* Display */

  /* ---------- 6. ESPAÇO & RAIO ---------- */
  --rxt-space-1:  0.25rem;
  --rxt-space-2:  0.5rem;
  --rxt-space-3:  0.75rem;
  --rxt-space-4:  1rem;
  --rxt-space-5:  1.5rem;
  --rxt-space-6:  2rem;
  --rxt-space-7:  3rem;
  --rxt-space-8:  4rem;
  --rxt-space-9:  6rem;
  --rxt-space-10: 8rem;

  --rxt-radius-sm:  4px;
  --rxt-radius:     8px;
  --rxt-radius-lg:  16px;
  --rxt-radius-pill: 999px;

  /* ---------- 7. GRID ---------- */
  --rxt-container:    1200px;
  --rxt-container-wide: 1400px;
  --rxt-gutter:       1.5rem;

  /* ---------- 8. SOMBRAS (usar com parcimônia — marca é matérica) ---------- */
  --rxt-shadow-sm:    0 1px 2px rgba(64,47,42,0.08);
  --rxt-shadow:       0 8px 24px rgba(64,47,42,0.10);
  --rxt-shadow-lg:    0 24px 60px rgba(64,47,42,0.18);

  /* ---------- 9. MOTION ---------- */
  --rxt-ease:        cubic-bezier(0.2, 0.6, 0.2, 1);
  --rxt-duration:    220ms;
}

/* ---------- TEMA ESCURO (fundo Verde Planta) ---------- */
.theme-dark {
  --rxt-bg:        var(--rxt-verde-planta);
  --rxt-bg-soft:   #2d2f17;
  --rxt-bg-deep:   #1b1c0e;
  --rxt-fg:        var(--rxt-bege-palha);
  --rxt-fg-soft:   #c9b58f;
  --rxt-fg-muted:  #8e9075;
  --rxt-accent:    var(--rxt-vermelho-terra);
  --rxt-accent-deep: var(--rxt-amarelo-sol);
  --rxt-line:      rgba(226, 203, 163, 0.22);
  --rxt-line-soft: rgba(226, 203, 163, 0.10);
}

/* ---------- BASE RESET (opt-in: aplique .rxt-base no body) ---------- */
.rxt-base {
  background: var(--rxt-bg);
  color: var(--rxt-fg);
  font-family: var(--rxt-font-text);
  font-size: var(--rxt-text-base);
  line-height: var(--rxt-leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.rxt-base *, .rxt-base *::before, .rxt-base *::after { box-sizing: border-box; }

/* ---------- UTILITÁRIOS DE TIPOGRAFIA ---------- */

.rxt-display {
  font-family: var(--rxt-font-display);
  font-weight: 700;
  line-height: var(--rxt-leading-tight);
  letter-spacing: var(--rxt-tracking-flat);
  text-transform: uppercase;
}

.rxt-eyebrow {
  font-family: var(--rxt-font-text);
  font-weight: 500;
  font-size: var(--rxt-text-xs);
  letter-spacing: var(--rxt-tracking-mono);
  text-transform: uppercase;
  color: var(--rxt-fg-muted);
}

.rxt-meta {
  font-family: var(--rxt-font-text);
  font-weight: 400;
  font-size: var(--rxt-text-xs);
  letter-spacing: var(--rxt-tracking-mono);
  text-transform: uppercase;
}