/* ============================================================
   ALIANÇA TECNOLOGIA EM ENERGIA — DESIGN TOKENS
   Fonte única de verdade. Uma troca de identidade acontece AQUI,
   e em nenhum outro arquivo.
   ============================================================ */

:root {
  /* ---------- 1. MARCA (extraído da logo oficial) ----------
     Verde folha/energia · Grafite do círculo · Navy do lettering.
     {{A CONFIRMAR: valores hex definitivos contra o arquivo vetorial
     original da logo — ver PENDENCIAS.md}} */
  --brand-green: #6fbe44;
  --brand-green-bright: #86d455;
  --brand-green-deep: #4e9430;
  /* Versão escurecida do verde da marca, para uso sobre fundos claros.
     O verde-folha original rende apenas 2.0:1 sobre off-white — reprova
     em WCAG AA. Este tom mantém a matiz e entrega 5.3:1. */
  --brand-green-ink: #35691d;
  --brand-graphite: #5f6469;
  --brand-navy: #253039;

  /* ---------- 2. SUPERFÍCIES ESCURAS ---------- */
  --ink-900: #0b0f12;
  --ink-850: #0e1418;
  --ink-800: #121a1f;
  --ink-750: #161f25;
  --ink-700: #1b262c;
  --ink-600: #25323a;
  --ink-500: #33434c;

  /* ---------- 3. SUPERFÍCIES CLARAS ---------- */
  --paper: #f6f7f6;
  --paper-2: #eceeec;
  --paper-3: #e1e4e2;
  --white: #ffffff;

  /* ---------- 4. TEXTO ---------- */
  --text-on-dark: #eef2f1;
  --text-on-dark-mid: #a6b3b8;
  --text-on-dark-low: #78888f;
  --text-on-light: #151e26;
  --text-on-light-mid: #4a5860;
  --text-on-light-low: #5c6a73;

  /* ---------- 5. LINHAS ----------
     A estrutura do site é feita de fios, não de caixas com sombra. */
  --line-dark: rgba(255, 255, 255, 0.1);
  --line-dark-strong: rgba(255, 255, 255, 0.19);
  --line-light: rgba(19, 28, 33, 0.12);
  --line-light-strong: rgba(19, 28, 33, 0.22);
  --line-green: rgba(111, 190, 68, 0.45);

  /* ---------- 6. SEMÂNTICOS ---------- */
  --accent: var(--brand-green);
  --accent-contrast: #0b0f12;
  --focus: var(--brand-green-bright);

  /* ---------- 7. TIPOGRAFIA ---------- */
  --font-display: "Sora", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --fs-label: 0.75rem;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --fs-lg: clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);
  --fs-xl: clamp(1.3rem, 1.2rem + 0.5vw, 1.5rem);
  --fs-h4: clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
  --fs-h3: clamp(1.45rem, 1.3rem + 0.75vw, 1.9rem);
  --fs-h2: clamp(1.8rem, 1.5rem + 1.5vw, 2.75rem);
  --fs-h1: clamp(2.15rem, 1.65rem + 2.5vw, 3.9rem);
  --fs-numeral: clamp(2.5rem, 1.8rem + 3.4vw, 4.5rem);

  --lh-tight: 1.05;
  --lh-snug: 1.14;
  --lh-heading: 1.2;
  --lh-body: 1.65;
  --lh-relaxed: 1.75;

  --track-label: 0.11em;
  --track-tight: -0.018em;
  --track-tighter: -0.03em;

  /* ---------- 8. ESPAÇAMENTO ---------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;
  --sp-11: 6.5rem;
  --sp-12: 8rem;

  --section-y: clamp(4rem, 2.8rem + 6vw, 8rem);
  --section-y-lg: clamp(5rem, 3.2rem + 8vw, 10rem);

  /* ---------- 9. LAYOUT ---------- */
  --container: 73rem;
  --container-narrow: 54rem;
  --container-wide: 82rem;
  --gutter: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);

  /* ---------- 10. RAIOS ----------
     Deliberadamente contidos. Cantos muito arredondados são o
     vocabulário de landing page genérica; aqui a leitura é de
     documento técnico e material construído. */
  --r-xs: 2px;
  --r-sm: 3px;
  --r-md: 5px;
  --r-lg: 7px;
  --r-full: 999px;

  /* ---------- 11. SOMBRAS ----------
     Usadas com parcimônia. A hierarquia vem de linha e espaço. */
  --shadow-sm: 0 1px 2px rgba(11, 15, 18, 0.05);
  --shadow-md: 0 2px 8px rgba(11, 15, 18, 0.07);
  --shadow-lg: 0 8px 28px rgba(11, 15, 18, 0.12);
  --shadow-dark: 0 12px 36px rgba(0, 0, 0, 0.5);

  /* ---------- 12. MOVIMENTO ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-mask: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur: 300ms;
  --dur-slow: 700ms;
  --dur-mask: 950ms;
  --stagger: 70ms;

  /* ---------- 13. CAMADAS ---------- */
  --z-base: 0;
  --z-content: 1;
  --z-float: 90;
  --z-header: 100;
  --z-menu: 200;
}

/* Tema por superfície. Ambos declaram --accent explicitamente: sem isso,
   um bloco .on-dark aninhado numa seção .on-light herdaria o verde
   escuro e perderia contraste sobre o fundo escuro. */
.on-dark {
  --text: var(--text-on-dark);
  --text-mid: var(--text-on-dark-mid);
  --text-low: var(--text-on-dark-low);
  --line: var(--line-dark);
  --line-strong: var(--line-dark-strong);
  --surface: var(--ink-800);
  --accent: var(--brand-green);
  --focus: var(--brand-green-bright);
}

.on-light {
  --text: var(--text-on-light);
  --text-mid: var(--text-on-light-mid);
  --text-low: var(--text-on-light-low);
  --line: var(--line-light);
  --line-strong: var(--line-light-strong);
  --surface: var(--white);
  --accent: var(--brand-green-ink);
  --focus: var(--brand-green-ink);
}