/*
 * Library design tokens: the fonts, neutrals, the six level colours and the print type scales;
 * a series' accents come from its generated tokens.css in the workspace (content/books/series/
 * paper-stone/brand/tokens.css), linked after components.css. These are the brand fonts
 * (@font-face) and the custom properties every print page, cover and the website use. Linked
 * first by the print engine's document shell (engine/src/books/print/html.mjs) and by the site;
 * components.css and each fold's fold.css build on these names. Ported from the POC's
 * books/brand/tokens.css unchanged apart from this header.
 *
 * Why it exists: every series' six books, their covers and the site must look like one family,
 * and like the video show (its palette, remotion/src/theme.ts, is where paper, ink and amber come
 * from). The fold colours run through the six reading levels, lightest to darkest. The display
 * face changes with them: Folds 1–4 set headings in "Fraunces Soft" (Fraunces' SOFT axis at 100:
 * round, friendly terminals), Folds 5–6 in the sharp "Fraunces" cut.
 *
 * How to use: link this file (don't paste its text: the font URLs are relative to it), then put
 * one of .fold-1 … .fold-6 on <html> or <body>. That scope sets the fold's colour (--fold,
 * --fold-ink, --fold-text, --fold-tint), its faces (--font-display, --font-text,
 * --font-caption, --font-label) and its print type scale (--type-*), which components.css reads.
 * Without a fold scope you get Fold 5's values: sharp Fraunces over Figtree, the UI pairing.
 *
 * What bites:
 *  - The hex values are duplicated in brand.mjs (PALETTE, FOLDS) for the SVGs. The engine carries
 *    no command that rewrites either file: change both together, by hand.
 *  - Static fonts only. Chromium's PDF writer embeds any variable font (fvar table) as Type 3,
 *    which print preflight rejects, so every face below is a static instance made from the
 *    *-Variable.ttf masters by the POC's fonts/instance.py. Neither the masters nor the script
 *    ship with the engine: only the instances listed below exist. Ask for 500 Fraunces and
 *    Chromium synthesises nothing, it snaps to 400 or 600. Another weight means a new static
 *    instance file in fonts/ and its @font-face here.
 *  - Sizes are points and inches: this is print first. 1pt = 1/72 in; Chromium's PDF output keeps
 *    them exact. The site should size its own type (rem) and take colours and faces from here.
 *  - A @font-face only downloads when some text uses it. Wait on document.fonts.ready AFTER
 *    layout before printing, not on page load.
 *  - Licences: SIL OFL 1.1, OFL.txt beside each family's files. Masters from github.com/google/fonts.
 *    Andika is SIL's own static files, untouched: it reserves its name, so never subset or
 *    instance it and ship the result as "Andika".
 */

/* Fraunces Soft: Folds 1–4 display and the wordmark. opsz 48, SOFT 100, WONK 1. */
/* Fraunces: Folds 5–6 display. opsz 28, SOFT 0, WONK 0. */
/* Andika: Folds 1–4 reading text. SIL designed it for literacy use and beginning readers, with
   letterforms "that will not be readily confused with one another": single-storey a and g. */
/* Figtree: UI, captions, labels, Fold 5 text. */
/* Literata: Fold 6 long-form text. opsz 12. */

