/*
  Design tokens: every adjustable value on the site.

  Changing the font (2 steps):
  1. Put the .woff2 file in /fonts/ and uncomment the @font-face template below.
  2. Put "Display", at the start of --font-display (or --font-body).
  Optional: add <link rel="preload" href="/fonts/display.woff2" as="font" type="font/woff2" crossorigin>
  to the shared head in all 5 pages. crossorigin is required even on our own domain,
  otherwise the font downloads twice. Fonts are self-hosted only, never a font CDN.
*/

/* @font-face {
     font-family: "Display";
     src: url("/fonts/display.woff2") format("woff2");
     font-weight: 100 900;
     font-display: swap;
   } */

:root {
  /* Colors */
  --color-bg:      #FBF9F7;  /* page and overscroll background, sticky header background */
  --color-surface: #F1ECE6;  /* footer */
  --color-card:    #FFFFFF;  /* feature cards */
  --color-heading: #1C334D;  /* H1, H2, H3 only */
  --color-text:    #596A78;  /* everything else */
  --color-divider: rgb(28 51 77 / 0.08);  /* lines between FAQ items */

  /* A crisp contact edge plus a wide, faint ambient layer, so large cards lift without a grey halo */
  --shadow-card: 0 1px 2px rgb(28 51 77 / 0.04), 0 8px 32px rgb(28 51 77 / 0.05);
  /* Stronger than the cards: white app screens on the off-white page need the shadow to show their edge */
  --shadow-screen: 0 1px 3px rgb(28 51 77 / 0.08), 0 12px 40px rgb(28 51 77 / 0.12);

  /* Typography: exactly four sizes */
  --font-display: ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --size-h1:   2.5rem;     /* 40px */
  --size-h2:   1.75rem;    /* 28px */
  --size-h3:   1.25rem;    /* 20px */
  --size-body: 1.0625rem;  /* 17px, iOS body size */

  --weight-heading: 600;
  --weight-body:    400;
  --leading-heading: 1.1;
  --leading-body:    1.5;
  --tracking-heading: -0.02em;

  /* Spacing */
  --space-1: 0.5rem;   /*  8px */
  --space-2: 1rem;     /* 16px */
  --space-3: 1.5rem;   /* 24px */
  --space-4: 2.5rem;   /* 40px */
  --space-5: 4rem;     /* 64px */
  --space-6: 6.5rem;   /* 104px */
  --space-7: 9rem;     /* 144px */

  /* Layout */
  --width-page: 68.75rem;  /* 1100px */
  --width-text: 65ch;
  --gutter:     1.25rem;

  /* Components */
  --tap-target:   2.75rem;  /* 44px minimum tap target */
  --icon-size:    2rem;     /* app icon in header and footer, step number chip */
  --badge-small:  2.5rem;   /* App Store badge in the header */
  --badge-large:  3.5rem;   /* App Store badge in hero and final CTA */
  --device-max-height: 45rem;  /* 720px, hero iPhone screen */
  --header-height: calc(var(--tap-target) + 2 * var(--space-2));
}

@media (min-width: 48rem) {
  :root {
    --size-h1: 4rem;     /* 64px */
    --size-h2: 2.5rem;   /* 40px */
  }
}