/* HIT landing tokens. Layout after DESIGN-clay.md; colours from gethismoney.xyz. Aeonik throughout. */

@font-face { font-family: "Aeonik"; src: url("/fonts/Aeonik-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Aeonik"; src: url("/fonts/Aeonik-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Aeonik"; src: url("/fonts/Aeonik-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  /* Colours from gethismoney.xyz (gethismoney-site/DESIGN.md), light version, matching the tool at /app.
     Dark bands use the site's dark ground. Purple is for actions only. */
  --canvas: #f3f2ee;
  --surface-soft: #e8e6e0;
  --surface-card: #e8e6e0;
  --surface-strong: #dcd9d1;
  --paper: #faf9f6;
  --hairline: rgba(20, 20, 20, .12);
  --dot: #dcd9d1;

  --ink: #141414;
  --body: #35332f;
  --muted: #5d5a54;
  --on-dark: #f6f2ea;
  --on-dark-soft: #d9d4ca;

  --action: #5722cb;
  --action-press: #4719a8;
  --on-action: #ffffff;
  --deep: #0b0b0c;
  --mark: #e0d8f5;

  /* type */
  --font: "Aeonik", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display-hero: 500 clamp(44px, 7.4vw, 96px)/0.98 var(--font);
  --track-hero: -0.04em;
  --display-xl: 500 72px/1 var(--font);
  --display-lg: 500 56px/1.05 var(--font);
  --display-md: 500 40px/1.1 var(--font);
  --display-sm: 500 32px/1.15 var(--font);
  --title-md: 500 20px/1.35 var(--font);
  --lede: 400 clamp(18px, 1.9vw, 22px)/1.4 var(--font);
  --body-lg: 400 19px/1.55 var(--font);
  --body-md: 400 17px/1.55 var(--font);
  --body-sm: 400 14px/1.5 var(--font);
  --button: 500 16px/1 var(--font);
  --track-xl: -2.5px;
  --track-lg: -2px;
  --track-md: -1px;
  --track-sm: -0.5px;

  /* shape */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 9999px;

  /* space */
  --s-xs: 8px;
  --s-sm: 12px;
  --s-md: 16px;
  --s-lg: 24px;
  --s-xl: 32px;
  --s-xxl: 48px;
  --s-band: 80px;
  --s-section: 96px;
  --max: 1200px;
}

@media (max-width: 767px) {
  :root {
    --display-xl: 500 44px/1.02 var(--font);
    --display-lg: 500 36px/1.08 var(--font);
    --display-md: 500 30px/1.12 var(--font);
    --display-sm: 500 26px/1.15 var(--font);
    --track-xl: -1.5px;
    --track-lg: -1px;
    --s-section: 64px;
    --s-band: 40px;
    --s-xl: 24px;
  }
}