/* Design tokens — extraídos das cores/tipografia já usadas no design original */

:root {
  /* Cor — superfícies */
  --color-bg-page: oklch(93% 0.006 75);
  --color-bg-surface: oklch(97.5% 0.005 75);
  --color-bg-header: oklch(97.5% 0.005 75 / 0.92);
  --color-bg-inset: oklch(94.5% 0.006 75);

  /* Cor — texto */
  --color-text-heading: oklch(22% 0.01 60);
  --color-text-body: oklch(42% 0.012 60);
  --color-text-muted: oklch(46% 0.012 60);
  --color-text-label: oklch(38% 0.012 60);
  --color-text-tertiary: oklch(48% 0.012 60);
  --color-text-footer: oklch(50% 0.012 60);
  --color-text-nav-muted: oklch(45% 0.01 60);

  /* Cor — ação */
  --color-action-primary-bg: oklch(30% 0.03 60);
  --color-action-primary-text: oklch(98% 0.004 75);
  --color-action-secondary-border: oklch(80% 0.01 70);

  /* Cor — bordas */
  --color-border-input: oklch(84% 0.01 70);
  --color-border-hairline: oklch(88% 0.01 70);
  --color-border-drawer-divider: oklch(90% 0.01 70);

  /* Cor — acento (teal) */
  --color-accent: oklch(45% 0.06 175);
  --color-accent-hover: oklch(38% 0.07 175);
  --color-icon-badge-bg: oklch(90% 0.03 175);
  --color-icon-stroke: oklch(30% 0.05 175);
  --color-search-btn-bg: oklch(45% 0.06 175);
  --color-search-btn-text: oklch(98% 0.01 175);

  /* Cor — semântica (callouts) */
  --color-good-bg: oklch(93% 0.04 150);
  --color-good-border: oklch(40% 0.1 150);
  --color-bad-bg: oklch(93% 0.04 25);
  --color-bad-border: oklch(48% 0.14 25);

  /* Tipografia */
  --font-body: 'Public Sans', system-ui, sans-serif;
  --font-heading: 'Source Serif 4', serif;

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

  --fs-h1-hero: 32px;
  --fs-h1-article: 27px;
  --fs-h2-home: 22px;
  --fs-h2-article: 20px;
  --fs-h3: 15.5px;
  --fs-body: 16px;
  --fs-body-lead: 16px;
  --fs-meta: 13px;
  --fs-small: 12.5px;
  --fs-tiny: 12px;

  --lh-tight: 1.2;
  --lh-snug: 1.28;
  --lh-normal: 1.5;
  --lh-relaxed: 1.6;
  --lh-loose: 1.65;

  /* Espaçamento (escala de 4px) */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 14px;
  --space-7: 16px;
  --space-8: 18px;
  --space-9: 20px;
  --space-10: 24px;
  --space-11: 28px;
  --space-12: 32px;
  --space-14: 44px;

  /* Raio / layout */
  --radius-sm: 9px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --shell-max-width: 430px;
}