/* Generated from docs/DESIGN.md by plain-sight-mockup/scripts/tokens-css.mjs. Don't edit by hand:
   change DESIGN.md and run the script again. */
:root {
  /* colors */
  --color-ground: #F8FAFD;
  --color-ground-alt: #EAF0F8;
  --color-ink: #10161D;
  --color-ink-muted: #4F5E6E;
  --color-deep: #0064D5;
  --color-on-deep: #F2F7FD;
  --color-accent: #0064D5;
  --color-accent-ink: #F8FAFD;
  --color-rule: #D3DEEA;
  --color-signal: #FF9700;

  /* typography */
  --font-display: Chivo, 'Helvetica Neue', Arial, sans-serif;
  --text-display: clamp(2.25rem, 1.35rem + 3.7vw, 3.5rem);
  --font-weight-display: 800;
  --leading-display: 1.06;
  --tracking-display: -0.02em;
  --font-h2: Chivo, 'Helvetica Neue', Arial, sans-serif;
  --text-h2: clamp(1.625rem, 1.2rem + 1.75vw, 2.25rem);
  --font-weight-h2: 700;
  --leading-h2: 1.15;
  --tracking-h2: -0.01em;
  --font-h3: Chivo, 'Helvetica Neue', Arial, sans-serif;
  --text-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --font-weight-h3: 700;
  --leading-h3: 1.25;
  --font-body: Figtree, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --text-body: clamp(1rem, 0.95rem + 0.22vw, 1.125rem);
  --font-weight-body: 400;
  --leading-body: 1.6;
  --font-label: Figtree, system-ui, -apple-system, sans-serif;
  --text-label: 0.9375rem;
  --font-weight-label: 600;
  --leading-label: 1.4;
  --tracking-label: 0.01em;

  /* radius */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-pill: 999px;

  /* spacing */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 48px;
  --spacing-xl: 80px;
  --spacing-section: clamp(72px, 5vw + 48px, 120px);
}

.t-display { font-family: var(--font-display); font-size: var(--text-display); font-weight: var(--font-weight-display); line-height: var(--leading-display); letter-spacing: var(--tracking-display); }
.t-h2 { font-family: var(--font-h2); font-size: var(--text-h2); font-weight: var(--font-weight-h2); line-height: var(--leading-h2); letter-spacing: var(--tracking-h2); }
.t-h3 { font-family: var(--font-h3); font-size: var(--text-h3); font-weight: var(--font-weight-h3); line-height: var(--leading-h3); }
.t-body { font-family: var(--font-body); font-size: var(--text-body); font-weight: var(--font-weight-body); line-height: var(--leading-body); }
.t-label { font-family: var(--font-label); font-size: var(--text-label); font-weight: var(--font-weight-label); line-height: var(--leading-label); letter-spacing: var(--tracking-label); }
.c-button-primary { background-color: var(--color-accent); color: var(--color-accent-ink); font-family: var(--font-label); font-size: var(--text-label); font-weight: var(--font-weight-label); line-height: var(--leading-label); letter-spacing: var(--tracking-label); border-radius: var(--radius-md); padding: 16px 28px; }
.c-button-secondary { background-color: var(--color-ground); color: var(--color-accent); font-family: var(--font-label); font-size: var(--text-label); font-weight: var(--font-weight-label); line-height: var(--leading-label); letter-spacing: var(--tracking-label); border-radius: var(--radius-md); padding: 15px 27px; }
.c-button-on-deep { background-color: var(--color-on-deep); color: var(--color-deep); font-family: var(--font-label); font-size: var(--text-label); font-weight: var(--font-weight-label); line-height: var(--leading-label); letter-spacing: var(--tracking-label); border-radius: var(--radius-md); padding: 16px 28px; }
.c-call-bar { background-color: var(--color-deep); color: var(--color-on-deep); font-family: var(--font-label); font-size: var(--text-label); font-weight: var(--font-weight-label); line-height: var(--leading-label); letter-spacing: var(--tracking-label); height: 64px; }