/* ==========================================================================
   TOKENS.CSS — Paleta Oficial da Marca & Tipografia de Alta Legibilidade (50+)
   Dartora & Cemzi Advogados Associados
   ========================================================================== */

:root {
  /* Paleta Oficial com Contraste Elevado (WCAG AAA para leitura 50+) */
  --color-primary: #8B2B28;          /* Bordô / Vinho Institucional Oficial */
  --color-primary-dark: #641D1B;     /* Bordô Profundo para Hover e Destaque */
  --color-primary-subtle: rgba(139, 43, 40, 0.09);
  --color-secondary: #222222;        /* Grafite Escuro de Alto Contraste */
  --color-charcoal: #141414;         /* Carvão Profundo para Títulos e Rodapé */
  --color-text: #2B2B2B;             /* Texto Principal Escuro e Nítido (AAA) */
  --color-text-muted: #525252;       /* Subtítulos e Metadados Legíveis (sem cinza apagado) */
  --color-white: #FFFFFF;            /* Branco Oficial */
  --color-paper: #F8F6F3;            /* Papel Marfim Editorial */
  --color-paper-warm: #F1EDE6;       /* Superfície Secundária Editorial */
  --color-border: #DDD6CC;           /* Fio Editorial Visível */
  --color-border-strong: #BFB5A8;

  /* Famílias Tipográficas — Traços Fortes e Abertos para Leitura Confortável */
  --font-display: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --font-sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Escala Tipográfica Ampliada para Público 50+ */
  --text-xs: 0.875rem;               /* Mínimo 14px (nunca 12px) */
  --text-sm: 0.95rem;                /* ~15.2px */
  --text-base: 1.0625rem;            /* 17px base */
  --text-md: 1.1875rem;              /* 19px para subtítulos e leads */
  --text-lg: clamp(1.25rem, 1.6vw, 1.5rem);
  --text-xl: clamp(1.45rem, 2.2vw, 1.95rem);
  --text-2xl: clamp(1.85rem, 3.2vw, 2.75rem);
  --text-hero: clamp(2.15rem, 4.2vw, 3.5rem);
  --text-monument: clamp(4.25rem, 9vw, 7.5rem);

  /* Layout e Espaçamentos */
  --container-max: 1280px;
  --container-narrow: 860px;
  --header-height: 86px;
  --section-py: clamp(3.75rem, 7vw, 6.5rem);
  --grid-gap: clamp(1.5rem, 2.5vw, 2.5rem);

  /* Transições e Sombras Editoriais */
  --ease-editorial: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-subtle: 0 12px 32px -12px rgba(20, 20, 20, 0.1);
  --shadow-elevated: 0 24px 48px -12px rgba(20, 20, 20, 0.18);
}

@media (max-width: 768px) {
  :root {
    --header-height: 70px;
    --section-py: 3.25rem;
  }
}