/* Shared SMP design tokens. Forms and later shared pieces use these names only. */
:root {
  --smp-color-text: #172033;
  --smp-color-muted: #5c6b80;
  --smp-color-surface: #ffffff;
  --smp-color-surface-2: #f4f7fb;
  --smp-color-border: #d5deea;
  --smp-color-focus: #1d4e89;
  --smp-color-invalid: #a32020;
  --smp-color-invalid-bg: #fdecec;
  --smp-color-accent: #1d4e89;
  --smp-color-on-accent: #ffffff;
  --smp-font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --smp-font-size: 1rem;
  --smp-font-size-sm: 0.875rem;
  --smp-line-height: 1.4;
  --smp-space-1: 0.25rem;
  --smp-space-2: 0.5rem;
  --smp-space-3: 0.75rem;
  --smp-space-4: 1rem;
  --smp-space-touch: 2.75rem;
  --smp-radius: 0.5rem;
  --smp-z-field: 1;
  --smp-z-dropdown: 30;
  --smp-z-modal: 40;
}

body.dark-mode {
  --smp-color-text: #e7eef8;
  --smp-color-muted: #b7c3d4;
  --smp-color-surface: #1b2433;
  --smp-color-surface-2: #121a27;
  --smp-color-border: #3a4a61;
  --smp-color-focus: #8eb6e8;
  --smp-color-invalid: #ffb4b4;
  --smp-color-invalid-bg: #3a2428;
  --smp-color-accent: #8eb6e8;
  --smp-color-on-accent: #102033;
}