/* =============================================================
   DM II Teacher — Color & Type tokens
   Load Google Fonts before this file, or use the @import below.
   ============================================================= */

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=DM+Mono:wght@400;500&display=swap");

:root {
  /* ---------- Color: structural ---------- */
  --ink:          #0E0F12;
  --graphite:    #4B5563;
  --pencil:      #9CA3AF;
  --paper:       #F6F7F9;
  --paper-deep:  #EAECEF;
  --chalk:       #FFFFFF;

  /* ---------- Color: accent ---------- */
  --relation:    #2F5FC1;   /* links, edges, active state */
  --relation-soft:#E1EAF7;
  --proof:       #2A6F3F;   /* correct, completed */
  --proof-soft:  #DEEBE0;
  --counter:     #C1432F;   /* wrong, destructive, marginalia */
  --counter-soft:#F4DAD3;
  --vertex:      #6D3FC1;   /* graph nodes, secondary accent */
  --vertex-soft: #E5DBF6;
  --highlighter: #FACC15;
  --margin:      #FEF3C7;

  /* ---------- Semantic colors ---------- */
  --fg1:         var(--ink);
  --fg2:         var(--graphite);
  --fg3:         var(--pencil);
  --bg:          var(--paper);
  --bg-sunk:     var(--paper-deep);
  --bg-raised:   var(--chalk);
  --border:      var(--paper-deep);
  --border-strong: var(--ink);
  --link:        var(--relation);
  --success:     var(--proof);
  --danger:      var(--counter);
  --focus-ring:  var(--relation);

  /* ---------- Type: families ---------- */
  --font-sans:   "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:   "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- Type: scale (px, line-height) ---------- */
  --t-12: 12px;  --lh-12: 16px;
  --t-13: 13px;  --lh-13: 18px;
  --t-14: 14px;  --lh-14: 20px;
  --t-15: 15px;  --lh-15: 22px;
  --t-16: 16px;  --lh-16: 24px;
  --t-18: 18px;  --lh-18: 28px;
  --t-20: 20px;  --lh-20: 30px;
  --t-24: 24px;  --lh-24: 32px;
  --t-30: 30px;  --lh-30: 38px;
  --t-36: 36px;  --lh-36: 44px;
  --t-48: 48px;  --lh-48: 56px;
  --t-64: 64px;  --lh-64: 70px;

  /* ---------- Spacing (4px base) ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;

  /* ---------- Radii ---------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-rest:  0 1px 2px rgba(14,15,18,0.04), 0 1px 0 rgba(14,15,18,0.03);
  --shadow-float: 0 12px 32px rgba(14,15,18,0.08), 0 2px 6px rgba(14,15,18,0.04);

  /* ---------- Motion ---------- */
  --ease-pen:    cubic-bezier(0.32, 0.72, 0.24, 1);
  --dur-fast:    120ms;
  --dur-mid:     220ms;
  --dur-slow:    360ms;
}

/* =============================================================
   Base / reset-ish
   ============================================================= */

html, body {
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-sans);
  font-size: var(--t-16);
  line-height: var(--lh-16);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* Global italic kill — the brand uses weight + color for emphasis, never slant */
em, i, cite, var, address, dfn {
  font-style: normal;
  font-weight: 500;
  color: var(--ink);
}

/* =============================================================
   Semantic type styles
   ============================================================= */

.display, h1.display {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-64);
  line-height: var(--lh-64);
  letter-spacing: -0.035em;
  color: var(--fg1);
}

h1, .h1 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-48);
  line-height: var(--lh-48);
  letter-spacing: -0.03em;
}

h2, .h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-30);
  line-height: var(--lh-30);
  letter-spacing: -0.01em;
}

h3, .h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-20);
  line-height: var(--lh-20);
  letter-spacing: -0.005em;
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-16);
  line-height: var(--lh-16);
}

.eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-12);
  line-height: var(--lh-12);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg2);
}

p, .body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-16);
  line-height: var(--lh-16);
  color: var(--fg1);
}

.body-lg {
  font-size: var(--t-18);
  line-height: var(--lh-18);
}

.body-sm {
  font-size: var(--t-14);
  line-height: var(--lh-14);
  color: var(--fg2);
}

.caption {
  font-size: var(--t-13);
  line-height: var(--lh-13);
  color: var(--fg3);
}

/* Math variables — DM Mono inside DM Sans body. Upright, distinct without italic. */
.math, var, .mathvar {
  font-family: var(--font-mono);
  font-style: normal;
  font-weight: 500;
  font-size: 0.92em;
  color: var(--vertex);
  letter-spacing: 0;
}

/* Math glyphs (∀ ∃ ∈ ⊆ ≡ ⊕ etc.) — stay in sans, slightly muted */
.glyph {
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--graphite);
}

/* Theorem / definition blocks */
.theorem, .definition {
  font-family: var(--font-sans);
  font-size: var(--t-18);
  line-height: var(--lh-18);
  font-weight: 400;
  color: var(--fg1);
}

/* Code */
code, kbd, samp, pre, .code {
  font-family: var(--font-mono);
  font-size: var(--t-14);
  line-height: var(--lh-14);
}

/* Tabular numbers in dashboards */
.tnum {
  font-variant-numeric: tabular-nums;
}

/* Links */
a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in oklab, var(--link) 40%, transparent);
  transition: color var(--dur-fast) var(--ease-pen),
              text-decoration-color var(--dur-fast) var(--ease-pen);
}
a:hover {
  text-decoration-color: var(--link);
}

/* Marginalia — TA notes */
.marginalia {
  border-left: 2px solid var(--counter);
  padding-left: var(--sp-4);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-15);
  line-height: var(--lh-15);
  color: var(--counter);
}

/* Halmos */
.qed::after {
  content: " ∎";
  font-family: var(--font-math);
  color: var(--fg1);
}

/* Focus */
:where(button, a, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}