/* ============================================================
   brands/harperos.css — THE BRAND OVERLAY (harperOS).

   One file = one brand. It defines every token the block sheet reads
   — the typefaces, the ink ramp, the accent, the fields — and the
   @font-face rules that load the brand's own type. It contains ZERO
   structure: what a block IS lives in client-site.css, which reads
   only var() and may not contain a raw color or font literal
   (enforced — check-block-system rule 5).

   A new client brand = a copy of this file with its own values, plus
   `brand: "slug"` in that family's _family.mjs. Nothing else changes.
   Doctrine: KNW_ST_MC_Design-Blocks-Doctrine.md (harperOS repo).
   ============================================================ */

/* Self-hosted latin subsets — same origin, so a click never waits on an
   external DNS + TLS chain before text can paint. Source: Google Fonts. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/shared/fonts/inter-400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/shared/fonts/inter-500.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/shared/fonts/inter-600.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/shared/fonts/jetbrains-mono-400.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/shared/fonts/jetbrains-mono-500.woff2') format('woff2');}
@font-face{font-family:'Ponomar';font-style:normal;font-weight:400;font-display:swap;src:url('/shared/fonts/ponomar-400.woff2') format('woff2');}

:root {
  --accent: #00AF7B;
  --accent-soft: #E6F7F1;
  --ink: #181428;
  --ink-muted: #434343;
  --ink-subtle: #75706E;
  --status-error: #FE5606;  /* a field or a send that failed: design-tokens status.error; a rule, never text */
  --rule: #E2E1DE;
  --rule-soft: #EFEEEC;
  --field: #F7F7F6;   /* screen field. #FFFFFF is the PAGE (document) field — never the screen section bg. */
  --alt: #FFFFFF;     /* element fill only (cards), per the shipped shell. Never a section background. */
  --footer-line: rgba(247,247,246,.55);   /* footer tagline on the dark footer ground */
  --footer-conf: rgba(247,247,246,.48);  /* footer confidentiality line, quieter; .48 is the least that holds 4.5:1 on ink with margin (4.68:1) */

  /* overlays a block draws on a picture or a press-to-load box. A brand may set them (a glass note: a translucent
     surface and a blur; a provider-colored play mark); harperOS keeps them flat and in ink (Law 4: green marks one
     thing; the Flat law: no blur) */
  --xload-mark: var(--ink);        /* the play or open mark on a hosted video or page, before the press */
  --note-surface: var(--field);    /* a picture point's note */
  --note-rule: var(--rule);
  --note-ink: var(--ink);
  --note-ink-muted: var(--ink-muted);
  --note-blur: 0px;

  --font-display: 'Ponomar', 'Tiempos Headline', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* the type scale: one size per text role, read by the block sheet (font-size: var(--type-…)) */
  --type-title: clamp(40px, 8vw, 64px);
  --type-section: clamp(32px, 4.8vw, 48px);
  --type-subsection: clamp(20px, 2.6vw, 24px);
  --type-lede: clamp(16px, 1.8vw, 18px);
  --type-step: clamp(24px, 3vw, 30px);
  --type-card-title: clamp(22px, 3vw, 28px);
  --type-figure: clamp(26px, 4vw, 34px);
  --type-price: clamp(30px, 4vw, 40px);
  /* corners: 0 is the Square law */
  --type-site-title: clamp(36px, 5vw, 56px);
  --type-site-section: clamp(28px, 3.5vw, 40px);
  --type-chapter: clamp(24px, 3.2vw, 32px);
  --type-chapter-lede: clamp(16px, 1.8vw, 17px);
  --type-section-dense: clamp(32px, 5.5vw, 40px);
  --type-figure-large: clamp(32px, 6vw, 48px);
  --type-entry-title: clamp(18px, 2vw, 20px);
  --type-agent-name: clamp(20px, 2.4vw, 22px);
  --radius: 0;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  --maxw: 1180px;
  --gutter: var(--s4); /* mobile base; cascades up at 768 / 1024 */

}