/* ============================================================
   LÚMEN PERÍCIAS & CONSULTORIA — DESIGN SYSTEM (TOKENS)
   Universo LPC. Extraído de landing-page-v2.html e formalizado.
   Fonte única de verdade visual. Não inventar tokens fora daqui.
   ============================================================ */

/* Fontes self-hosted (variable woff2, mesma origem: sem ida ao Google, FCP mais rápido) */
@font-face { font-family: 'Outfit'; src: url('/lp-assets/fonts/outfit-var.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('/lp-assets/fonts/montserrat-var.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  /* ---- Cores da marca (dark premium) ---- */
  --midnight: #251A74;        /* principal */
  --deep: #1A1353;            /* gradientes escuros */
  --ink: #0D0A2E;             /* background base */
  --dark-surface: #111027;    /* superfície de seção alternada */

  /* ---- Superfície translúcida sobre dark ---- */
  --dark-card: rgba(255, 255, 255, 0.05);
  --dark-card-hover: rgba(255, 255, 255, 0.07);
  --dark-border: rgba(255, 255, 255, 0.08);
  --dark-border-strong: rgba(255, 255, 255, 0.14);

  /* ---- Texto sobre dark ---- */
  --dark-text: rgba(255, 255, 255, 0.92);
  --dark-muted: rgba(255, 255, 255, 0.55);
  --dark-subtle: rgba(255, 255, 255, 0.35);
  --white: #FFFFFF;

  /* ---- Semânticas ---- */
  --wa-green: #25D366;
  --wa-green-hover: #1EBE5A;
  --accent-green: #2D7A4B;
  --alert-red: #C53030;          /* ícone de dor (era hardcoded no baseline) */
  --field-error: #FF8A8A;

  /* ---- Tipografia ---- */
  --font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Outfit', var(--font);

  --fs-h1: clamp(2.5rem, 5vw, 3.75rem);
  --fs-h2: clamp(1.75rem, 3vw, 2.5rem);
  --fs-h2-cta: clamp(1.5rem, 3vw, 2.25rem);
  --fs-h2-final: clamp(2rem, 4vw, 3rem);
  --fs-h3: 1.0625rem;
  --fs-body: 1rem;
  --fs-lead: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-xsmall: 0.75rem;
  --fs-eyebrow: 0.6875rem;

  /* ---- Layout ---- */
  --container-max: 1120px;
  --container-pad: clamp(20px, 5vw, 40px);
  --nav-pad-x: clamp(20px, 5vw, 80px);
  --section-y: 120px;
  --section-y-mobile: 72px;

  /* ---- Raios ---- */
  --radius-card: 24px;
  --radius-field: 14px;
  --radius-icon: 12px;
  --radius-pill: 980px;

  /* ---- Sombras ---- */
  --shadow-glow: 0 8px 40px rgba(37, 211, 102, 0.3);
  --shadow-glow-soft: 0 4px 20px rgba(37, 211, 102, 0.25);
  --shadow-float: 0 4px 20px rgba(37, 211, 102, 0.35);
  --shadow-card: 0 20px 60px rgba(0, 0, 0, 0.35);

  /* ---- Movimento ---- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 200ms;
  --t-base: 220ms;
  --t-slow: 300ms;

  /* ---- Foco (acessibilidade) ---- */
  --focus-ring: 0 0 0 3px rgba(37, 211, 102, 0.55);

  /* ---- Camadas ---- */
  --z-nav: 50;
  --z-float: 100;

  /* Breakpoint de referência (documental): 768px = mobile.
     CSS não interpola var() em @media; o valor é usado direto nas media queries. */
}