/* ============================================================================
   EVENTLAKE DESIGN — colors_and_type.css
   Semantic typography + color roles for the EventLake Design language.
   ⚠ The `.hearth` scope class below and the `hearth-tokens.css` import are JOIN KEYS, not
   brand: see that file's header for the measurement.
   Layers on top of the source-of-truth tokens (hearth-tokens.css).

   Load order:
     1. fonts.css           — self-hosted @font-face (no CDN, no external origin; D1/D7)
     2. hearth-tokens.css   — raw token primitives (palette, neutrals, spacing…)
     3. colors_and_type.css — THIS FILE: semantic aliases + element defaults

   Type canon (P2A, owner-ratified 2026-10-04 — docs/reference/palette-direction.md §0), all
   permissive OFL, no proprietary type — same clean-room rule as code:
     · Newsreader      — display serif (--font-display), drawn at 400
     · Hanken Grotesk  — all UI + body text, and the uppercase eyebrows/labels (--font-sans)
     · JetBrains Mono  — logs / code / identifiers (--font-mono)
     · Syne            — the WORDMARK ONLY (--font-wordmark); never an eyebrow or a heading
     · Architects Daughter — sparing handwritten margin annotations (--font-hand)
   The families are defined ONCE, in hearth-tokens.css; this file only aliases them by role.
   Fraunces and Plus Jakarta Sans were the pre-P2A display/UI faces, and Inter before them —
   all retired from every stack. fonts.css still self-hosts the first two for frozen drops and
   sub-brand pages; no role here resolves to them.
   ============================================================================ */

@import url("hearth-tokens.css");

/* Fonts — FULLY SELF-HOSTED via fonts.css (D1/D7): no Google-Fonts CDN, no external
   origin, so the console ships in air-gapped / CSP'd deployments. fonts.css is the single
   @font-face source (the canon faces above, plus the self-hosted sub-brand faces). It is
   @import'd here, and brand kits that skip the Hearth token layer link ../../fonts.css directly. */
@import url("fonts.css");

:root {
  /* ---- Semantic foreground aliases (fg1 = primary ink … fg4 = faintest) ---- */
  --fg1: var(--hearth-text);            /* primary ink — warm near-black     */
  --fg2: var(--hearth-text-secondary);  /* secondary copy                    */
  --fg3: var(--hearth-text-muted);      /* muted / metadata                  */
  --fg4: var(--hearth-text-faint);      /* faint / placeholder               */
  --fg-on-accent: var(--hearth-text-on-accent);

  /* ---- Semantic background aliases (bg1 = app canvas … bg-raised = modal) - */
  --bg1: var(--hearth-canvas);          /* app background                    */
  --bg2: var(--hearth-surface);         /* cards / panels                    */
  --bg-raised: var(--hearth-raised);    /* popovers / modals                 */
  --bg-sunken: var(--hearth-sunken);    /* wells / insets / code blocks      */

  /* ---- Font-role aliases ------------------------------------------------- */
  /* UI/body face is Hanken Grotesk (P2A). Inter is RETIRED from the
     stack — it was never self-hosted in fonts/, so it only ever resolved on boxes
     that happened to have it installed, i.e. it rendered the design system
     inconsistently rather than acting as a safety net.

     --font-sans is deliberately NOT re-declared here. It is defined ONCE, in
     hearth-tokens.css (the token layer @import'd at the top of this file), and the
     role aliases below simply point at it. This file used to override it, and the
     two copies silently disagreed for months — tokens said Inter, this file said
     Plus Jakarta — which is exactly how a retired face survived in the shipped
     canon. One definition means a future face change cannot half-land. */
  --serif-display: var(--font-display);
  --sans-ui:       var(--font-sans);
  --mono-logs:     var(--font-mono);

  /* ---- Brand font assignment (uploaded fonts, self-hosted) --------------- */
  /* The wordmark falls back to the canon DISPLAY face, never a retired one: Syne is self-hosted,
     so the fallback only shows if fonts.css failed to load — and then it should read as the
     rest of the page does, not as the pre-P2A Fraunces. */
  --font-wordmark: 'Syne', var(--font-display);          /* logotype ONLY (distinctive brand signature) */
  --font-label:    var(--font-sans);                     /* eyebrows / micro-labels — Hanken Grotesk uppercase */
  --font-jakarta:  var(--font-sans);                     /* explicit alias for the UI face */
  --font-hand:     'Architects Daughter', 'Comic Sans MS', cursive; /* handwritten margin notes */
  --font-syne:     var(--font-wordmark);                 /* back-compat alias */

  /* ---- Semantic type roles (size / weight / leading / tracking / family) -- */
  /* Display — Newsreader, editorial, used for hero & narrative headings */
  --display-font: var(--font-display);
  --display-weight: var(--weight-regular);   /* P2A: Newsreader is drawn at 400 (owner call 2026-10-02) */
  --display-tracking: var(--tracking-tight);
  --display-leading: var(--leading-tight);

  /* h1 / h2 / h3 — Newsreader. h4+ shift to the UI sans for interface chrome */
  --h1-size: var(--text-5xl);   --h1-leading: var(--leading-tight);
  --h2-size: var(--text-3xl);   --h2-leading: var(--leading-tight);
  --h3-size: var(--text-xl);    --h3-leading: var(--leading-snug);
  --h4-size: var(--text-lg);    --h4-leading: var(--leading-snug);

  /* eyebrow — uppercase mini-label above headings */
  --eyebrow-size: var(--text-xs);
  --eyebrow-tracking: var(--tracking-wide);

  /* body / lead / small */
  --p-size: var(--text-base);   --p-leading: var(--leading-normal);
  --lead-size: var(--text-lg);  --lead-leading: var(--leading-relaxed);
  --small-size: var(--text-sm);
  --caption-size: var(--text-xs);

  /* code / log line */
  --code-size: var(--text-sm);
  --code-leading: var(--leading-snug);
}

