/* ==========================================================================
   Geovane Guedes Advocacia — Design Tokens
   ========================================================================== */

:root {
  /* Cores */
  --color-primary: #0F2747;
  --color-secondary: #183B56;
  --color-accent: #1F6F78;
  --color-accent-hover: #0F5F68;
  --color-background: #F7F9FC;
  --color-surface: #FFFFFF;
  --color-text: #172033;
  --color-muted: #637083;
  --color-border: #DDE4EC;
  --color-soft: #E8F2F3;

  --color-focus: #1F6F78;
  --color-overlay: rgba(15, 39, 71, 0.55);

  /* Tipografia */
  --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* H1/H2 usam clamp() em layout.css (--fs-h1/--fs-h1-mobile e
     --fs-h2/--fs-h2-mobile continuam aqui só como os extremos min/max desse
     clamp — nada mais os lê diretamente). Antes pulavam de um tamanho fixo
     para outro exatamente em 960px; agora escalam de forma contínua entre
     375–1280px, e o teto subiu um pouco (H1: 56px→60px, H2: 42px→46px) para
     mais presença editorial em telas grandes. */
  --fs-h1: 3.75rem;
  --fs-h1-mobile: 2.5rem;
  --fs-h2: 2.875rem;
  --fs-h2-mobile: 1.875rem;
  --fs-h3: 1.5rem;
  --fs-h3-mobile: 1.375rem;
  --fs-body: 1.0625rem;
  --fs-body-lg: 1.1875rem;
  --fs-small: 0.9375rem;
  --fs-xs: 0.875rem;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 650;

  --lh-heading: 1.15;
  --lh-body: 1.65;

  --measure: 720px;

  /* Espaçamento (múltiplos de 8px) */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 80px;
  --space-9: 96px;
  --space-10: 128px;

  /* Layout */
  --container-max: 1240px;
  --container-padding-mobile: 20px;

  /* Raio */
  --radius-button: 12px;
  --radius-card: 20px;
  --radius-card-sm: 16px;
  --radius-input: 10px;

  /* Sombra */
  --shadow-sm: 0 1px 2px rgba(15, 39, 71, 0.06);
  --shadow-md: 0 8px 24px rgba(15, 39, 71, 0.08);
  --shadow-header: 0 1px 0 rgba(15, 39, 71, 0.06);

  /* Transições */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  /* Ease-out mais "forte" (entra rápido, desacelera no fim) — usado em
     controles pequenos que precisam parecer responsivos (botão, seta,
     hover de linha). --ease (acima) continua reservada para transições só
     de cor/estado. Uma curva a mais, não cinco espalhadas pelo CSS. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --duration-fast: 200ms;
  --duration-base: 450ms;
  --duration-slow: 650ms;

  /* Header */
  --header-height: 88px;
  --header-height-scrolled: 68px;

  /* Z-index */
  --z-header: 100;
  --z-overlay: 200;
  --z-menu: 210;
  --z-skiplink: 999;
}