/* ═══════════════════════════════════════════════════════
   DESIGN TOKENS — LP Dr. Dharien
   Identidade Visual Oficial — Light Mode Premium
   Arquitetura: Primitivas → Semânticos → Aliases
═══════════════════════════════════════════════════════ */

/* ── FONTES PROPRIETÁRIAS ────────────────────────────── */
@font-face {
  font-family: 'MADE Evolve Sans';
  src: url('../fonts/made_evolve_sans/MADE Evolve Sans Thin (PERSONAL USE).otf') format('opentype');
  font-weight: 100;
  font-display: swap;
}

@font-face {
  font-family: 'MADE Evolve Sans';
  src: url('../fonts/made_evolve_sans/MADE Evolve Sans Light (PERSONAL USE).otf') format('opentype');
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: 'MADE Evolve Sans';
  src: url('../fonts/made_evolve_sans/MADE Evolve Sans Regular (PERSONAL USE).otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'MADE Evolve Sans';
  src: url('../fonts/made_evolve_sans/MADE Evolve Sans Medium (PERSONAL USE).otf') format('opentype');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'MADE Evolve Sans';
  src: url('../fonts/made_evolve_sans/MADE Evolve Sans Bold (PERSONAL USE).otf') format('opentype');
  font-weight: 700;
  font-display: swap;
}

:root {

  /* ══════════════════════════════════════════════════
     CAMADA 1 — PRIMITIVAS (Core Colors)
     Valores atômicos. Nunca usar diretamente no CSS
     de componentes — sempre via tokens semânticos.
  ══════════════════════════════════════════════════ */
  --core-navy: #051C51;
  --core-offwhite: #F6F6F6;
  --core-gold-light: #E9D199;
  --core-gold-dark: #A37940;
  --core-white: #FFFFFF;

  /* ══════════════════════════════════════════════════
     CAMADA 2 — TOKENS SEMÂNTICOS
  ══════════════════════════════════════════════════ */

  /* — 2.1 Superfícies (Background & Cards) ————————— */
  --bg-root: var(--core-offwhite);
  /* Fundo principal da página */
  --surface-card: var(--core-white);
  /* Cards, depoimentos, modais — sobe sobre o bg-root */
  --surface-inverse: var(--core-navy);
  /* Quebras agressivas: Hero, Footer, CTAs escuros */
  --surface-highlight: rgba(233, 209, 153, 0.15);
  /* Gold translúcido para planos / diferenciais */

  /* — 2.2 Tipografia (Hierarquia Visual) ——————————— */
  --text-display: var(--core-navy);
  /* H1, H2, H3 — peso visual máximo */
  --text-body: rgba(5, 28, 81, 0.75);
  /* Parágrafos — alpha reduz fadiga, mantém temperatura */
  --text-inverse: var(--core-offwhite);
  /* Texto sobre surface-inverse ou botões escuros */
  --text-accent: var(--core-gold-dark);
  /* Eyebrows, rótulos, destaques em bold */

  /* — 2.3 Ação e Interação (Botões & Links) ————————— */
  --cta-bg: var(--core-gold-dark);
  /* Botão principal de conversão */
  --cta-bg-hover: #8A6432;
  /* Shade 15% mais escuro — feedback tátil */
  --cta-text: var(--core-white);
  /* Texto do botão — WCAG AAA */
  --link-hover: var(--core-gold-light);
  /* Hover de links nav e footer */

  /* — 2.4 UI (Bordas & Divisores) ————————————————— */
  --border-subtle: rgba(5, 28, 81, 0.08);
  /* Divisores, bordas de cards, linhas de FAQ */
  --border-accent: var(--core-gold-light);
  /* Bordas de elementos ativos / inputs em focus */

  /* ══════════════════════════════════════════════════
     CAMADA 3 — ALIASES (Retrocompatibilidade)
     Mantém --clr-* e --fg/--bg funcionando no style.css
     sem precisar alterar nenhuma outra linha.
  ══════════════════════════════════════════════════ */

  /* Backgrounds */
  --clr-bg: var(--bg-root);
  --clr-surface: var(--surface-card);
  --clr-surface-2: #EFEFEF;
  --clr-surface-3: #E8E8E8;
  --bg: var(--bg-root);
  --bg-2: var(--surface-card);

  /* Cor primária */
  --clr-primary: var(--core-navy);

  /* Bordas */
  --clr-border: var(--border-subtle);
  --clr-border-hover: var(--border-accent);
  --border: var(--border-subtle);

  /* Accents Gold */
  --clr-accent: var(--core-gold-light);
  --clr-accent-light: #f5e8be;
  --clr-accent-dark: var(--core-gold-dark);
  --clr-accent-glow: rgba(163, 121, 64, 0.12);
  --accent-1: var(--core-gold-dark);
  --accent-2: var(--core-gold-dark);
  --accent-4: rgba(5, 28, 81, 0.35);

  /* Texto */
  --clr-text: var(--text-display);
  --clr-text-muted: var(--text-body);
  --clr-text-subtle: rgba(5, 28, 81, 0.28);
  --fg: var(--text-display);
  --fg-2: var(--text-body);
  --fg-3: rgba(5, 28, 81, 0.35);

  /* Estados */
  --clr-success: #2e7d5c;
  --clr-white: var(--core-white);

  /* ══════════════════════════════════════════════════
     TIPOGRAFIA
  ══════════════════════════════════════════════════ */
  --font-heading: 'MADE Evolve Sans', system-ui, -apple-system, sans-serif;
  --font-body: 'MADE Evolve Sans', system-ui, -apple-system, sans-serif;

  /* Escala fluid */
  --size-hero: clamp(2rem, 8vw, 6.5rem);
  --size-h1: clamp(1.8rem, 6.5vw, 5rem);
  --size-h2: clamp(1.5rem, 5vw, 3.25rem);
  --size-h3: clamp(1.1rem, 3.5vw, 1.5rem);
  --size-h4: 1rem;
  --size-body: 0.9375rem;
  --size-sm: 0.8125rem;
  --size-xs: 0.6875rem;
  --size-label: 0.6rem;

  /* Pesos */
  --fw-thin: 100;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Line-heights */
  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-normal: 1.65;
  --lh-relaxed: 1.85;

  /* Letter-spacing */
  --ls-tight: -0.02em;
  --ls-normal: 0em;
  --ls-wide: 0.06em;
  --ls-wider: 0.12em;

  /* ══════════════════════════════════════════════════
     ESPAÇAMENTO
  ══════════════════════════════════════════════════ */
  --section-py: clamp(3.5rem, 7vw, 6.5rem);
  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 5vw, 4rem);
  /* Legacy aliases */
  --pad: clamp(1.25rem, 5vw, 4rem);
  --container: 1280px;

  /* ══════════════════════════════════════════════════
     BORDAS
  ══════════════════════════════════════════════════ */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* ══════════════════════════════════════════════════
     SOMBRAS
  ══════════════════════════════════════════════════ */
  --shadow-sm: 0 1px 4px rgba(5, 28, 81, 0.08);
  --shadow-md: 0 4px 24px rgba(5, 28, 81, 0.12);
  --shadow-lg: 0 12px 60px rgba(5, 28, 81, 0.16);
  --shadow-gold: 0 0 30px rgba(163, 121, 64, 0.12);

  /* ══════════════════════════════════════════════════
     TRANSIÇÕES
  ══════════════════════════════════════════════════ */
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 0.2s var(--ease-expo);
  --t-med: 0.4s var(--ease-expo);
  --t-slow: 0.75s var(--ease-expo);

  /* ══════════════════════════════════════════════════
     Z-INDEX
  ══════════════════════════════════════════════════ */
  --z-base: 1;
  --z-above: 10;
  --z-nav: 100;
}