/* BM Color & Font — Design Tokens
   Typography:
     Headlines — Cal Sans (display, via Fontsource CDN; @font-face below)
     Body      — Onest (Google Fonts)
   Load in HTML:
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Onest:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
   (Cal Sans loads automatically from this stylesheet's @font-face — no extra <link> needed.)
*/

@font-face {
  font-family: "Cal Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/cal-sans@latest/latin-400-normal.woff2") format("woff2");
}

:root {
  /* ---------- Color: Surfaces ---------- */
  --color-page:         #FDFBF6;  /* app/page background — warm off-white */
  --color-surface:      #F8F3E8;  /* elevated surface / card */
  --color-hairline:     #E8DFC9;  /* dividers, 1px borders */

  /* ---------- Color: Ink (text) ---------- */
  --color-ink-display:  #181412;  /* display & headings */
  --color-ink-body:     #524A40;  /* body copy */
  --color-ink-muted:    #9D968A;  /* meta / captions / placeholders */

  /* ---------- Color: Accent (primary action) ---------- */
  --color-accent:        #EA580C;
  --color-accent-hover:  #C2410C;
  --color-accent-faded:  #FFEDD5;

  /* ---------- Color: Signal (secondary / informational) ---------- */
  --color-signal:        #155E75;
  --color-signal-hover:  #0E4A5E;
  --color-signal-faded:  #CFFAFE;

  /* ---------- Typography: Family ---------- */
  --font-sans: "Onest", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Cal Sans", var(--font-sans);  /* headlines */

  /* ---------- Typography: Weights ---------- */
  --fw-light:    300;  /* @kind font */
  --fw-regular:  400;  /* @kind font */
  --fw-medium:   500;  /* @kind font */
  --fw-semibold: 600;  /* @kind font */
  --fw-bold:     700;  /* @kind font */
  --fw-extra:    800;  /* @kind font */

  /* ---------- Typography: Scale (type ramp) ---------- */
  --fs-display:  clamp(3rem, 6vw, 4.5rem);   /* @kind font */ /* 48-72px */
  --fs-h1:       clamp(2.25rem, 4vw, 3rem);  /* @kind font */ /* 36-48px */
  --fs-h2:       2rem;                       /* 32 @kind font */
  --fs-h3:       1.5rem;                     /* 24 @kind font */
  --fs-h4:       1.25rem;                    /* 20 @kind font */
  --fs-body-lg:  1.125rem;                   /* 18 @kind font */
  --fs-body:     1rem;                       /* 16 @kind font */
  --fs-small:    0.875rem;                   /* 14 @kind font */
  --fs-caption:  0.75rem;                    /* 12 @kind font */

  /* ---------- Typography: Line height ---------- */
  --lh-tight:  1.1;   /* @kind font */
  --lh-snug:   1.25;  /* @kind font */
  --lh-normal: 1.5;   /* @kind font */
  --lh-loose:  1.7;   /* @kind font */

  /* ---------- Typography: Tracking ---------- */
  --ls-tight:  -0.02em;  /* @kind font */
  --ls-snug:   -0.01em;  /* @kind font */
  --ls-normal: 0;        /* @kind font */
  --ls-wide:   0.04em;   /* @kind font */
  --ls-eyebrow: 0.12em;  /* @kind font */
}

/* ---------- Base ---------- */
html {
  background: var(--color-page);
  color: var(--color-ink-body);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body { margin: 0; }

/* ---------- Semantic type ---------- */
.display, h1.display {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-ink-display);
  text-wrap: balance;
}

h1, h2, h3, h4 { font-family: var(--font-display); }

h1 {
  font-weight: var(--fw-regular);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-ink-display);
  text-wrap: balance;
}

h2 {
  font-weight: var(--fw-regular);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--color-ink-display);
  text-wrap: balance;
}

h3 {
  font-weight: var(--fw-regular);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--color-ink-display);
}

h4 {
  font-weight: var(--fw-regular);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--color-ink-display);
}

p {
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--color-ink-body);
  text-wrap: pretty;
}

.lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-loose);
  color: var(--color-ink-body);
}

small, .small { font-size: var(--fs-small); color: var(--color-ink-muted); }
.caption { font-size: var(--fs-caption); color: var(--color-ink-muted); }

.eyebrow {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--color-ink-muted);
}

/* ---------- Links ---------- */
a {
  color: var(--color-signal);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--color-signal-hover); }