/* Sonis Panel: shared typography and spacing.
 * Six text sizes at a 16px root: 12 / 14 / 16 / 20 / 24 / 32.
 * Use role tokens for new components; do not add one-off text sizes.
 * Spacing: 2px optical adjustments, then a 4px-based layout scale.
 */
:root {
  --icon-small: 14px;
  --icon-medium: 18px;
  --icon-large: 28px;
  --font-ui: Montserrat, Arial, sans-serif;
  --text-caption: .75rem;
  --text-ui: .875rem;
  --text-body: 1rem;
  --text-subheading: 1.25rem;
  --text-section: 1.5rem;
  --text-page: 2rem;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --leading-icon: 1;
  --leading-heading: 1.25;
  --leading-ui: 1.5;
  --leading-prose: 1.75;
  --tracking-normal: 0;
  --tracking-heading: -.02em;
  --tracking-label: .04em;
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --page-gutter: var(--space-32);
  --panel-padding: var(--space-24);
  --section-gap: var(--space-32);
  --control-height: 38px;
  --control-gap: var(--space-8);
}
@media (max-width: 650px) {
  :root {
    --page-gutter: var(--space-16);
    --panel-padding: var(--space-16);
  }
}