@font-face { font-family: "Fraunces Soft"; src: url("fonts/fraunces/FrauncesSoft-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces Soft"; src: url("fonts/fraunces/FrauncesSoft-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces Soft"; src: url("fonts/fraunces/FrauncesSoft-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces Soft"; src: url("fonts/fraunces/FrauncesSoft-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Fraunces Soft"; src: url("fonts/fraunces/FrauncesSoft-BoldItalic.ttf") format("truetype"); font-weight: 700; font-style: italic; font-display: swap; }

@font-face { font-family: "Fraunces"; src: url("fonts/fraunces/Fraunces-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("fonts/fraunces/Fraunces-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("fonts/fraunces/Fraunces-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("fonts/fraunces/Fraunces-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("fonts/fraunces/Fraunces-SemiBoldItalic.ttf") format("truetype"); font-weight: 600; font-style: italic; font-display: swap; }

@font-face { font-family: "Andika"; src: url("fonts/andika/Andika-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Andika"; src: url("fonts/andika/Andika-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Andika"; src: url("fonts/andika/Andika-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Andika"; src: url("fonts/andika/Andika-BoldItalic.ttf") format("truetype"); font-weight: 700; font-style: italic; font-display: swap; }

@font-face { font-family: "Figtree"; src: url("fonts/figtree/Figtree-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/figtree/Figtree-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/figtree/Figtree-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/figtree/Figtree-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/figtree/Figtree-ExtraBold.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/figtree/Figtree-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/figtree/Figtree-BoldItalic.ttf") format("truetype"); font-weight: 700; font-style: italic; font-display: swap; }

@font-face { font-family: "Literata"; src: url("fonts/literata/Literata-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Literata"; src: url("fonts/literata/Literata-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Literata"; src: url("fonts/literata/Literata-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Literata"; src: url("fonts/literata/Literata-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Literata"; src: url("fonts/literata/Literata-BoldItalic.ttf") format("truetype"); font-weight: 700; font-style: italic; font-display: swap; }

:root {
  /* ---- Palette. The first four are the video's (remotion/src/theme.ts). ---- */
  --paper: #F3EEE3;      /* every page; the video's background */
  --foam: #FBF9F4;       /* lifted paper: speech bubbles, raised cards */
  --sand: #E6D6B5;       /* warm neutral: rules, tints, the back of a fold */
  --ink: #2B2A26;        /* all body text; the video's ink */
  --ink-soft: #5B5850;   /* captions, secondary text (6:1 on paper) */
  --amber: #E8A33D;      /* the video's accent: highlights, the speaking ring */
  --amber-deep: #8C5F0E; /* amber for text on paper (4.8:1) */

  /* ---- The six folds, the six reading levels, lightest to darkest. --fold-N-ink is text ON the
     colour; --fold-N-text is the colour dark enough for text on paper (≥ 4.5:1). ---- */
  --fold-1: #EEDD4F;        /* level 1: lemon, lighter and greener than level 2's gold */
  --fold-1-ink: var(--ink);
  --fold-1-text: #665C00;   /* olive, 5.9:1 on paper */
  --fold-2: #F1B64A;        /* level 2: gold */
  --fold-2-ink: var(--ink);
  --fold-2-text: #8C5F0E;
  --fold-3: #E27D5A;        /* level 3: coral */
  --fold-3-ink: var(--ink);
  --fold-3-text: #A94C2B;
  --fold-4: #48A38B;        /* level 4: green */
  --fold-4-ink: var(--ink);
  --fold-4-text: #267559;
  --fold-5: #2A6D96;        /* level 5: blue */
  --fold-5-ink: var(--paper);
  --fold-5-text: #2A6D96;
  --fold-6: #1B2A47;        /* level 6: navy */
  --fold-6-ink: var(--paper);
  --fold-6-text: #1B2A47;
  /* The six levels as one band: covers' spines, the site's ladder track. Six even steps. */
  --fold-ramp: linear-gradient(90deg, var(--fold-1), var(--fold-2) 20%, var(--fold-3) 40%, var(--fold-4) 60%, var(--fold-5) 80%, var(--fold-6));

  /* ---- Faces. --font-display is the fold's display face (the scopes below switch it). ---- */
  --font-display-sharp: "Fraunces", "Iowan Old Style", Georgia, serif;   /* Folds 5–6 display */
  --font-display-soft: "Fraunces Soft", "Fraunces", Georgia, serif;      /* Folds 1–4 display, wordmark */
  --font-display: var(--font-display-sharp);
  --font-read: "Andika", "Figtree", "Avenir Next", sans-serif;           /* Folds 1–4 text */
  --font-body: "Figtree", "Avenir Next", "Segoe UI", sans-serif;         /* Fold 5 text, UI, captions */
  --font-book: "Literata", "Iowan Old Style", Georgia, serif;            /* Fold 6 text */

  /* ---- Print constants. KDP (via PodSpecs): no line under 0.75pt, no text under 7pt, no live
     transparency, so there is no rgba or shadow token here: every colour is opaque. ---- */
  --hair: 0.75pt;                          /* thinnest rule that prints reliably */
  --line: #CBC7BD;                         /* hairline colour: ink 20% into paper, pre-blended */
  --badge-size: 0.9in;

  /* ---- Fold scope defaults = Fold 5 (see .fold-5 below for what each token means). ---- */
  --fold: var(--fold-5);
  --fold-ink: var(--fold-5-ink);
  --fold-text: var(--fold-5-text);
  --fold-tint: color-mix(in srgb, var(--fold) 12%, var(--paper));
  --font-text: var(--font-body);
  --font-caption: var(--font-body);
  --font-label: var(--font-body);
  --display-weight: 600;
  --type-title: 46pt;
  --type-h1: 26pt;
  --type-h2: 17pt;
  --type-h3: 13pt;
  --type-body: 11.5pt;
  --type-leading: 1.45;
  --type-word-spacing: 0;
  --type-aside: 10pt;
  --type-bubble: 10.5pt;
  --type-caption: 9pt;
  --type-label: 8.5pt;
  --guide-size: 0.8in;
}

/*
 * Fold scopes: the print type scale. Reading sizes follow the age: a child reading alone for the
 * first time decodes Fold 1 one word at a time (28pt on a 6 × 9 page, the largest reading size in
 * the series, with the widest leading and word gaps: ≤ 10 words a page make two or three short
 * lines), a grown-up reads Fold 2 aloud across a lap (24pt), a new reader moves on to Fold 3's
 * short sentences (20pt, open leading and word spacing), Fold 4 is a first chapter book (15pt),
 * Fold 5 a middle-grade field guide (11.5pt Figtree, whose tall x-height reads like 12), Fold 6
 * adult popular science (10.5pt Literata).
 *   --type-title   title page / cover display     --type-body     reading text
 *   --type-h1..h3  headings                       --type-leading  unitless line height for body
 *   --type-aside   wow boxes, sidebars            --type-bubble   guide speech bubbles
 *   --type-caption figure captions                --type-label    diagram labels
 */
.fold-1 {
  --fold: var(--fold-1); --fold-ink: var(--fold-1-ink); --fold-text: var(--fold-1-text);
  --fold-tint: color-mix(in srgb, var(--fold-1) 18%, var(--paper));
  --font-text: var(--font-read); --font-caption: var(--font-read); --font-label: var(--font-read);
  --font-display: var(--font-display-soft); --display-weight: 700;
  /* Big and open: 28pt Andika (5 in measure ≈ 5 words a line), leading 1.55 so a finger can
     track the line, word gaps 0.16em so each word stands alone to be sounded out. Picture words
     (--type-label) and bubbles stay large: the child reads those too. */
  --type-title: 54pt; --type-h1: 36pt; --type-h2: 28pt; --type-h3: 24pt;
  --type-body: 28pt; --type-leading: 1.55; --type-word-spacing: 0.16em;
  --type-aside: 22pt; --type-bubble: 22pt; --type-caption: 18pt; --type-label: 18pt;
  --guide-size: 1.2in;
}
.fold-2 {
  --fold: var(--fold-2); --fold-ink: var(--fold-2-ink); --fold-text: var(--fold-2-text);
  --fold-tint: color-mix(in srgb, var(--fold-2) 18%, var(--paper));
  --font-text: var(--font-read); --font-caption: var(--font-read); --font-label: var(--font-read);
  --font-display: var(--font-display-soft); --display-weight: 700;
  --type-title: 66pt; --type-h1: 40pt; --type-h2: 30pt; --type-h3: 24pt;
  --type-body: 24pt; --type-leading: 1.3; --type-word-spacing: 0.06em;
  --type-aside: 20pt; --type-bubble: 20pt; --type-caption: 14pt; --type-label: 14pt;
  --guide-size: 1.6in;
}
.fold-3 {
  --fold: var(--fold-3); --fold-ink: var(--fold-3-ink); --fold-text: var(--fold-3-text);
  --fold-tint: color-mix(in srgb, var(--fold-3) 14%, var(--paper));
  --font-text: var(--font-read); --font-caption: var(--font-read); --font-label: var(--font-read);
  --font-display: var(--font-display-soft); --display-weight: 700;
  --type-title: 52pt; --type-h1: 32pt; --type-h2: 24pt; --type-h3: 20pt;
  --type-body: 20pt; --type-leading: 1.5; --type-word-spacing: 0.08em;
  --type-aside: 17pt; --type-bubble: 17pt; --type-caption: 13pt; --type-label: 12pt;
  --guide-size: 1.25in;
}
.fold-4 {
  --fold: var(--fold-4); --fold-ink: var(--fold-4-ink); --fold-text: var(--fold-4-text);
  --fold-tint: color-mix(in srgb, var(--fold-4) 14%, var(--paper));
  --font-text: var(--font-read); --font-caption: var(--font-read); --font-label: var(--font-read);
  --font-display: var(--font-display-soft); --display-weight: 700;
  --type-title: 50pt; --type-h1: 30pt; --type-h2: 20pt; --type-h3: 16pt;
  --type-body: 15pt; --type-leading: 1.45; --type-word-spacing: 0.03em;
  --type-aside: 13pt; --type-bubble: 13pt; --type-caption: 11pt; --type-label: 10.5pt;
  --guide-size: 1in;
}
.fold-5 {
  --fold: var(--fold-5); --fold-ink: var(--fold-5-ink); --fold-text: var(--fold-5-text);
  --fold-tint: color-mix(in srgb, var(--fold-5) 10%, var(--paper));
  --font-text: var(--font-body); --font-caption: var(--font-body); --font-label: var(--font-body);
  --font-display: var(--font-display-sharp); --display-weight: 600;
  --type-title: 46pt; --type-h1: 26pt; --type-h2: 17pt; --type-h3: 13pt;
  --type-body: 11.5pt; --type-leading: 1.45; --type-word-spacing: 0;
  --type-aside: 10pt; --type-bubble: 10.5pt; --type-caption: 9pt; --type-label: 8.5pt;
  --guide-size: 0.8in;
}
.fold-6 {
  --fold: var(--fold-6); --fold-ink: var(--fold-6-ink); --fold-text: var(--fold-6-text);
  --fold-tint: color-mix(in srgb, var(--fold-6) 7%, var(--paper));
  --font-text: var(--font-book); --font-caption: var(--font-body); --font-label: var(--font-body);
  --font-display: var(--font-display-sharp); --display-weight: 600;
  --type-title: 40pt; --type-h1: 21pt; --type-h2: 14pt; --type-h3: 11.5pt;
  --type-body: 10.5pt; --type-leading: 1.42; --type-word-spacing: 0;
  --type-aside: 9.5pt; --type-bubble: 10pt; --type-caption: 8.5pt; --type-label: 7.5pt;
  --guide-size: 0.8in;
}