/* GENERATED by scripts/workflows/emit_tokens.py — per-book theme override.
   Theme: calculus-volume-1-custom. Edit scripts/workflows/templates/themes/calculus-volume-1-custom/tokens.json, not this file. */
:root {
    /* Brand */
    --wedgwood: #1a3a7a;
    --wedgwood-light: #2340a0;
    --wedgwood-deep: #12285a;
    --focus-blue: #2340a0;

    /* Surfaces */
    --parchment: #fdfcf8;
    --ivory: #f7f5ed;
    --pure-white: #ffffff;
    --warm-sand: #f5f3ea;
    --dark-surface: #1a1a1a;
    --deep-dark: #0a0a0a;

    /* Ink (warm ramp) */
    --ink-near-black: #0a0a0a;
    --ink-charcoal: #1a1a1a;
    --ink-olive: #333333;
    --ink-stone: #707070;
    --ink-warm-silver: #a0a0a0;
    --ink-on-dark: #fdfcf8;
    --ink-on-accent: #fdfcf8;
    --link-on-dark: var(--wedgwood-light);

    /* Borders & rings */
    --border-cream: rgba(20, 20, 20, 0.10);
    --border-warm: rgba(20, 20, 20, 0.14);
    --border-soft: rgba(20, 20, 20, 0.10);
    --border-dark: #0a0a0a;
    --ring-warm: rgba(20, 20, 20, 0.14);
    --ring-deep: rgba(20, 20, 20, 0.35);

    /* Tag tints — pre-blended Wedgwood over parchment */
    --tag-bg: #dde3ef;
    --tag-bg-strong: #c3cee4;

    /* Shadows */
    --whisper-shadow: 0 1px 2px rgba(20, 20, 20, 0.04);

    /* Spacing scale */
    --xxs: 4px;
    --xs: 8px;
    --sm: 12px;
    --md: 16px;
    --lg: 24px;
    --xl: 32px;
    --xxl: 48px;
    --section: 72px;

    /* Radius scale */
    --radius-tag: 0;
    --radius-sm: 0;
    --radius-md: 0;
    --radius-lg: 0;
    --radius-xl: 0;
    --radius-pill: 9999px;

    /* Type stacks */
    --font-serif: "IBM Plex Sans", "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
    --font-sans: "IBM Plex Sans", "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Legacy aliases for site-shared classes */
    --primary-color: var(--ink-near-black);
    --secondary-color: var(--wedgwood);
    --accent-color: var(--wedgwood);
    --bg-light: var(--parchment);
    --bg-highlight: var(--warm-sand);
    --bg-insight: var(--ivory);
    --border-color: var(--border-cream);
}

[data-theme="dark"] {
    --ink-on-accent: #0f1420;
    --wedgwood: #7fa0d8;
    --wedgwood-light: #a3bce8;
    --wedgwood-deep: #5a7cc0;
    --parchment: #141413;
    --ivory: #1c1c1a;
    --pure-white: #1f1f1d;
    --warm-sand: #26241d;
    --dark-surface: #26241d;
    --deep-dark: #0a0a0a;
    --ink-near-black: #f5f3ea;
    --ink-charcoal: #d8d5c8;
    --ink-olive: #b8b5a8;
    --ink-stone: #8a8880;
    --border-cream: rgba(255, 255, 255, 0.08);
    --border-warm: rgba(255, 255, 255, 0.12);
    --border-soft: rgba(255, 255, 255, 0.08);
    --ring-warm: rgba(255, 255, 255, 0.14);
    --ring-deep: rgba(255, 255, 255, 0.24);
    --tag-bg: #1e2a44;
}

/* layout layer — themes/calculus-volume-1-custom/layout.css */
/* ===========================================================
   academic-paper — reading-page layout tier (OD-adoption)

   Redesigns the reading page to match the identity of the
   academic-paper OD deck (.claude/skills/deck-paper/
   example.html): a print-journal article, not a colored-card
   textbook page. Signature moves lifted from the deck — centered
   title framed by a heavy rule + hairline rule with an italic
   small-caps kicker above it, hairline-ruled "theorem" boxes
   instead of tinted cards, and booktabs tables (heavy top/bottom
   rule, one hairline midrule, zero vertical rules).

   Cascade note: this file is appended to the compiled theme.css,
   which loads AFTER style-bookshelf.css (see skeleton.html), so
   an equal-specificity selector here wins by source order alone.
   Every box selector below is prefixed `.main-content` specifically
   so it ties (rather than loses to) the base file's own
   `[data-theme="dark"] .foo` overrides on specificity — no
   `[data-theme="dark"]` duplicates or `!important` needed anywhere,
   including on `.learning-objectives`'s hardcoded orange
   border-left-color (style-bookshelf.css:394): a plain
   `.main-content .learning-objectives` already outranks it.
   =========================================================== */

/* ---- Article column: one narrow print-journal measure ---- */
.main-content {
    max-width: 900px;
    margin: 0 auto;
}

/* ---- Titlepage: kicker, heavy rule, title, hairline rule ----
   All three live on the h1 itself (no separate DOM nodes to hang
   them on): ::before is the kicker, its border-bottom doubles as
   the heavy navy rule, and h1's own border-bottom is the closing
   hairline. */
