/* ============================================================
   VILELA CT — DESIGN TOKENS
   Fonte de verdade do sistema visual. Versao 1.0

   Regra unica: nenhum valor visual pode existir fora deste
   arquivo. Se um seletor precisa de um valor que nao esta
   aqui, o token e criado aqui primeiro.

   TROCA DA COR DE MARCA:
   quando a logo oficial for vetorizada, altere apenas
   --brand-500 e rode o agente ux-ui-pro-max para revalidar
   contraste em toda a interface.
   ============================================================ */

:root {

  /* ---------- MARCA ---------- */
  --brand-500: #F2540B;              /* provisorio ate extrair da logo */
  --brand-300: #FF8A4C;
  --brand-700: #C33D00;
  --brand-soft: rgba(242, 84, 11, 0.12);
  --brand-line: rgba(242, 84, 11, 0.35);

  /* ---------- NEUTROS ---------- */
  --ink-900: #141416;
  --ink-800: #1D1D20;
  --ink-700: #2A2A2E;
  --steel-400: #8A9099;
  --steel-200: #C9CDD2;
  --chalk-100: #E7E8EA;
  --chalk-000: #F6F7F8;
  --white: #FFFFFF;

  /* ---------- SEMANTICOS ---------- */
  --ok: #2FA36B;
  --warn: #E0A800;
  --err: #D14343;

  /* ---------- PAPEIS DE SUPERFICIE ---------- */
  --bg: var(--ink-900);
  --bg-elevated: var(--ink-800);
  --bg-light: var(--chalk-100);
  --surface-light: var(--chalk-000);
  --text: var(--white);
  --text-muted: var(--steel-200);
  --text-subtle: var(--steel-400);
  --text-on-light: var(--ink-900);
  --border: var(--ink-700);
  --border-light: rgba(20, 20, 22, 0.10);

  /* ---------- TIPOGRAFIA ---------- */
  --font-display: "Archivo", system-ui, sans-serif;
  --font-body: "Inter Tight", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --fs-display: clamp(2.75rem, 8vw, 6.5rem);
  --fs-h2: clamp(2rem, 4.5vw, 3.25rem);
  --fs-h3: clamp(1.25rem, 2.2vw, 1.6rem);
  --fs-body-lg: clamp(1.05rem, 1.6vw, 1.2rem);
  --fs-body: clamp(1rem, 1.2vw, 1.0625rem);
  --fs-label: 0.75rem;
  --fs-data: clamp(1.5rem, 3vw, 2.25rem);

  --lh-display: 0.95;
  --lh-title: 1.1;
  --lh-body: 1.6;
  --tracking-display: -0.02em;
  --tracking-label: 0.14em;

  /* ---------- ESPACAMENTO ---------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 2rem;
  --sp-6: 3rem;
  --sp-7: 4rem;
  --sp-8: 6rem;

  --section-gap: clamp(4rem, 9vw, 8rem);
  --container: 1240px;
  --container-pad: var(--sp-4);
  --measure: 65ch;

  /* ---------- FORMA ---------- */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-2: 0 12px 32px rgba(0, 0, 0, 0.35);

  /* ---------- MOVIMENTO ---------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 140ms;
  --dur-base: 260ms;
  --dur-slow: 520ms;

  /* ---------- CAMADAS ---------- */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-overlay: 300;
  --z-modal: 400;

  /* ---------- ALVO DE TOQUE ---------- */
  --touch-min: 48px;
}

/* Bloco claro: inverte os papeis sem trocar os tokens de base.
   Aplicar a classe na section, nunca no elemento filho. */
.theme-light {
  --bg: var(--chalk-100);
  --bg-elevated: var(--chalk-000);
  --text: var(--ink-900);
  --text-muted: #4A4E54;
  --text-subtle: #6B7076;
  --border: var(--border-light);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}

/* ============================================================
   EXTENSAO v3 — impacto
   Amarelo vivo da referência (RD2 Fit / Smart Fit) sobre P&B.
   Regra de contraste: amarelo NUNCA é cor de texto em fundo
   claro — em tema claro ele entra como fundo de etiqueta/grifo
   com texto escuro por cima.
   ============================================================ */
:root {
  /* amarelo de impacto — pedido do cliente, extraído da referência */
  --vivo-500: #FFD203;
  --vivo-600: #E3BA00;

  --accent: var(--vivo-500);
  --accent-on-dark: var(--vivo-500);

  /* linha-fio: divisor editorial */
  --hairline: 1px;

  /* proporções declaradas das fotos */
  --ratio-retrato: 4 / 5;
  --ratio-paisagem: 3 / 2;
  --ratio-larga: 16 / 9;

  /* véu do herói: foto legível sob o título */
  --veu-heroi: linear-gradient(to top,
      rgba(20, 20, 22, 0.92) 0%,
      rgba(20, 20, 22, 0.55) 45%,
      rgba(20, 20, 22, 0.35) 100%);
}