/* ==========================================================================
   Design Tokens — Dr. Luiz Lippi
   Fonte de verdade: specs/design.md
   Breakpoints (mobile-first; não podem ser variáveis dentro de @media):
     tablet: 48em (768px) · desktop: 64em (1024px) · wide: 80em (1280px)
   ========================================================================== */

:root {
  /* ---------- Paleta bruta ---------- */
  --color-sage-100: #DDE3D6;
  --color-sage-500: #74826B; /* Cor oficial da marca (SVG) */
  --color-sage-600: #5E6B56;
  --color-sage-700: #56634F;
  --color-sage-800: #4E5A47;
  --color-ink-900: #252525;  /* Chumbo oficial da marca (SVG) */
  --color-ink-600: #5C5A55;
  --color-stone-400: #8A857B;
  --color-stone-200: #E2DDD2;
  --color-cream-100: #F4F1EA;
  --color-white: #FFFFFF;

  /* ---------- Cores semânticas ----------
     Contrastes WCAG documentados em specs/design.md */
  --bg-primary: var(--color-cream-100);
  --bg-surface: var(--color-white);
  --bg-tint: var(--color-sage-100);
  --bg-brand: var(--color-sage-500);   /* Somente texto grande (>=24px) ou decorativo */
  --bg-inverse: var(--color-sage-600); /* Blocos verdes com texto corrido */

  --text-main: var(--color-ink-900);
  --text-muted: var(--color-ink-600);
  --text-on-dark: var(--color-white);

  --brand: var(--color-sage-500);
  --accent: var(--color-sage-700);
  --accent-hover: var(--color-sage-800);

  --border-subtle: var(--color-stone-200); /* Divisores decorativos */
  --border-strong: var(--color-stone-400); /* Campos de formulário (>=3:1) */

  --focus-ring: var(--color-ink-900);
  --focus-ring-on-dark: var(--color-white);

  /* ---------- Tipografia ---------- */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Escala fluida: viewport 360px -> 1280px */
  --step--1: clamp(0.875rem, 0.8505rem + 0.1087vw, 0.9375rem); /* 14 -> 15px  labels */
  --step-0:  clamp(1.125rem, 1.1005rem + 0.1087vw, 1.1875rem); /* 18 -> 19px  corpo */
  --step-1:  clamp(1.25rem, 1.1522rem + 0.4348vw, 1.5rem);      /* 20 -> 24px  lead / h4 */
  --step-2:  clamp(1.5rem, 1.3043rem + 0.8696vw, 2rem);         /* 24 -> 32px  h3 */
  --step-3:  clamp(1.875rem, 1.5326rem + 1.5217vw, 2.75rem);    /* 30 -> 44px  h2 */
  --step-4:  clamp(2.5rem, 1.913rem + 2.6087vw, 4rem);          /* 40 -> 64px  h1 */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.65;

  --tracking-label: 0.08em;
  --measure: 65ch;

  /* ---------- Espaçamento (base 4px) ---------- */
  --space-1: 0.25rem;  /*   4px */
  --space-2: 0.5rem;   /*   8px */
  --space-3: 0.75rem;  /*  12px */
  --space-4: 1rem;     /*  16px */
  --space-5: 1.5rem;   /*  24px */
  --space-6: 2rem;     /*  32px */
  --space-7: 3rem;     /*  48px */
  --space-8: 4rem;     /*  64px */
  --space-9: 6rem;     /*  96px */
  --space-10: 8rem;    /* 128px */

  --section-y: clamp(4rem, 2.4348rem + 6.9565vw, 8rem); /* 64 -> 128px */

  /* ---------- Layout ---------- */
  --container-max: 75rem; /* 1200px */
  --gutter: clamp(1rem, 0.6087rem + 1.7391vw, 2rem); /* 16 -> 32px */
  --tap-min: 3rem; /* 48px — alvo mínimo de toque/clique */
  --header-h: 4.5rem;

  /* ---------- Formas ---------- */
  --radius-sm: 0.5rem;   /*  8px */
  --radius-md: 1rem;     /* 16px */
  --radius-lg: 1.5rem;   /* 24px — cards e imagens */
  --radius-xl: 2rem;     /* 32px — topo das seções "folha" */
  --radius-pill: 999px;  /* botões */

  --shadow-sm: 0 1px 2px rgb(37 37 37 / 0.06), 0 2px 8px rgb(37 37 37 / 0.04);
  --shadow-md: 0 4px 12px rgb(37 37 37 / 0.06), 0 12px 32px rgb(37 37 37 / 0.06);

  /* ---------- Movimento ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 600ms;

  /* ---------- Camadas ---------- */
  --z-base: 1;
  --z-header: 100;
  --z-overlay: 200;
}