@layer pages, components;
/* Escala visual única para todos os portais e o site institucional. */
:root {
  --space-1: 8px;
  --space-2: 13px;
  --space-3: 21px;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --control-height: 48px;
  --icon-size: 16px;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --text-small: 13px;
  --text-body: 16px;
  --text-title: 21px;
  --text-display: 34px;

  --color-white: #fff;
  --color-ink: #000000;
  --color-gray: #f4f4f6;
  --color-green: #30d158;
  --color-yellow: #ffcc00;
  --color-red: #e13850;

  --color-muted: var(--color-ink);
  --color-soft: var(--color-ink);
  --color-surface: var(--color-gray);
  --color-surface-alt: var(--color-white);
  --color-line: var(--color-gray);
  --color-line-strong: var(--color-gray);
  --color-green-ink: var(--color-ink);
  --color-amber: var(--color-yellow);
  --color-amber-ink: var(--color-ink);
  --color-red-ink: var(--color-red);

  --color-green-fill: var(--color-white);
  --color-green-line: var(--color-green);
  --color-red-fill: var(--color-white);
  --color-red-line: var(--color-red);
  --color-shadow: transparent;
  --color-overlay: var(--color-ink);
}