/*
 * styles/vvviva.css — VVViva paged-media theme (Vivliostyle).
 *
 * Governing canon: WRITING.md Part II "Relational Modernism" — quiet,
 * relational, precise, spacious; never occult, clinical, or guru-led.
 *
 * Palette and every callout treatment are mirrored from components.typ so the
 * printed Vivliostyle edition and the Typst proof read as one book. Divider
 * accents live in CSS custom properties, not in content markup.
 */

@import url('../node_modules/@vivliostyle/theme-base/theme-all.css');

/* ------------------------------------------------------------------ */
/* Fonts — workspace-resident, OFL. No Iowan Old Style.                */
/*   VVViva Serif  = Adobe Source Serif 4 (body + display)            */
/*   VVViva Sans   = Adobe Source Sans 3 (metadata, prompts, folios)  */
/* ------------------------------------------------------------------ */
@font-face {
  font-family: 'VVViva Serif';
  src: url('../assets/fonts/SourceSerif4-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'VVViva Serif';
  src: url('../assets/fonts/SourceSerif4-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'VVViva Serif';
  src: url('../assets/fonts/SourceSerif4-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: block;
}
@font-face {
  font-family: 'VVViva Sans';
  src: url('../assets/fonts/SourceSans3-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: block;
}

/* ------------------------------------------------------------------ */
/* Design tokens — single source of truth (mirrors components.typ).   */
/* Names map 1:1 to the Typst palette.                                */
/* ------------------------------------------------------------------ */
:root {
  --vvv-ink:   #202124; /* graphite — body text, large numerals       */
  --vvv-plum:  #183D7A; /* deep cobalt — primary rule, chapter marker */
  --vvv-sage:  #73785F; /* muted sage — field, soft breaks            */
  --vvv-rose:  #B78332; /* warm ochre — rare point of attention       */
  --vvv-paper: #F4F0E7; /* warm ivory — default page field            */
  --vvv-mist:  #D2D2BC; /* light sage — quiet section fields          */
  --vvv-safety:#A9584D; /* rose-red — safety-boundary warnings        */

  /* Divider accents: presentation responsibility, not content markup.   */
  /* Book I   → plum (deep cobalt)                                       */
  /* Book II  → sage (muted field)                                       */
  /* Threshold → rose (warm ochre) marks the book-to-book transition     */
  --vvv-book-i-accent: var(--vvv-plum);
  --vvv-book-ii-accent: var(--vvv-sage);
  --vvv-threshold-accent: var(--vvv-rose);

  /* Callout fills are the accent lightened ~92% (as in components.typ). */
  --vvv-plum-tint:  #eef2f9;
  --vvv-sage-tint:  #f1f2ec;
  --vvv-rose-tint:  #fbf5ec;
  --vvv-safety-tint:#f6eceb;

  /* Plum border for practice-cards: plum lightened ~55%.               */
  --vvv-plum-line: #8a9fc4;
}

/* ------------------------------------------------------------------ */
/* Page model — A4, generous margins (38mm side).                     */
/* ------------------------------------------------------------------ */
@page {
  size: A4;
  margin: 30mm 38mm 28mm;

  @bottom-center {
    content: counter(page);
    font-family: 'VVViva Sans', sans-serif;
    font-size: 8pt;
    color: var(--vvv-ink);
  }
}
@page :left {
  @top-left {
    content: string(chapter-title);
    font-family: 'VVViva Sans', sans-serif;
    font-size: 8pt;
    color: var(--vvv-ink);
  }
}
@page :right {
  @top-right {
    content: 'VVViva';
    font-family: 'VVViva Sans', sans-serif;
    font-size: 8pt;
    color: var(--vvv-ink);
  }
}

/* Divider pages: centered, deliberate whitespace, no running matter.  */
@page divider {
  @top-left { content: none; }
  @top-right { content: none; }
  @bottom-center { content: none; }
}

/* ------------------------------------------------------------------ */
/* Base typography — Relational Modernism: quiet, literary, spacious.  */
/* ------------------------------------------------------------------ */
html {
  font-family: 'VVViva Serif', serif;
  font-size: 10.5pt;            /* 10.5–11pt per canon                 */
  line-height: 1.5;             /* generous leading                    */
  color: var(--vvv-ink);
  background: var(--vvv-paper);
}

html[lang="en"],
:lang(en) {
  hyphens: auto;                /* lang en — hyphenation on            */
}

body {
  text-align: justify;
  hanging-punctuation: first last;
  widows: 2;
  orphans: 2;
}

/* Headings — sentence case, never all-caps for titles.               */
h1, h2, h3, h4, h5, h6 {
  font-family: 'VVViva Sans', sans-serif;
  font-weight: 600;
  line-height: 1.25;
  break-after: avoid;
}

/* Chapter title seeds the verso running head.                         */
h1 {
  string-set: chapter-title content(text);
  font-size: 1.8em;
  font-weight: 600;
  margin-top: 0;
  break-before: recto;
}

/* ------------------------------------------------------------------ */
/* Callouts — base. Mirrors the Typst callout rhythm: left accent      */
/* stroke, tinted fill, modest radius, kept off awkward breaks.        */
/* ------------------------------------------------------------------ */
.callout {
  break-inside: avoid;
  margin: 1.2em 0;
  padding: 0.8em 1.2em;
  border-left-width: 3pt;
  border-left-style: solid;
  border-radius: 0 4pt 4pt 0; /* rounded on the right, flush on left  */
  page-break-inside: avoid;
}
.callout p:first-child { margin-top: 0; }
.callout p:last-child  { margin-bottom: 0; }

/* Reflection — plum stripe, plum-tinted fill, bold plum header.      */
/* components.typ: 3pt plum left, plum lighten(92%), bold plum label. */
.callout.reflection {
  border-left-color: var(--vvv-plum);
  background: var(--vvv-plum-tint);
  border-radius: 0 4pt 4pt 0; /* left radius 4pt in Typst; flush read  */
}
.callout.reflection::before {
  content: 'Reflection';
  display: block;
  font-family: 'VVViva Sans', sans-serif;
  font-weight: 600;
  font-size: 0.82em;
  color: var(--vvv-plum);
  margin-bottom: 0.3em;
  letter-spacing: 0.02em;
}

/* Note — sage stripe, sage-tinted fill, no header by default.        */
.callout.note {
  border-left-color: var(--vvv-sage);
  background: var(--vvv-sage-tint);
}

/* Evidence-note — accent stripe, accent-tinted fill, 4pt radius,      */
/* bold accent kind-label header. Default accent = sage.               */
.callout.evidence-note {
  border-left-color: var(--vvv-sage);
  background: var(--vvv-sage-tint);
  border-radius: 4pt;
  --evidence-accent: var(--vvv-sage);
}
/* Bold accent kind-label header (components.typ: bold 0.82em, accent
 * darkened ~18%). The converter emits the kind label as a leading
 * <strong>/<b>, a <header>, or a .kind element; style whichever appears. */
.callout.evidence-note > :first-child > strong:first-child,
.callout.evidence-note > strong:first-child,
.callout.evidence-note > header:first-child,
.callout.evidence-note > .kind:first-child {
  display: block;
  font-family: 'VVViva Sans', sans-serif;
  font-weight: 700;
  font-size: 0.82em;
  color: var(--evidence-accent);
  margin-bottom: 0.25em;
}

/* Safety variant — rose-red accent for safety-boundary warnings.      */
/* components.typ passes accent: rgb("#a9584d") to evidence-note.       */
.callout.evidence-note.safety {
  border-left-color: var(--vvv-safety);
  background: var(--vvv-safety-tint);
  --evidence-accent: var(--vvv-safety);
}

/* Practice-card — plum-tinted full border, paper fill, 5pt radius,    */
/* bold plum title. components.typ: 0.8pt plum lighten(55%) border.    */
.callout.practice-card {
  border: 0.8pt solid var(--vvv-plum-line);
  border-left-width: 0.8pt; /* full border, not a left stripe          */
  background: var(--vvv-paper);
  border-radius: 5pt;
  padding: 1.1em;
}
.callout.practice-card > :first-child {
  font-family: 'VVViva Sans', sans-serif;
  font-weight: 600;
  color: var(--vvv-plum);
}

/* Quote-block — plum left stripe, rose-tinted fill, italic body,      */
/* 4pt radius on the right. components.typ quote-block.                */
.quote-block {
  break-inside: avoid;
  page-break-inside: avoid;
  margin: 1.2em 0;
  padding: 0.8em 1.2em;
  border-left: 3pt solid var(--vvv-plum);
  background: var(--vvv-rose-tint);
  border-radius: 0 4pt 4pt 0;
  font-style: italic;
}
.quote-block p:first-child { margin-top: 0; }
.quote-block p:last-child  { margin-bottom: 0; }

/* ------------------------------------------------------------------ */
/* Figures — centered, image at 80% width, captions preserved.        */
/* components.typ: chapter-illustration, annotated-figure.            */
/* ------------------------------------------------------------------ */
.chapter-figure,
.annotated-figure {
  break-inside: avoid;
  page-break-inside: avoid;
  margin: 1.4em 0;
  text-align: center;
}
.chapter-figure > img,
.annotated-figure > img {
  max-width: 80%;
  height: auto;
}
.chapter-figure figcaption,
.annotated-figure figcaption {
  font-family: 'VVViva Sans', sans-serif;
  font-size: 0.85em;
  color: var(--vvv-ink);
  margin-top: 0.6em;
  text-align: center;
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
}

/* ------------------------------------------------------------------ */
/* Dividers — presentation responsibility. Each book and the threshold */
/* get a named recto divider page with centered whitespace.            */
/* The converter emits each divider as a <section> wrapping a          */
/* <p class="eyebrow"> label and a .level1 > <h1> title (+ optional    */
/* <p> subtitle); the threshold additionally carries body prose in     */
/* .level2 sections. Divider styling is therefore scoped to those      */
/* real elements, not to .divider-* classes (which never reach the     */
/* markup). Accent color is wired through the --divider-accent custom  */
/* property on the section element.                                    */
/* ------------------------------------------------------------------ */
.book-divider,
.threshold-divider {
  page: divider;
  break-before: recto;
  break-after: page;
}
.part-divider {
  break-before: recto;
  break-after: page;
}

/* Short book/part divider bodies: centered, vertical breath. The      */
/* threshold is excluded because it carries body prose after its       */
/* title and must not be vertically centered as one oversized block.   */
.book-divider,
.part-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 60vh;
}

/* The inner .level1 wrapper is the flex item; let it size to content. */
.book-divider > .level1,
.part-divider > .level1 {
  width: 100%;
}

/* Divider label = the .eyebrow paragraph: accent uppercase letterspaced,
 * with a short accent rule beneath it (presentation, not content).    */
.book-divider > .eyebrow,
.part-divider > .eyebrow,
.threshold-divider > .eyebrow {
  font-family: 'VVViva Sans', sans-serif;
  font-weight: 600;
  font-size: 0.9em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--divider-accent, var(--vvv-plum));
  text-align: center;
  margin: 0 auto 0.9em;
  padding-bottom: 0.7em;
  width: 42%;
  border-bottom: 1.2pt solid var(--divider-accent, var(--vvv-plum));
}

/* Divider title = the .level1 > h1. Inherits the chapter h1 rule but  */
/* overrides size and clears the recto break (the section already      */
/* forces recto; a second break on the nested h1 corrupts the rhythm). */
.book-divider .level1 > h1,
.part-divider .level1 > h1,
.threshold-divider .level1 > h1 {
  font-family: 'VVViva Serif', serif;
  font-weight: 600;
  font-size: 2.1em;
  line-height: 1.2;
  color: var(--vvv-ink);
  margin: 0 0 0.8em;
  text-align: center;
  break-before: auto;
}

/* Divider subtitle = the .level1 > p directly under the title.        */
.book-divider .level1 > p,
.part-divider .level1 > p,
.threshold-divider .level1 > p {
  max-width: 78%;
  margin: 0 auto;
  color: #4a4a4d; /* ink lightened ~18%, per components.typ           */
  font-size: 1em;
  line-height: 1.32;
  text-align: center;
}

/* Accent wiring via custom properties on the divider element itself.  */
.book-divider.book-i        { --divider-accent: var(--vvv-book-i-accent); }
.book-divider.book-ii       { --divider-accent: var(--vvv-book-ii-accent); }
.threshold-divider          { --divider-accent: var(--vvv-threshold-accent); }

/* ------------------------------------------------------------------ */
/* Print fidelity.                                                    */
/* ------------------------------------------------------------------ */
@media print {
  a { color: inherit; text-decoration: none; }
  img { max-width: 100%; }
}