/* ==========================================================================
   OgbonMath — Typography System
   --------------------------------------------------------------------------
   System-font stacks chosen for strong out-of-box results on all targets:
   macOS (primary dev), iOS, modern Android, and Web.

   No web fonts are loaded — this keeps the offline bundle light and
   avoids any network dependency. If we later want tighter brand control
   on older Android, vendor woff2 files into vendor/fonts/ and add
   @font-face declarations at the bottom of this file.
   ========================================================================== */

:root {
  /* ---------- Font families ---------- */

  /* Serif: lesson prose. Textbook warmth, flows with KaTeX math.
     Charter ships on macOS/iOS. Iowan Old Style is iOS-native.
     Georgia is the web-safe endpoint. */
  --font-serif: "Charter", "Iowan Old Style", "Palatino Linotype",
                "Book Antiqua", Palatino, Georgia, "Times New Roman", serif;

  /* Sans: UI chrome, buttons, labels, nav. Modern SaaS feel. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "SF Pro Text",
               "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Mono: math input, code, answers. Unambiguous 0/O, 1/l/I. */
  --font-mono: "JetBrains Mono", "SF Mono", "Monaco", "Cascadia Mono",
               "Roboto Mono", "Fira Code", Menlo, Consolas, monospace;

  /* Display: big hero headings. Same sans but tuned for weight/tracking. */
  --font-display: var(--font-sans);

  /* Backward-compat aliases for existing styles.css */
  --font: var(--font-sans);
  --sans: var(--font-sans);
  --mono: var(--font-mono);

  /* ---------- Type scale (modular, 1.200 minor-third) ---------- */
  --fs-xs:   11px;  /* tiny labels, captions */
  --fs-sm:   13px;  /* secondary UI text */
  --fs-base: 15px;  /* default UI body */
  --fs-md:   17px;  /* lesson prose body */
  --fs-lg:   20px;  /* section intros */
  --fs-xl:   24px;  /* sub-headings */
  --fs-2xl:  30px;  /* headings */
  --fs-3xl:  38px;  /* display */
  --fs-4xl:  48px;  /* hero */

  /* ---------- Line heights ---------- */
  --lh-tight:  1.2;   /* display, hero */
  --lh-snug:   1.35;  /* headings */
  --lh-normal: 1.5;   /* UI body */
  --lh-relaxed:1.65;  /* lesson prose (comfortable reading) */
  --lh-loose:  1.8;   /* long-form reading */

  /* ---------- Letter spacing ---------- */
  --ls-tight:  -0.02em;  /* big display text */
  --ls-normal: 0;
  --ls-wide:   0.02em;   /* small-caps labels */
  --ls-widest: 0.08em;   /* UPPERCASE MICRO LABELS */

  /* ---------- Font weights ---------- */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
}

/* ==========================================================================
   Baseline body — sans by default for the whole app chrome
   ==========================================================================
*/
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

/* ==========================================================================
   UI elements — sans
   ==========================================================================
   Buttons, nav, labels, toolbars. Precise and modern.
*/
button,
.btn,
.tb-btn,
input,
select,
.sb-head h1,
#tbtitle,
.wb-stat-value,
.wb-stat-label,
.dash-card h3 {
  font-family: var(--font-sans);
}

/* ==========================================================================
   Lesson prose — SERIF
   ==========================================================================
   Opt-in: any element inside #ct with class .lesson-prose, OR the lesson
   content area directly. This pairs visually with KaTeX output.
*/
.lesson-prose,
#ct .lesson-prose,
#ct .lp {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--tx);
  max-width: 65ch;                 /* reading-width cap */
  margin-left: auto;
  margin-right: auto;
}

.lesson-prose p,
#ct .lp p {
  margin: 0 0 1em 0;
}

.lesson-prose h1,
.lesson-prose h2,
.lesson-prose h3,
#ct .lp h1, #ct .lp h2, #ct .lp h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

.lesson-prose h1, #ct .lp h1 { font-size: var(--fs-3xl); }
.lesson-prose h2, #ct .lp h2 { font-size: var(--fs-2xl); }
.lesson-prose h3, #ct .lp h3 { font-size: var(--fs-xl); }

.lesson-prose strong,
#ct .lp strong { font-weight: var(--fw-semibold); color: var(--tx); }

.lesson-prose em,
#ct .lp em { font-style: italic; }

/* Drop-cap for lesson opening paragraphs (opt-in via .lp-opener) */
.lesson-prose .lp-opener::first-letter,
#ct .lp .lp-opener::first-letter {
  font-size: 3.2em;
  float: left;
  line-height: 0.95;
  padding-right: 0.08em;
  margin-top: 0.08em;
  color: var(--ac);
  font-weight: var(--fw-semibold);
}

/* ==========================================================================
   Code blocks & math input — mono
   ==========================================================================
*/
code,
pre,
kbd,
.mono,
.ans-input,
#ansin,
input[type="text"].math-input,
.hub-text-in,
#cp-editor,
#gp-in,
#hub-text-in {
  font-family: var(--font-mono);
  font-feature-settings: "calt" 1, "zero" 1; /* dotted zero, ligatures */
}

/* ==========================================================================
   KaTeX — tune rendering to match our warm palette
   ==========================================================================
   KaTeX uses its own serif (Computer Modern). We just nudge color/size.
*/
.katex {
  color: var(--tx);
  font-size: 1.05em; /* very slight bump vs surrounding prose */
}

.katex-display {
  margin: 1.2em 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.25em 0;
}

/* ==========================================================================
   Micro-labels — small caps style for secondary taxonomy
   ==========================================================================
   Use for category labels like "PRACTICE", "PROGRESS", "LESSON 3"
*/
.micro-label {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--tx2);
}

/* ==========================================================================
   Screen-reader-only utility (already in index.html as #aria-status class)
   ==========================================================================
*/
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Future: vendor-font override slot
   ==========================================================================
   If we ever want tight brand control on older Android devices where
   Charter is absent, drop woff2 files into vendor/fonts/ and uncomment:

   @font-face {
     font-family: "OgbonSerif";
     src: url("../vendor/fonts/serif-regular.woff2") format("woff2");
     font-weight: 400;
     font-display: swap;
   }
   Then prepend "OgbonSerif" to --font-serif above.
*/