/* ==========================================================================
   SITE PROTEGIDO — Design tokens
   Fonte única de verdade para cor, tipografia, espaço, raio, sombra e tempo.
   ========================================================================== */

:root {
  /* --- Base / fundos ---------------------------------------------------- */
  --bg-void: #050505;
  --bg-deep: #080808;
  --bg-base: #0d0d0d;
  --bg-raise: #111111;

  /* --- Superfícies ------------------------------------------------------ */
  --surface-1: #101114;
  --surface-2: #141519;
  --surface-3: #18191d;
  --surface-hover: #1c1d22;

  /* --- Bordas ----------------------------------------------------------- */
  --line-soft: rgba(255, 255, 255, 0.055);
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);
  --line-accent: rgba(253, 193, 1, 0.34);

  /* --- Marca ------------------------------------------------------------ */
  --accent: #fdc101;
  --accent-hi: #ffd23f;
  --accent-lo: #d9a300;
  --accent-ink: #100d02; /* texto sobre amarelo */
  --accent-wash: rgba(253, 193, 1, 0.08);
  --accent-glow: rgba(253, 193, 1, 0.16);
  --accent-text: #fdc101;

  /* --- Funcional (status) ----------------------------------------------- */
  --ok: #3fcf8e;
  --ok-wash: rgba(63, 207, 142, 0.1);
  --ok-line: rgba(63, 207, 142, 0.26);
  --warn: #e8a33d;
  --warn-wash: rgba(232, 163, 61, 0.09);

  /* --- Texto ------------------------------------------------------------ */
  --text: #ffffff;
  --text-1: #ececee;
  --text-2: #a2a3aa;
  --text-3: #74757d;
  --text-4: #4e4f57;

  /* --- Tipografia ------------------------------------------------------- */
  --font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;

  --fs-display: clamp(2.5rem, 4.3vw, 3.6rem);
  --fs-h1: clamp(2.4rem, 5.2vw, 4.25rem);
  --fs-h2: clamp(1.95rem, 3.9vw, 3.35rem);
  --fs-h3: clamp(1.3rem, 2vw, 1.7rem);
  --fs-h4: clamp(1.05rem, 1.3vw, 1.2rem);
  --fs-lead: clamp(1rem, 1.25vw, 1.175rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.8125rem;
  --fs-eyebrow: 0.6875rem;

  --lh-tight: 0.98;
  --lh-snug: 1.12;
  --lh-body: 1.68;

  --tr-display: -0.035em;
  --tr-head: -0.025em;
  --tr-eyebrow: 0.2em;

  /* --- Espaço ------------------------------------------------------------ */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 40px;
  --sp-8: 56px;
  --sp-9: 72px;
  --sp-10: 96px;
  --sp-11: 128px;

  --section-y: clamp(72px, 9vw, 148px);
  --container: 1280px;
  --container-wide: 1280px;
  --gutter: clamp(20px, 4.2vw, 48px);

  /* --- Raio -------------------------------------------------------------- */
  --r-xs: 5px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-2xl: 30px;
  --r-pill: 999px;

  /* --- Elevação ---------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 12px 32px -12px rgba(0, 0, 0, 0.75);
  --shadow-lg: 0 40px 80px -32px rgba(0, 0, 0, 0.9),
    0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow-cta: 0 10px 26px -16px rgba(253, 193, 1, 0.42);

  /* --- Movimento --------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.68, 0.16, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 140ms;
  --t-base: 240ms;
  --t-slow: 620ms;

  /* --- Véus (fundos translúcidos que invertem no tema claro) -------------- */
  --wash-weak: rgba(255, 255, 255, 0.018);
  --wash: rgba(255, 255, 255, 0.035);
  --wash-strong: rgba(255, 255, 255, 0.06);

  /* --- Layout fixo -------------------------------------------------------- */
  --header-h: 78px;
  --header-h-compact: 62px;

  /* Cor do fundo da faixa atual — usada pelas costuras entre zonas */
  --zone-bg: #050505;
}

/* ==========================================================================
   TEMA CLARO — a página clareia quando entra a solução.
   Só as variáveis mudam; todo componente acompanha sozinho.
   ========================================================================== */
