/* ===========================================================================
   Passos Costa Advogados — Design Tokens
   Espelha o Design System do Figma (design-system.md)
   =========================================================================== */

:root {
  /* --- Primitivas de cor --- */
  --green-900: #06583d;
  --green-600: #087854;   /* WCAG AA: 4.53:1 sobre o fundo claro */
  --mint-200:  #badfbe;
  --paper-100: #e8eae6;
  --ink-900:   #282828;
  --gray-500:  #6a696b;   /* escurecido p/ WCAG AA: 4.51:1 sobre o fundo claro */
  --white:     #ffffff;
  --cream:     #f4f5f2;

  /* --- Semânticas --- */
  --color-bg-base:        var(--paper-100);
  --color-bg-surface:     var(--white);
  --color-bg-emphasis:    var(--green-900);
  --color-bg-soft:        var(--mint-200);
  --color-text-primary:   var(--ink-900);
  --color-text-secondary: var(--gray-500);
  --color-text-on-emphasis: var(--cream);
  --color-accent-primary: var(--green-600);
  --color-accent-secondary: var(--mint-200);
  --color-border-hairline: rgba(120, 119, 121, 0.22);
  --color-border-on-emphasis: rgba(244, 245, 242, 0.18);

  /* --- Espaçamento (base 8px) --- */
  --spacing-3xs: 4px;
  --spacing-2xs: 8px;
  --spacing-xs:  12px;
  --spacing-sm:  16px;
  --spacing-md:  24px;
  --spacing-lg:  32px;
  --spacing-xl:  48px;
  --spacing-2xl: 64px;
  --spacing-3xl: 96px;
  --spacing-4xl: 120px;
  --spacing-5xl: 160px;

  /* --- Raio --- */
  --radius-none: 0;
  --radius-sm:   4px;
  --radius-full: 999px;

  /* --- Tipografia --- */
  --font-display: "Hahmlet", "Times New Roman", serif;
  --font-body: "Mozilla Text", system-ui, -apple-system, sans-serif;

  --fs-display: clamp(48px, 6.5vw, 92px);
  --fs-h1:      clamp(40px, 4.4vw, 60px);
  --fs-h2:      clamp(30px, 3vw, 40px);
  --fs-h3:      clamp(20px, 1.7vw, 24px);
  --fs-body-lg: clamp(18px, 1.3vw, 20px);
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-eyebrow: 13px;

  /* --- Layout / Grid (1440 artboard) --- */
  --artboard: 1440px;
  --container: 1216px;   /* 1440 - 2*112 */
  --margin-x: 112px;
  --gutter: 32px;

  /* --- Elevação --- */
  --shadow-subtle: 0 1px 2px rgba(40, 40, 40, 0.06);
  --shadow-card:   0 8px 24px rgba(40, 40, 40, 0.08);
  --shadow-float:  0 8px 28px rgba(6, 88, 61, 0.28);

  /* --- Motion --- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-micro: 200ms;
  --dur-fade: 400ms;
  --dur-section: 700ms;
}