/* ==========================================================================
   Knowledgebooks.ai — Design Tokens
   Source of truth: /docs/DESIGN_SYSTEM.md. Do not hardcode these values
   elsewhere — reference these custom properties from styles.css.
   ========================================================================== */

:root {
  /* Color — exact, no others */
  --cream: #FEFBEC;
  --forest: #1A3821;
  --ink: #071909;
  --gold: #D1A037;
  --amber-ink: #755A12;
  --amber-tint: rgba(209, 160, 55, 0.16);
  --lavender: #C7ADD4; /* Ask Safely's color only — orb + recall marks. Never anything else. */
  --muted: #705A5A;
  --card-white: #FFFFFF;
  --line: rgba(7, 25, 9, 0.09);
  --forest-tint: rgba(26, 56, 33, 0.07);
  --tape: #F3EFE2; /* hero page ONLY — not blog cards, not anywhere else */
  --ink-border: rgba(7, 25, 9, 0.2); /* the Wave 6 paper-as-surface border */
  --ink-hairline: rgba(7, 25, 9, 0.12); /* beat 05 full-bleed top/bottom */
  --ruled-line: rgba(26, 56, 33, 0.05);
  --cream-on-forest: rgba(254, 251, 236, 0.85);
  --cream-on-forest-muted: rgba(254, 251, 236, 0.6);
  --cream-on-forest-faint: rgba(254, 251, 236, 0.18);

  /* Cold grey — the anti-card ONLY, and the single sanctioned exception to the
     closed palette (founder ruling, Jul 30). This is a Knowledgebook that
     isn't yours: paper gone cold, no rules to read by, redactions where the
     facts should be. Never use these where a real Knowledgebook is depicted;
     the whole diptych depends on warm paper meaning "yours". */
  --cold-paper: #ECECEA;
  --cold-ink: #8C8C89;
  --cold-bar: #CFCFCB;

  /* Type families — three voices, never mixed in one element */
  --font-serif: 'Lora', Georgia, 'Times New Roman', serif;   /* belief: headlines, chorus, fork, founder, page lines, answers */
  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* product: body, UI, captions */
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* proof: timers, counts, provenance — always tabular-nums */

  /* Type scale */
  --size-hero: 68px;
  --size-hero-phone: 32px;
  --size-section: 46px;
  --size-section-phone: 32px;
  --size-submoment: 30px;
  --size-submoment-phone: 25px;
  --size-page-title: 27px;
  --size-page-title-sm: 25px;
  --size-subhead-body: 19px;
  --size-page-line: 17.5px;
  --size-portrait-fact: 26px;
  --size-portrait-fact-phone: 21px;
  --size-ui: 15px;
  --size-caption: 13.5px;
  --size-caption-sm: 12px;
  --size-mono-meta: 11px;
  --size-mono-meta-sm: 10px;

  /* Named sizes for the moments that sit outside the base scale. Added in the
     Jul 30 space audit so no arbitrary px values remain in styles.css. These
     are the site's own scale, NOT Tailwind's — see the audit note in
     DESIGN_SYSTEM.md for why the brand scale was kept. */
  --size-fork: 58px;          /* the fork — typographic peak */
  --size-fork-phone: 38px;
  --size-indict: 42px;        /* the four failures */
  --size-indict-phone: 26px;  /* ...one line each at 390px */
  --size-clock: 28px;         /* the countdown */
  /* Countdown digits on phones. A fixed 28px forced the label beside it to
     hyphen-break; this keeps label + digits on one line from 320px up. */
  --size-clock-phone: clamp(21px, 5.9vw, 26px);
  --size-body-lg: 20px;       /* fork body */
  --size-body-sm: 18px;       /* travel body */

  /* Middle-act eight sizes (beats 04–06) — zero exceptions */
  --mid-serif-1: 46px;
  --mid-serif-2: 30px;
  --mid-serif-3: 26px;
  --mid-serif-4: 21px;
  --mid-serif-5: 19px;
  --mid-sans-1: 15px;
  --mid-sans-2: 13px;
  --mid-mono: 11px;

  /* Spacing — 8-base scale */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 104px;
  --space-7: 160px;
  --content-max: 1200px;
  --content-gutter: 48px;
  --section-rhythm: 150px;
  --chorus-breath: 180px; /* the whitespace before the forest band */

  /* Radii */
  --radius-pill: 24px;
  --radius-hero-card: 18px;
  --radius-keep-card: 16px;
  --radius-chip: 11px;
  --radius-paper: 2px; /* Wave 6 paper-as-surface — square corners in the middle act */

  /* Shadows — hero page card ONLY. Middle act (04–06) has zero shadows. */
  --shadow-hero-card: 0 1px 2px rgba(7, 25, 9, 0.05), 0 14px 40px rgba(7, 25, 9, 0.08);
  --shadow-sm: 0 4px 14px rgba(7, 25, 9, 0.05);

  /* Motion */
  --ease: cubic-bezier(0, 0, 0.2, 1);
  /* Motion vocabulary — the product's verbs only (see DESIGN_SYSTEM.md).
     --ease-snap: a stamp landing (months device). --ease-lift: the signature
     hero moment, knowledge lifting out of a chat and settling on the page. */
  --ease-snap: cubic-bezier(0.2, 0.9, 0.1, 1);
  --ease-lift: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-quiet: 300ms;
  --dur-stamp: 420ms;
  --dur-lift: 1100ms;
  --dur-dissolve: 600ms;
  --dur-hairline: 200ms;
  /* The receipts sequence (beat 08). Slow on purpose: the clearing is the
     thing being demonstrated, so it has to be watchable. Schedule and total
     runtime live in initSaturdayDemo(). */
  --dur-bubble-in: 400ms;
  --dur-bubble-out: 1100ms;
  --dur-collapse: 700ms;
  --dur-caption-in: 900ms;
  --dur-answer-in: 600ms;
  --dur-receipt: 0ms; /* instant, by design — see DESIGN_SYSTEM.md */
  --typewriter-char: 40ms;
}

/* Font-face declarations — self-hosted, real files in ./assets/fonts.
   Only the weights this site actually uses are loaded. See DESIGN_SYSTEM.md
   for the confirmed-available-weights note before requesting others. */

/* Primary Latin faces — covers all copy on this site (English only).
   Additional subset files (cyrillic, greek, vietnamese, math, symbols) sit
   in ./assets/fonts for completeness but are NOT loaded below — this site
   has no non-Latin copy. Add @font-face blocks for them only if that changes. */

@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/Lora-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/Lora-Italiclatin.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700; /* variable font file — one file serves the whole range */
  font-display: swap;
  src: url('../assets/fonts/DMSans-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600; /* variable font file — one file serves both weights used */
  font-display: swap;
  src: url('../assets/fonts/JetBrainsMono-latin.woff2') format('woff2');
}

/* Confirmed available weights (verified against the actual files above):
   Lora — 400 normal + 400 italic ONLY. Nothing on this site requests Lora
   above 400 (the hero h1 uses font-weight:500, which will render using
   this 400 file — browsers don't synthesize-bold a serif face by default,
   so this is a harmless, intentional gap, not a bug). If a future design
   needs true Lora bold, source a 700 file separately.
   DM Sans — 400 through 700, variable, confirmed.
   JetBrains Mono — 400 and 600, variable, confirmed. */