/* 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: #F5F4F2;
  --color-ground-alt: #E5E3E0;
  --color-ink: #1C1A1A;
  --color-ink-muted: #5B5755;
  --color-deep: #2B2B2B;
  --color-on-deep: #F2F0ED;
  --color-accent: #BF1E2E;
  --color-accent-ink: #FFFFFF;
  --color-rule: #CFCCC8;
  --color-rule-deep: #4A4A4A;

  /* typography */
  --font-display: 'Fjalla One', 'Arial Narrow', Impact, sans-serif;
  --text-display: clamp(2.5rem, 1.7rem + 3.3vw, 3.5rem);
  --font-weight-display: 400;
  --leading-display: 1.04;
  --tracking-display: 0.005em;
  --font-h2: 'Fjalla One', 'Arial Narrow', Impact, sans-serif;
  --text-h2: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  --font-weight-h2: 400;
  --leading-h2: 1.1;
  --tracking-h2: 0.005em;
  --font-h3: 'Fjalla One', 'Arial Narrow', Impact, sans-serif;
  --text-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --font-weight-h3: 400;
  --leading-h3: 1.2;
  --tracking-h3: 0.01em;
  --font-body: Barlow, 'Helvetica Neue', Arial, sans-serif;
  --text-body: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
  --font-weight-body: 400;
  --leading-body: 1.6;
  --font-label: Barlow, 'Helvetica Neue', Arial, sans-serif;
  --text-label: 0.8125rem;
  --font-weight-label: 600;
  --leading-label: 1.3;
  --tracking-label: 0.14em;
  --font-button: Barlow, 'Helvetica Neue', Arial, sans-serif;
  --text-button: 0.9375rem;
  --font-weight-button: 600;
  --leading-button: 1.2;
  --tracking-button: 0.02em;
  --font-figure: 'Fjalla One', 'Arial Narrow', Impact, sans-serif;
  --text-figure: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  --font-weight-figure: 400;
  --leading-figure: 1;

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

  /* spacing */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 48px;
  --spacing-xl: 80px;
  --spacing-section: clamp(72px, 4.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-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); }
.t-button { font-family: var(--font-button); font-size: var(--text-button); font-weight: var(--font-weight-button); line-height: var(--leading-button); letter-spacing: var(--tracking-button); }
.t-figure { font-family: var(--font-figure); font-size: var(--text-figure); font-weight: var(--font-weight-figure); line-height: var(--leading-figure); }
.c-button-primary { background-color: var(--color-accent); color: var(--color-accent-ink); font-family: var(--font-button); font-size: var(--text-button); font-weight: var(--font-weight-button); line-height: var(--leading-button); letter-spacing: var(--tracking-button); border-radius: var(--radius-sm); padding: 17px 30px; }
.c-button-ghost { background-color: var(--color-deep); color: var(--color-on-deep); font-family: var(--font-button); font-size: var(--text-button); font-weight: var(--font-weight-button); line-height: var(--leading-button); letter-spacing: var(--tracking-button); border-radius: var(--radius-sm); padding: 16px 29px; }
.c-cred-card { background-color: var(--color-ground); color: var(--color-ink); border-radius: var(--radius-md); padding: 28px 24px; }
.c-service-card { background-color: var(--color-ground); color: var(--color-ink); border-radius: var(--radius-md); padding: 24px 22px; }