/* Generated from /home/user/plain-sight-prospects/teasers/memorable-maids/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: #F4F8F9;
  --color-ground-alt: #E3EFF2;
  --color-ink: #16282E;
  --color-ink-muted: #4E646B;
  --color-deep: #07394A;
  --color-on-deep: #DCEDF1;
  --color-accent: #64BCCD;
  --color-accent-ink: #07394A;
  --color-rule: #CFE2E7;

  /* typography */
  --font-display: Archivo, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --text-display: clamp(2.5rem, 1.45rem + 4.3vw, 4rem);
  --font-weight-display: 700;
  --leading-display: 1.06;
  --tracking-display: -0.02em;
  --font-figure: Archivo, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --text-figure: clamp(4rem, 2.2rem + 7.4vw, 7rem);
  --font-weight-figure: 700;
  --leading-figure: 0.92;
  --tracking-figure: -0.03em;
  --font-h2: Archivo, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --text-h2: clamp(1.75rem, 1.35rem + 1.65vw, 2.5rem);
  --font-weight-h2: 700;
  --leading-h2: 1.14;
  --tracking-h2: -0.015em;
  --font-h3: Archivo, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --text-h3: clamp(1.25rem, 1.14rem + 0.45vw, 1.5rem);
  --font-weight-h3: 600;
  --leading-h3: 1.3;
  --tracking-h3: -0.005em;
  --font-body: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --text-body: clamp(1rem, 0.955rem + 0.2vw, 1.125rem);
  --font-weight-body: 400;
  --leading-body: 1.62;
  --font-label: 'Source Sans 3', system-ui, -apple-system, sans-serif;
  --text-label: 0.9375rem;
  --font-weight-label: 600;
  --leading-label: 1.35;
  --tracking-label: 0.005em;

  /* radius */
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-pill: 999px;

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

.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-figure { font-family: var(--font-figure); font-size: var(--text-figure); font-weight: var(--font-weight-figure); line-height: var(--leading-figure); letter-spacing: var(--tracking-figure); }
.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); letter-spacing: var(--tracking-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-pill); padding: 16px 32px; }
.c-button-secondary { background-color: var(--color-ground); 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-pill); padding: 15px 31px; }
.c-proof-plate { background-color: var(--color-accent); color: var(--color-accent-ink); padding: var(--spacing-section) var(--spacing-md); }