/* ============================================================================
   Hopper Oak AI — design tokens (web)

   Brand foundations are lifted verbatim from the Hopper Oak design system
   (tokens/colors.css, typography.css, spacing.css), which is a PRINT/report
   system. The identity carries over; the A4 page geometry does not.

   Everything under a "WEB ADDITION" comment is specific to this site and has
   no counterpart in the print system.
   ============================================================================ */

:root {
  /* ---- Brand core ---------------------------------------------------------- */
  --ho-navy:          #0E1D38;  /* primary — wordmark, headings, ink */
  --ho-navy-deep:     #0A1525;  /* deepest ink — hero field, footer */
  --ho-navy-soft:     #1C3052;  /* raised navy — hover, secondary fills */
  --ho-gold:          #B6883C;  /* secondary — rules, accents, the "AI" */
  --ho-gold-soft:     #CDA75C;  /* lighter gold — hairlines, gold-on-navy text */
  --ho-gold-deep:     #7E5B22;  /* gold TEXT on light ground (see contrast note) */

  /* ---- Parchment surfaces (warm neutrals, chroma kept low) ---------------- */
  --ho-paper:         #FBF8F1;  /* page — near-white warm */
  --ho-parchment:     #F4ECD8;  /* primary tinted surface — panels, cards */
  --ho-parchment-2:   #ECE0C2;  /* deeper parchment — banding */
  --ho-disc:          #F0D6A8;  /* the mark's disc tone — rare, large fills */

  /* ---- Text --------------------------------------------------------------- */
  --ho-text:          #23262E;  /* body — warm near-black. 14.26:1 on paper */
  --ho-text-muted:    #5A6068;  /* secondary prose.        5.99:1 on paper */
  --ho-text-faint:    #8A8678;  /* fine print — LARGE TEXT ONLY (3.44:1) */
  --ho-on-navy:       #F4ECD8;  /* parchment text on navy. 14.25:1 */
  --ho-on-navy-muted: #A9B4C6;  /* muted text on navy */

  /* ---- Lines & shadow ----------------------------------------------------- */
  --ho-rule:          #D8CBA8;
  --ho-rule-strong:   #B6883C;
  --ho-border:        #C9BC98;
  --ho-shadow:        18 29 56; /* navy rgb for soft shadows */

  /* ---- Semantic / status (muted, editorial — never neon) ------------------ */
  --ho-pos:           #3F6B4E;
  --ho-pos-bg:        #E4ECE2;
  --ho-caution:       #B6883C;
  --ho-caution-bg:    #F3E9CF;
  --ho-neg:           #9E4B36;
  --ho-neg-bg:        #F1E2DB;
  --ho-neutral:       #5A6473;
  --ho-neutral-bg:    #E7E8EA;

  /* ==========================================================================
     CONTRAST RULE — measured, not guessed. Do not "fix" this later.
       gold #B6883C on parchment .... 2.71:1  FAILS WCAG AA
       gold #B6883C on paper ........ 3.01:1  large text only
       gold-deep #7E5B22 on parchment 5.24:1  PASSES AA
       gold-deep #7E5B22 on paper ... 5.81:1  PASSES AA
       gold-soft #CDA75C on navy .... 7.41:1  PASSES AA
     (#8C6526 was the first choice and measured 4.45:1 on parchment, i.e. it
      failed as small text. Do not lighten this back.)
     Therefore: --ho-gold is for RULES, BORDERS and LARGE DISPLAY type only.
     Gold *body* text on a light ground must use --ho-gold-deep.
     Gold text on navy uses --ho-gold-soft.
     ========================================================================== */

  /* ---- Typography: four families, one job each ---------------------------- */
  --font-display: 'Cinzel', 'Trajan Pro', Georgia, serif;             /* engraved caps */
  --font-heading: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* WEB ADDITION — screen type scale (1.25 ratio).
     The print system's scale is tuned for A4 at 96dpi and runs too small on
     screen. Body is 17px because EB Garamond has a small x-height: it reads
     optically level with a 16px sans, satisfying the 16–18px legibility target. */
  --fs-hero:      clamp(2.25rem, 1.45rem + 3.0vw, 3rem);     /* 36 → 48px */
  --fs-display:   clamp(1.85rem, 1.30rem + 2.1vw, 2.625rem); /* 30 → 42px */
  --fs-h2:        clamp(1.5rem, 1.20rem + 1.2vw, 2rem);      /* 24 → 32px */
  --fs-h3:        1.3125rem;  /* 21px */
  --fs-h4:        1.125rem;   /* 18px */
  --fs-body-lg:   1.1875rem;  /* 19px — lede paragraphs */
  --fs-body:      1.0625rem;  /* 17px — base */
  --fs-body-sm:   0.9375rem;  /* 15px */
  --fs-caption:   0.8125rem;  /* 13px */
  --fs-label:     0.6875rem;  /* 11px — mono eyebrows */

  --fw-reg: 400;
  --fw-semi: 600;
  --fw-bold: 700;

  --lh-tight: 1.12;
  --lh-snug:  1.28;
  --lh-body:  1.55;   /* directive target: 1.5–1.6 */

  /* Wide-tracked caps are the brand's signature */
  --ls-cover:   0.16em;
  --ls-display: 0.04em;
  --ls-eyebrow: 0.22em;
  --ls-label:   0.14em;

  /* ---- Spacing (4px base grid) -------------------------------------------- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* ---- Radius — squared with a hint of softening -------------------------- */
  --radius-sm: 2px;
  --radius:    4px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  --hair: 1px;
  --rule: 2px;

  /* ---- Elevation — soft, navy-tinted, sparing ----------------------------- */
  --elev-1: 0 1px 2px rgb(var(--ho-shadow) / 0.06);
  --elev-2: 0 6px 18px rgb(var(--ho-shadow) / 0.10);

  /* WEB ADDITION — layout geometry (replaces the print --page-w) */
  --measure:      72ch;   /* max line length for long-form prose */
  --container:    1160px; /* standard content container */
  --container-nr: 900px;  /* narrow container — articles, forms */
  --gutter:       clamp(1.25rem, 0.75rem + 2vw, 2.5rem);
  --section-y:    clamp(3rem, 1.6rem + 5.5vw, 6rem);  /* 48 → 96px */
  --header-h:     72px;

  /* WEB ADDITION — motion. The brand is a print deliverable: "effectively no
     animation." Hover/press only, 120–160ms, no bounce, no scroll effects. */
  --t-fast: 120ms ease;
  --t-base: 160ms ease;

  /* ---- Semantic aliases --------------------------------------------------- */
  --surface-page:  var(--ho-paper);
  --surface-panel: var(--ho-parchment);
  --surface-band:  var(--ho-parchment-2);
  --surface-ink:   var(--ho-navy);
  --text-body:     var(--ho-text);
  --text-heading:  var(--ho-navy);
  --text-caption:  var(--ho-text-muted);
  --accent:        var(--ho-gold);
  --rule-hair:     var(--ho-rule);
}

/* The site commits to a single warm light theme — the parchment ground IS the
   brand, and inverting it would produce a different company. We do not ship a
   dark-mode inversion; we only respect reduced motion. */
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-base: 0ms; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}