.theme-light {
  --bg-void: #f5f4f1;
  --bg-deep: #efeee9;
  --bg-base: #faf9f7;
  --bg-raise: #ffffff;

  --surface-1: #ffffff;
  --surface-2: #fbfaf8;
  --surface-3: #f2f0eb;
  --surface-hover: #f7f5f1;

  --line-soft: rgba(16, 15, 12, 0.08);
  --line: rgba(16, 15, 12, 0.14);
  --line-strong: rgba(16, 15, 12, 0.26);
  --line-accent: rgba(176, 133, 0, 0.42);

  --accent-wash: rgba(253, 193, 1, 0.16);
  --accent-glow: rgba(253, 193, 1, 0.3);
  /* Amarelo da marca também no texto de destaque do tema claro. */
  --accent-text: #fdc101;

  --ok: #0f7a52;
  --ok-wash: rgba(15, 122, 82, 0.09);
  --ok-line: rgba(15, 122, 82, 0.26);
  --warn: #9a6410;
  --warn-wash: rgba(154, 100, 16, 0.1);

  --text: #0b0b0c;
  --text-1: #1a1b1d;
  --text-2: #55575c;
  --text-3: #74767c;
  --text-4: #9a9ca2;

  --wash-weak: rgba(16, 15, 12, 0.022);
  --wash: rgba(16, 15, 12, 0.04);
  --wash-strong: rgba(16, 15, 12, 0.07);

  --shadow-sm: 0 1px 2px rgba(20, 18, 10, 0.06);
  --shadow-md: 0 14px 34px -18px rgba(20, 18, 10, 0.3);
  --shadow-lg: 0 40px 70px -34px rgba(20, 18, 10, 0.34);
  --shadow-cta: 0 12px 26px -14px rgba(180, 137, 0, 0.5);

  --zone-bg: #f5f4f1;

  background-color: var(--bg-void);
  color: var(--text-1);
}

/* ==========================================================================
   TEMA AMARELO — usado só na faixa do investimento, para ela gritar
   ========================================================================== */
.theme-accent {
  --bg-void: #fdc101;
  --bg-deep: #f0b600;
  --bg-base: #ffce2b;
  --bg-raise: #ffffff;

  --surface-1: #ffffff;
  --surface-2: #fffdf6;
  --surface-3: #fff3cd;
  --surface-hover: #fffaea;

  --line-soft: rgba(24, 18, 0, 0.16);
  --line: rgba(24, 18, 0, 0.26);
  --line-strong: rgba(24, 18, 0, 0.42);
  --line-accent: rgba(24, 18, 0, 0.32);

  --accent-wash: rgba(24, 18, 0, 0.07);
  --accent-glow: rgba(24, 18, 0, 0.14);
  --accent-text: #171200;

  --ok: #0b6b45;
  --ok-wash: rgba(11, 107, 69, 0.1);
  --ok-line: rgba(11, 107, 69, 0.28);
  --warn: #7a4c00;
  --warn-wash: rgba(122, 76, 0, 0.12);

  --text: #120e00;
  --text-1: #1c1600;
  --text-2: rgba(20, 15, 0, 0.74);
  --text-3: rgba(20, 15, 0, 0.6);
  --text-4: rgba(20, 15, 0, 0.44);

  --wash-weak: rgba(24, 18, 0, 0.04);
  --wash: rgba(24, 18, 0, 0.07);
  --wash-strong: rgba(24, 18, 0, 0.12);

  --shadow-sm: 0 1px 2px rgba(60, 44, 0, 0.12);
  --shadow-md: 0 14px 30px -16px rgba(60, 44, 0, 0.4);
  --shadow-lg: 0 40px 70px -34px rgba(60, 44, 0, 0.45);
  --shadow-cta: 0 14px 30px -14px rgba(20, 15, 0, 0.45);

  --zone-bg: #fdc101;

  background-color: var(--bg-void);
  color: var(--text-1);
}

/* Sobre amarelo o botão amarelo some: ele inverte para preto. */
.theme-accent .btn--primary {
  background: #14120a;
  color: #ffd23f;
}

.theme-accent .btn--primary:hover {
  background: #241f10;
  color: #ffdf6b;
}

.theme-accent .btn--primary:active {
  background: #0b0a05;
}

/* Ilha escura dentro do tema claro (o painel do produto continua dark). */
.theme-dark {
  --bg-void: #050505;
  --surface-1: #101114;
  --surface-2: #141519;
  --surface-3: #18191d;
  --line-soft: rgba(255, 255, 255, 0.055);
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);
  --line-accent: rgba(253, 193, 1, 0.34);
  --accent-wash: rgba(253, 193, 1, 0.08);
  --accent-text: var(--accent);
  --ok: #3fcf8e;
  --ok-wash: rgba(63, 207, 142, 0.1);
  --ok-line: rgba(63, 207, 142, 0.26);
  --text: #ffffff;
  --text-1: #ececee;
  --text-2: #a2a3aa;
  --text-3: #74757d;
  --text-4: #4e4f57;
  --wash-weak: rgba(255, 255, 255, 0.018);
  --wash: rgba(255, 255, 255, 0.035);
  --wash-strong: rgba(255, 255, 255, 0.06);
  --zone-bg: #050505;
}