/*
 * STYLING PRINCIPLES
 * ==================
 *
 * Typography
 * ----------
 * - Body text: IBM Plex Mono (monospace)
 * - Headings, buttons, labels: Rubik (sans-serif)
 * - Math: STIX Two Math / Cambria Math / Latin Modern Math (proper math fonts)
 *
 * Math Rendering
 * --------------
 * - MathML uses dedicated math fonts, not monospace
 * - Base size 1.1rem; use 1.4rem for fraction-heavy content via .math-row
 * - All math elements normalized to font-style: normal, font-weight: normal
 * - math elements have white-space: nowrap to prevent breaking
 *
 * Inline Expressions
 * ------------------
 * - Use .expr class for inline math/code that shouldn't break across lines
 * - Use .nowrap for any content that must stay on one line
 *
 * Form Controls
 * -------------
 * - Range inputs styled with square thumb, thin track, stone palette
 * - Focus state: thicker border (3px)
 *
 * Utility Classes
 * ---------------
 * - .sidenote: muted text (stone-400)
 * - .highlight: amber background
 * - .expr / .nowrap: prevent line breaks
 * - .bold: font-weight bold
 * - .math-number: monospace, no wrap
 * - .flex-col, .flex-row: flex containers
 * - .gap-xs/sm/md/lg/xl: gap utilities
 */

:root {
  --stone-50: oklch(.985 .001 106.423);
  --stone-100: oklch(.97 .001 106.424);
  --stone-200: oklch(.923 .003 48.717);
  --stone-300: oklch(.869 .005 56.366);
  --stone-400: oklch(.553 .013 58.071);
  --amber-300: oklch(.879 .169 91.605);
  --text-sm: 0.875rem;
  --text-xs: 0.75rem;
  --border: 1px solid var(--stone-200);
  --gap-xs: 0.25rem;
  --gap-sm: 0.5rem;
  --gap-md: 1rem;
  --gap-lg: 2rem;
  --gap-xl: 3rem;
  --font-mono: "IBM Plex Mono", monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

math {
  font-family: "STIX Two Math", "Cambria Math", "Latin Modern Math", math, serif;
  font-size: 1.1rem;
  font-weight: normal;
  font-style: normal;
  white-space: nowrap;
}

math * {
  font-style: normal;
  font-weight: normal;
}

body {
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
  line-height: 1.5;
  margin: 0 auto;
  background-color: var(--stone-50);
  font-family: var(--font-mono);
  padding-top: env(safe-area-inset-top);
}

main {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

input {
  /* Prevent zooming on iOS */
  font-size: 16px;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 1.5rem;
  background: transparent;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  background: var(--stone-300);
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1rem;
  height: 1rem;
  margin-top: -0.4rem;
  background: var(--stone-50);
  border: 2px solid var(--stone-400);
}

input[type="range"]::-moz-range-track {
  height: 3px;
  background: var(--stone-300);
}

input[type="range"]::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  background: var(--stone-50);
  border: 2px solid var(--stone-400);
  border-radius: 0;
}

input[type="range"]:focus {
  outline: none;
}

input[type="range"]:focus::-webkit-slider-thumb {
  border-color: var(--stone-400);
  border-width: 3px;
}

input[type="range"]:focus::-moz-range-thumb {
  border-color: var(--stone-400);
  border-width: 3px;
}

h1,
h2,
h3,
h4,
h5,
h6,
button,
input,
label {
  font-family: "Rubik", sans-serif;
  line-height: 1.1;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

p,
ol,
ul,
li {
  margin: 0rem 0rem 0.25rem 0rem;
}

pre,
code,
kbd,
samp {
  font-family: var(--font-mono);
}

h1,
h2 {
  font-weight: bold;
  letter-spacing: 0.05rem;
  padding-top: 1rem;
}

a {
  color: #2563eb;
  font-weight: bold;
}

a:visited {
  color: #2563eb;
}

sup {
  vertical-align: top;
  font-size: 0.6em;
}

.sidenote {
  color: var(--stone-400);
}

.bold {
  font-weight: bold;
}

.math-number {
  font-family: var(--font-mono);
  white-space: nowrap;
}

.nowrap {
  white-space: nowrap;
}

.expr {
  white-space: nowrap;
}

.highlight {
  background-color: var(--amber-300);
  border-radius: 0.2rem;
}

blockquote {
  padding: 1rem;
  margin: 1rem;
  border-left: 4px solid var(--stone-300);
  background-color: var(--stone-100);
  font-style: italic;
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}

.quote-attribution {
  text-align: right;
  color: var(--stone-400);
  margin-top: -0.25rem;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.gap-xs {
  gap: var(--gap-xs);
}

.gap-sm {
  gap: var(--gap-sm);
}

.gap-md {
  gap: var(--gap-md);
}

.gap-lg {
  gap: var(--gap-lg);
}

.gap-xl {
  gap: var(--gap-xl);
}