/* ============================================================================
   ELEMENT DEFAULTS — opt-in by scoping under .hearth (so the design system
   never fights a host app). Apply class="hearth" on <body> or any container.
   ============================================================================ */

.hearth {
  background: var(--bg1);
  color: var(--fg1);
  font-family: var(--sans-ui);
  font-size: var(--p-size);
  line-height: var(--p-leading);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
}

.hearth h1, .hearth h2, .hearth h3 {
  font-family: var(--serif-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: var(--display-leading);
  color: var(--fg1);
  margin: 0;
  text-wrap: pretty;
}
.hearth h1 { font-size: var(--h1-size); line-height: var(--h1-leading); }
.hearth h2 { font-size: var(--h2-size); line-height: var(--h2-leading); }
.hearth h3 { font-size: var(--h3-size); line-height: var(--h3-leading); }

/* h4 and below are interface chrome → humanist sans, not serif */
.hearth h4, .hearth h5, .hearth h6 {
  font-family: var(--sans-ui);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-normal);
  line-height: var(--h4-leading);
  color: var(--fg1);
  margin: 0;
}
.hearth h4 { font-size: var(--h4-size); }
.hearth h5 { font-size: var(--text-base); }
.hearth h6 { font-size: var(--small-size); }

.hearth p {
  margin: 0;
  color: var(--fg2);
  line-height: var(--p-leading);
  text-wrap: pretty;
  max-width: 68ch;
}

.hearth .display {
  font-family: var(--display-font);
  font-size: var(--text-5xl);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: var(--display-leading);
}

.hearth .eyebrow {
  text-transform: uppercase;
  letter-spacing: var(--eyebrow-tracking);
  font-size: var(--eyebrow-size);
  font-weight: var(--weight-semibold);
  color: var(--accent-text);
  font-family: var(--font-label);
}

.hearth .lead {
  font-size: var(--lead-size);
  line-height: var(--lead-leading);
  color: var(--fg2);
}

.hearth small, .hearth .small { font-size: var(--small-size); }
.hearth .caption { font-size: var(--caption-size); color: var(--fg3); }
.hearth .muted { color: var(--fg3); }
.hearth .faint { color: var(--fg4); }

.hearth code, .hearth kbd, .hearth pre, .hearth .mono {
  font-family: var(--mono-logs);
  font-size: var(--code-size);
  line-height: var(--code-leading);
  font-feature-settings: "liga" 0;
}
.hearth pre {
  background: var(--bg-sunken);
  border: 1px solid var(--hearth-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  overflow: auto;
  color: var(--fg1);
}

.hearth a { color: var(--accent-text); text-underline-offset: 2px; }
.hearth a:hover { color: var(--accent-active); }

.hearth ::selection { background: var(--accent-subtle-bg); color: var(--accent-active); }

/* ⛔ The ring is a box-shadow, and forced-colours mode (Windows High Contrast) DROPS box-shadow — so
   `outline: none` left keyboard focus invisible there on every Hearth surface (2026-10-02o audit, DS-8).
   A TRANSPARENT outline costs nothing in normal rendering and is repainted in the system highlight
   colour in forced-colours mode, which is exactly when the shadow disappears. */
.hearth :focus-visible { outline: 2px solid transparent; outline-offset: 1px; box-shadow: var(--focus-ring); }
/* The ring FOLLOWS THE ELEMENT'S OWN SHAPE (2026-09-29mn, motion-specimen review R4). The radius used to ride in
   the rule above at (0,2,0), which outranked every component's own `border-radius` (0,1,0) — so each Hearth pill
   squared off to 6px while keyboard-focused. It now sits at zero specificity: an element that declares a radius
   keeps it; one that declares none (a link, a bare control) still gets the rounded ring. The ring itself stays at
   (0,2,0) above, so no component rule can quietly remove it. */
:where(.hearth :focus-visible) { border-radius: var(--radius-sm); }