/* ============================================================================
   HEARTH — colors_and_type.css
   Semantic typography + color roles for the AETHER design language.
   Layers on top of the source-of-truth tokens (hearth-tokens.css).

   Load order:
     1. Fonts (self-host in production; Google Fonts CDN here for convenience)
     2. hearth-tokens.css   — raw token primitives (clay ramp, neutrals, spacing…)
     3. colors_and_type.css — THIS FILE: semantic aliases + element defaults

   Fonts are all permissive OFL: Fraunces (display serif), Plus Jakarta Sans
   (UI sans), JetBrains Mono (logs/code). No proprietary type — same clean-room
   rule as code. (Inter was the original UI sans; it is retired from every stack.)

   Three user-uploaded brand fonts are SELF-HOSTED from /fonts and exposed as
   available alternate families (see --font-syne / --font-jakarta / --font-hand):
     · Syne               — geometric display sans
     · Plus Jakarta Sans  — humanist UI sans
     · Architects Daughter — handwritten, for annotations / margin notes
   They do not replace the documented system faces until assigned a role.
   ============================================================================ */

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

/* Core system faces (Fraunces · JetBrains Mono) + the uploaded brand fonts.
   Brand font assignment (see README §3 Type):
     · Syne               → wordmark + uppercase eyebrows/labels (system voice)
     · Plus Jakarta Sans  → all UI + body text (replaces Inter — warmer humanist)
     · Architects Daughter → sparing handwritten margin annotations
   Their regular (400) weight is self-hosted below; heavier weights via CDN.
   Fraunces stays the editorial display; JetBrains Mono stays the log/code face. */
/* 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 (canon Fraunces · Plus Jakarta Sans · JetBrains Mono · Syne, plus the
   self-hosted Manrope/Sora 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 Plus Jakarta Sans (warm humanist). 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) --------------- */
  --font-wordmark: 'Syne', 'Fraunces', Georgia, serif;   /* logotype ONLY (distinctive brand signature) */
  --font-label:    var(--font-sans);                     /* eyebrows / micro-labels — Plus Jakarta 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 — Fraunces, editorial, used for hero & narrative headings */
  --display-font: var(--font-display);
  --display-weight: var(--weight-semibold);
  --display-tracking: var(--tracking-tight);
  --display-leading: var(--leading-tight);

  /* h1 / h2 / h3 — Fraunces. 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); }

.hearth :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }