/* Design tokens. Breakpoint variables are documentation values; media queries use the matching literals. */

:root {
  --app-pad-inline: clamp(1.25rem, 5vw, 6rem);
  --brand-primary: #14b59a;
  --brand-secondary: #168ed3;
  --brand-accent: #5043db;
  --text-primary: #000036;
  --text-inverse: #ffffff;
  --font-sans:
    "Segoe UI Variable", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-display: Manrope, var(--font-sans);
  --text-muted: rgb(0 0 54 / 0.65);
  --text-soft: rgb(0 0 54 / 0.56);
  --text-subtle: rgb(0 0 54 / 0.46);
  --text-faint: rgb(0 0 54 / 0.34);
  --header-foreground: var(--text-inverse);
  --header-muted: rgb(255 255 255 / 0.78);
  --background: #f4fbfa;
  --surface: #ffffff;
  --surface-subtle: rgb(0 0 54 / 0.04);
  --surface-muted: rgb(0 0 54 / 0.06);
  --worksheet-paper: rgb(255 255 255 / 0.92);
  --worksheet-wash: rgb(20 181 154 / 0.08);
  --worksheet-rule: rgb(0 0 54 / 0.1);
  --worksheet-rule-strong: rgb(0 0 54 / 0.16);
  --worksheet-inset: rgb(255 255 255 / 0.72);
  --worksheet-ink-soft: rgb(0 0 54 / 0.62);
  --worksheet-ink-muted: rgb(0 0 54 / 0.44);
  --worksheet-accent: rgb(22 142 211 / 0.12);
  --foreground: var(--text-primary);
  --border: rgb(0 0 54 / 0.12);
  --border-subtle: rgb(0 0 54 / 0.08);
  --ring: var(--brand-accent);
  --brand-primary-soft: rgb(20 181 154 / 0.12);
  --brand-secondary-soft: rgb(22 142 211 / 0.12);
  --survey-art-line: rgb(22 142 211 / 0.25);
  --survey-art-line-soft: rgb(20 181 154 / 0.2);
  --survey-art-glow: rgb(255 255 255 / 0.72);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --line-height-body: 1.6;
  --breakpoint-sm: 40rem;
  --breakpoint-md: 48rem;
  --breakpoint-lg: 64rem;
}

@media (max-width: 768px) {
  :root {
    --app-pad-inline: clamp(1.25rem, 4vw, 2rem);
  }
}