/* ─────────────────────────────────────────────────────────────
   Swiss / International Typographic Style
   STEM learning platform — light mode v1
   ───────────────────────────────────────────────────────────── */

:root {
  /* Type system — Contemporary direction (Söhne-alike + STIX Two Text) */
  --font-ui: "Söhne", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-text: "STIX Two Text", "Source Serif 4", "Times New Roman", serif;
  --font-math: "STIX Two Math", "Latin Modern Math", "STIX Two Text", serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
  --font-jp:   "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-jp-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;

  /* Achromatic neutrals — print-quality light */
  --paper:    #FBFAF7;     /* warm off-white, like uncoated stock */
  --paper-2:  #F4F2EC;     /* secondary surface */
  --rule:     #1A1A1A;     /* hairlines */
  --rule-2:   #BDB9AE;     /* secondary rules */
  --rule-3:   #DDD9CE;     /* tertiary rules */
  --ink:      #111111;     /* body */
  --ink-2:    #2A2A2A;     /* headings — same hue, slightly lighter than rule */
  --ink-3:    #5C5A53;     /* secondary text */
  --ink-4:    #8B887E;     /* tertiary, captions */
  --ink-5:    #B8B5AB;     /* meta, disabled */

  /* Single chromatic accent — Swiss red */
  --accent:   #E63329;
  --accent-ink: #FBFAF7;

  /* Mastery state encoding */
  --mastery-mastered: #1A1A1A;
  --mastery-frontier: var(--accent);
  --mastery-locked:   #B8B5AB;

  /* Baseline grid */
  --baseline: 8px;
  --col-gap: 24px;
  --shell-pad: 48px;

  /* Type scale — anchored to baseline */
  --t-meta:  10px;   /* tracked caps, captions */
  --t-mono:  12px;
  --t-small: 13px;
  --t-body:  15px;
  --t-lead:  18px;
  --t-h4:    20px;
  --t-h3:    24px;
  --t-h2:    32px;
  --t-h1:    52px;
  --t-display: 72px;

  /* Grid overlay */
  --grid-color: oklch(60% 0.18 25 / 0.08);
}

/* Accent variants set by Tweaks */
[data-accent="red"]    { --accent: #E63329; }
[data-accent="black"]  { --accent: #1A1A1A; }
[data-accent="blue"]   { --accent: #1240AB; }
[data-accent="orange"] { --accent: #D97706; }

/* Type direction set by Tweaks */
[data-type="classical"] {
  --font-ui:   "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Source Serif 4", "Times New Roman", serif;
}
[data-type="contemporary"] {
  --font-ui:   "Söhne", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-text: "STIX Two Text", "Source Serif 4", "Times New Roman", serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--t-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11", "kern";
}

/* ── Baseline + column grid overlay ─────────────────────────── */

.grid-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(var(--baseline) - 1px),
      var(--grid-color) calc(var(--baseline) - 1px),
      var(--grid-color) var(--baseline)
    );
  z-index: 1;
}
.grid-overlay--cols {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--col-gap);
  padding: 0 var(--shell-pad);
}
.grid-overlay--cols > i {
  background: var(--grid-color);
  display: block;
  height: 100%;
}

/* ── Type primitives ────────────────────────────────────────── */

.t-meta {
  font-family: var(--font-ui);
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.t-mono {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0;
}
.t-display {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--t-display);
  line-height: 0.96;
  letter-spacing: -0.025em;
  color: var(--ink-2);
}
.t-h1 {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--t-h1);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--ink-2);
}
.t-h2 {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--t-h2);
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--ink-2);
}
.t-h3 {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--t-h3);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--ink-2);
}
.t-h4 {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--t-h4);
  line-height: 1.3;
  color: var(--ink-2);
}
.t-lead {
  font-family: var(--font-text);
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--ink);
}
.t-body {
  font-family: var(--font-text);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--ink);
}
.t-ui {
  font-family: var(--font-ui);
  font-size: var(--t-small);
  color: var(--ink);
}

/* ── Hairline rules ─────────────────────────────────────────── */

.rule       { border: 0; height: 1px; background: var(--rule);   margin: 0; }
.rule-2     { border: 0; height: 1px; background: var(--rule-2); margin: 0; }
.rule-3     { border: 0; height: 1px; background: var(--rule-3); margin: 0; }
.rule-thick { border: 0; height: 2px; background: var(--rule);   margin: 0; }

/* ── KaTeX overrides for baseline alignment ─────────────────── */

.katex { font-size: 1em; }
.katex-display {
  margin: calc(var(--baseline) * 2) 0 calc(var(--baseline) * 3);
  text-align: left;
  padding-left: 0;
}
.katex-display > .katex { text-align: left; }

/* Inline math holds the baseline */
.t-body .katex,
.t-lead .katex { vertical-align: baseline; }

/* ── Buttons / links ────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  border-radius: 0;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn--accent { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn--accent:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn--ghost { border-color: var(--rule-2); color: var(--ink-3); }
.btn--ghost:hover { background: transparent; color: var(--ink); border-color: var(--ink); }

a.link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1px;
  transition: color 0.12s, border-color 0.12s;
}
a.link:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ── Mastery dots ───────────────────────────────────────────── */

.mastery-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  vertical-align: baseline;
  position: relative;
  top: -1px;
}
.mastery-dot--mastered { background: var(--mastery-mastered); }
.mastery-dot--frontier {
  background: transparent;
  border: 1.5px solid var(--mastery-frontier);
  width: 8px; height: 8px;
}
.mastery-dot--learning {
  background: var(--mastery-frontier);
}
.mastery-dot--locked   {
  background: transparent;
  border: 1px solid var(--mastery-locked);
}
.mastery-dot--review {
  background: transparent;
  border: 1.5px solid var(--ink);
  position: relative;
}
.mastery-dot--review::after {
  content: ""; position: absolute; inset: 1px;
  background: repeating-linear-gradient(45deg, var(--ink) 0 1px, transparent 1px 3px);
  border-radius: 50%;
}

/* ── Tag / type chips ───────────────────────────────────────── */

.type-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border: 1px solid var(--rule-2);
  font-family: var(--font-ui);
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: transparent;
}
.type-chip[data-kind="theorem"]   { color: var(--ink); border-color: var(--ink); }
.type-chip[data-kind="definition"]{ color: var(--accent); border-color: var(--accent); }
.type-chip[data-kind="lemma"]     { color: var(--ink-3); }
.type-chip[data-kind="procedure"] { color: var(--ink-3); }
.type-chip[data-kind="example"]   { color: var(--ink-3); }
.type-chip[data-kind="axiom"]     { color: var(--ink-3); }

/* ── Section markers & figure numbers ───────────────────────── */

.fig-number {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  color: var(--ink-4);
  letter-spacing: 0.04em;
}

/* ── Form / range slider — Swiss style ──────────────────────── */

input[type="range"].swiss {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 24px;
  background: transparent;
  cursor: pointer;
}
input[type="range"].swiss::-webkit-slider-runnable-track {
  height: 1px;
  background: var(--rule);
}
input[type="range"].swiss::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 16px;
  width: 16px;
  background: var(--accent);
  border-radius: 50%;
  margin-top: -7.5px;
  border: 0;
}
input[type="range"].swiss::-moz-range-track {
  height: 1px;
  background: var(--rule);
}
input[type="range"].swiss::-moz-range-thumb {
  height: 16px;
  width: 16px;
  background: var(--accent);
  border-radius: 50%;
  border: 0;
}

/* ── Selection ──────────────────────────────────────────────── */

::selection { background: var(--accent); color: var(--accent-ink); }