/* ============================================================================
   HiClotho typography
   Two families: Lora (serif) carries display headlines, dates, narrative and
   the assistant's "handwriting"; Plus Jakarta Sans carries all UI/body text.
   Sentence case is the rule — the system leans on weight + gentle tracking and
   elegant serif scaling, NOT all-caps (the one exception: uppercase season
   labels like "AUTUMN 1991" and tracked eyebrows). Mirrors app_theme.dart.
   ============================================================================ */

:root {
  /* Families */
  --font-serif: 'Lora', Georgia, 'Times New Roman', serif;   /* display + narrative */
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; /* UI/body */
  --font-display: var(--font-serif);
  --font-body: var(--font-sans);

  /* Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Display scale — Lora, tight (height 0.96, letter-spacing -0.3).
     Used for headlines, hero titles, season labels, sheet titles. */
  --display-xl: 36px;   /* season chapter label            */
  --display-lg: 30px;   /* auth headline                   */
  --display-md: 24px;   /* header scope / hero card title  */
  --display-sm: 18px;   /* card title                      */
  --display-line: 0.96; /* @kind other */
  --display-tracking: -0.3px;

  /* Body scale — Plus Jakarta Sans */
  --text-lg: 16px;
  --text-md: 15px;      /* tile label                      */
  --text-base: 14px;    /* default body / field text       */
  --text-sm: 13px;
  --text-xs: 12px;      /* blurb / caption                 */
  --text-2xs: 11px;     /* footnote                        */
  --body-line: 1.45; /* @kind other */

  /* Serif body — Lora for long-form narrative (assistant replies). */
  --serif-body-size: 16px;
  --serif-body-line: 1.55; /* @kind other */

  /* Eyebrow — small tracked Lora label ("You · Mar 12", nav labels). */
  --eyebrow-size: 10px;
  --eyebrow-tracking: 0.4px;
  --eyebrow-weight: 500;
}

/* ── Optional utility classes (components mostly set these inline) ───────── */
.hc-display {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  line-height: var(--display-line);
  letter-spacing: var(--display-tracking);
  color: var(--text-body);
}
.hc-serif-body {
  font-family: var(--font-serif);
  font-size: var(--serif-body-size);
  line-height: var(--serif-body-line);
  color: var(--text-body);
}
.hc-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--body-line);
  color: var(--text-body);
}
.hc-eyebrow {
  font-family: var(--font-serif);
  font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-tracking);
  font-weight: var(--eyebrow-weight);
  line-height: 1;
  color: var(--text-muted);
}