.main-content > h1 {
    text-align: center;
    padding-bottom: var(--xl);
    margin-top: var(--xl);
    margin-bottom: var(--xxl);
    border-bottom: 1px solid var(--border-soft);
}
.main-content > h1 a {
    color: inherit;
    text-decoration: none;
}
.main-content > h1::before {
    content: "bookSHelf \00b7 Course Notes";
    display: block;
    font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
    font-style: italic;
    font-variant: small-caps;
    font-weight: 400;
    letter-spacing: 0.1em;
    font-size: calc(13px * var(--reader-font-scale, 1));
    color: var(--ink-stone);
    padding-bottom: var(--md);
    margin-bottom: var(--lg);
    border-bottom: 3px solid var(--accent-color);
}

/* ---- Lede: the first paragraph of the article reads larger ---- */
.main-content > p:first-of-type {
    font-size: calc(19px * var(--reader-font-scale, 1));
    line-height: 1.7;
    color: var(--ink-charcoal);
}

/* ---- Academic box family: definition / theorem / example / problem /
   context-pause / insight-note / collaborative-exercise / key-terminology
   / problem-set — from tinted rounded cards with a colored left strip to
   hairline-framed academic boxes on their own sheet of paper, the deck's
   `.figure` device. Only chrome changes here (border/bg/radius/shadow —
   `border` resets the shorthand's border-left sub-property too, so the
   6px strip is gone in one declaration); padding, margin and type sizing
   stay the base rhythm. */
.main-content .definition,
.main-content .theorem,
.main-content .example,
.main-content .problem,
.main-content .context-pause,
.main-content .insight-note,
.main-content .collaborative-exercise,
.main-content .key-terminology,
.main-content .problem-set {
    background: var(--pure-white);
    border: 1px solid var(--border-soft);
    border-radius: 0;
    box-shadow: none;
}
/* Problem entries inside a problem-set stay borderless dividers —
   base already handles this at higher specificity (.problem-set .problem),
   so it wins over the box treatment above without help here. */

/* Box titles read like numbered theorem/figure labels: small-caps,
   bold, letterspaced, on their own hairline rule. */
.main-content .definition-title,
.main-content .theorem-title,
.main-content .example-title {
    font-variant: small-caps;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--accent-color);
    border-bottom: 1px solid var(--border-soft);
    padding-bottom: var(--xs);
}
.main-content .context-pause::before,
.main-content .insight-note::before,
.main-content .collaborative-exercise::before {
    font-variant: small-caps;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--accent-color);
    border-bottom: 1px solid var(--border-soft);
    padding-bottom: var(--xs);
}

/* `.callout` — an inline aside with no base chrome at all. Treated as
   the deck's `.abstract`: hairline rules top and bottom, italic, no
   full box — a marginal remark rather than another numbered block. */
.main-content .callout {
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
    padding: var(--md) 0;
    margin: var(--xl) 0;
    font-style: italic;
    color: var(--ink-charcoal);
}

/* ---- learning-objectives: an "abstract" block, not a card.
   Drop the hardcoded orange strip and the rounded corner; frame
   the synopsis with hairline rules top and bottom instead. */
.main-content .learning-objectives {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
    border-radius: 0;
    padding: var(--lg) 0;
}
.main-content .learning-objectives > strong:first-child {
    font-variant: small-caps;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--accent-color);
}

/* ---- Solutions: a hairline-ruled proof, not a warm-sand pill ---- */
.main-content details.solution {
    background: transparent;
    border-top: 1px solid var(--border-soft);
    border-radius: 0;
}
.main-content details.solution summary {
    background: transparent;
    font-variant: small-caps;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--accent-color);
}
.main-content .solution-content {
    background: transparent;
    padding: var(--md) 0 0;
}

/* ---- Data tables: academic booktabs — heavy top/bottom rule, one
   hairline midrule under the header, never a vertical line. ---- */
.main-content .data-table {
    border-top: 2px solid var(--accent-color);
    border-bottom: 2px solid var(--accent-color);
}
.main-content .data-table th,
.main-content .data-table td {
    border: 0;
}
.main-content .data-table thead th {
    border-bottom: 1px solid var(--ink-near-black);
}
.main-content .data-table caption {
    text-align: center;
    font-style: italic;
    font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
}

/* ---- context-pause / insight-note: sidebar asides, styled after the
   deck's ruled "result" box (an accent-topped rule on the plain box
   family above) so a reader's eye catches them in the margin — they
   run smaller than body copy since they're only 33% wide. ---- */
.main-content .context-pause,
.main-content .insight-note {
    border-top: 2px solid var(--accent-color);
    font-size: calc(15px * var(--reader-font-scale, 1));
    line-height: 1.55;
}
.main-content .context-pause p:last-child,
.main-content .insight-note p:last-child {
    margin-bottom: 0;
}

/* ---- Chrome: a journal masthead, not an app navbar ---- */
.navbar {
    border-bottom: 1px solid var(--accent-color);
}
.navbar-brand {
    font-style: italic;
    font-variant: small-caps;
    letter-spacing: 0.06em;
}
.navbar-nav .nav-dropdown-btn {
    font-variant: small-caps;
    letter-spacing: 0.03em;
}