/* C1 — BRAND TOKENS
   Source of truth: _templates/agents/19-brand-design-sme.md
   Every color, font, and spacing value on the site comes from here. */

:root {
  /* Brand colors */
  --maroon: #5B1A2A;
  --maroon-dark: #44131F;
  --maroon-tint: #F6EEF0;
  --white: #FFFFFF;
  --gray: #F0F0F0;
  --line: #D9D9D9;
  --text: #333333;
  --text-soft: #555555;

  /* Type: serif for the company name and headings, sans-serif for body.
     System fonts only — nothing downloaded, nothing to slow a phone. */
  --font-heading: Georgia, "Times New Roman", Times, serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --size-body: 1.0625rem;
  --size-small: 0.9375rem;
  --size-h1: clamp(2rem, 5vw, 3.25rem);
  --size-h2: clamp(1.5rem, 3.2vw, 2.125rem);
  --size-h3: 1.25rem;
  --line-height: 1.6;

  /* Spacing scale */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;

  /* Layout */
  --page-max: 2200px;
  --gutter: 1.25rem;
  --radius: 4px;
  --tap-min: 48px;
}

/* Large desktop monitors: use the width, and scale type up so lines stay readable. */
@media (min-width: 1700px) {
  :root {
    --size-body: 1.1875rem;
    --size-small: 1.0625rem;
    --size-h3: 1.4375rem;
    --gutter: 3.5rem;
  }
}