/* ==========================================================================
   Oh Fax — design tokens
   Every color, type, spacing and grid value lives here. site.css only
   references these custom properties.
   ========================================================================== */

/* --- Self-hosted fonts (latin subset, from Google Fonts; no third-party requests)
   Newsreader: one variable file covering opsz 6–72 and wght 400–600 (roman only;
   no italic is used anywhere). Inter: one variable file covering 500–600 (500 is what the pages use).
   IBM Plex Mono 400: literal code only (the MCP command, paths like /pay). */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/newsreader-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("fonts/inter-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- Color (the complete palette; add nothing) -------------------------
     All text is --ink or --error. There is no secondary/muted text color. */
  --ink: #1c1b17;          /* all text, primary button, firm rules (15.5:1 on paper) */
  --paper: #f7f3e8;        /* page background */
  --paper-raised: #fbf8f0; /* inputs, code box */
  --rule: #d9d2bf;         /* hairlines and field borders (never text) */
  --amber: #c9870a;        /* ONLY: focus rings, link hover. Measures 2.7:1 on paper, so never body text. */
  --error: #a3261c;        /* errors only: invalid field border + its message.
                              6.64:1 on --paper #f7f3e8, 6.94:1 on --paper-raised (WCAG AA needs 4.5:1). */

  /* --- Type families ------------------------------------------------------ */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;                  /* display, body, nav */
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* literal code only */
  --ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;           /* buttons + form labels only */

  /* --- Type scale --------------------------------------------------------
     Nothing below 16px. The single exception is --fs-15, which is used only
     inside the MCP command box. */
  --fs-15: 15px;  --lh-15: 24px;   /* code box only */
  --fs-16: 16px;  --lh-16: 24px;   /* UI controls: buttons, field labels */
  --fs-17: 17px;  --lh-17: 27px;   /* body, mobile */
  --fs-18: 18px;  --lh-18: 28px;   /* nav, footer */
  --fs-19: 19px;  --lh-19: 30px;   /* body, desktop */
  --fs-22: 22px;  --lh-22: 32px;
  --fs-30: 30px;  --lh-30: 36px;
  --fs-34: 34px;  --lh-34: 40px;   /* section headlines, desktop */
  --fs-44: 44px;  --lh-44: 48px;
  --fs-72: 72px;  --lh-72: 72px;

  /* Semantic roles — the mobile block below re-points these, not the scale. */
  --fs-body: var(--fs-19);     --lh-body: var(--lh-19);
  --fs-hero: var(--fs-72);     --lh-hero: var(--lh-72);
  --fs-display: var(--fs-44);  --lh-display: var(--lh-44);
  --fs-price: var(--fs-44);    --lh-price: var(--lh-44);   /* hero price line */
  --fs-lead: var(--fs-34);     --lh-lead: var(--lh-34);    /* section headlines (h2) */

  --wt-body: 400;
  --wt-display: 600;           /* h1 */
  --wt-display-2: 500;         /* h2, price lines */
  --track-display: -0.02em;

  /* --- Spacing (8px unit) ------------------------------------------------- */
  --u: 8px;
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 40px;
  --s-6: 48px;
  --s-8: 64px;
  --s-10: 80px;
  --s-12: 96px;
  --s-15: 120px;
  --section-pad: var(--s-12);  /* 96px desktop, 64px mobile */

  /* --- Grid --------------------------------------------------------------- */
  --cols: 12;
  --content-max: 1280px;
  --gutter: 32px;
  --side-pad: 40px;
  --measure: 34em;

  /* --- Controls ----------------------------------------------------------- */
  --radius: 2px;
  --btn-h: 52px;
  --hairline: 1px solid var(--rule);
  --focus-ring: 2px solid var(--amber);
  --focus-offset: 3px;
}

/* Mobile (keep in sync with the 900px breakpoint in site.css) */
@media (max-width: 899.98px) {
  :root {
    --fs-body: var(--fs-17);     --lh-body: var(--lh-17);
    --fs-hero: var(--fs-44);     --lh-hero: var(--lh-44);
    --fs-display: var(--fs-30);  --lh-display: var(--lh-30);
    --fs-price: var(--fs-30);    --lh-price: var(--lh-30);
    --fs-lead: var(--fs-22);     --lh-lead: var(--lh-22);
    --section-pad: var(--s-8);
    --side-pad: 20px;
  }
}