/* 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.
 * Neutral colours and corner radii are tokens too: no one-off greys or radii.
 */
:root {
  --icon-small: 14px;
  --icon-medium: 18px;
  --icon-large: 28px;
  /* state colours: working / careful / failed */
  --success: #52e0c4;
  --warning: #f5c26b;
  --danger: #ff8a8a;
  --violet: #8f9cff;
  /* neutral palette: page, surfaces, lines, text from bright to quiet */
  --color-bg: #000421;
  --color-surface-deep: #0d122d;
  --color-surface-sunken: #10172f;
  --color-surface: #1a1d37;
  --color-line-faint: #ffffff0a;
  --color-line: #ffffff16;
  --color-line-strong: #ffffff20;
  --color-text: #fff;
  --color-text-soft: #e8eefc;
  --color-text-dim: #d6def0;
  --color-text-secondary: #adb7d2;
  --color-muted: #9fa5bc;
  --color-text-muted: #93a6c9;
  --color-text-subtle: #8b9bbd;
  /* corner radii: small details, controls, cards, panels, pills, circles */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-pill: 999px;
  --radius-round: 50%;
  --font-ui: Montserrat, Arial, sans-serif;
  --text-micro: .625rem; /* initials and counters in small circles */
  --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-6: 6px;
  --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);
  }
}