/* GENERATED from the CMS theme — edit tokens in the admin, not here. */
:root {
  --md-primary: #B69DF8;
  --md-on-primary: #33246B;
  --md-primary-container: #463371;
  --md-on-primary-container: #E9DDFF;
  --md-secondary: #8FC3FF;
  --md-secondary-container: #22415F;
  --md-on-secondary-container: #D3E6FF;
  --md-tertiary: #6FDCA0;
  --md-tertiary-container: #1C4B34;
  --md-success: #6FDCA0;
  --md-success-container: #1C4B34;
  --md-teal: #4DD0C0;
  --md-error: #FF6B60;
  --md-error-container: #5E1B15;
  --md-surface-lowest: #0A0D11;
  --md-surface-low: #141821;
  --md-surface: #0E1116;
  --md-surface-c: #171C26;
  --md-surface-high: #1E2430;
  --md-surface-highest: #252C3A;
  --md-on-surface: #E3E6EC;
  --md-on-surface-variant: #B6BCC8;
  --md-outline: #8A92A0;
  --md-outline-variant: #333A46;
  --md-inverse-surface: #080A0E;
  --md-inverse-on-surface: #E3E6EC;
  --md-e1: 0 1px 2px rgba(0,0,0,.45), 0 1px 3px 1px rgba(0,0,0,.30);
  --md-e2: 0 1px 2px rgba(0,0,0,.45), 0 2px 6px 2px rgba(0,0,0,.30);
  --md-e3: 0 4px 8px 3px rgba(0,0,0,.30), 0 1px 3px rgba(0,0,0,.45);
  --md-font: 'Roboto Flex MD', Roboto, 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --md-mono: 'Roboto Mono', 'Cascadia Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
  --md-shape-sm: 8px;
  --md-shape-md: 12px;
  --md-shape-lg: 16px;
  --md-shape-full: 9999px;
  --md-text-2xs: 10px;
  --md-text-xs: 11px;
  --md-text-sm: 12px;
  --md-text-md: 13px;
  --md-text-base: 14px;
  --md-text-lg: 18px;
  --md-text-xl: 20px;
  --md-text-2xl: 24px;
  --md-space-1: 4px;
  --md-space-2: 8px;
  --md-space-3: 12px;
  --md-space-4: 16px;
  --md-space-6: 24px;
  --od-display-1: clamp(38px, 6.6vw, 74px);
  --od-display-2: clamp(24px, 3.2vw, 38px);
  --od-display-3: clamp(18px, 2vw, 22px);
  --od-space-8: 32px;
  --od-space-12: 48px;
  --od-space-16: 64px;
  --od-space-24: 96px;
  --od-wrap: 1240px;
  --od-ease: cubic-bezier(.22, 1, .36, 1);
  --od-dur: .55s;
  --oa-bar-h: 54px;
  --oa-bar-brand: 15px;
  --oa-bar-nav: 13px;
}

/* oa-font-face — the site typeface, served once from /assets/ rather than
   embedded per page. Variable weight, so one file covers the whole range.
   font-display:swap renders fallback text immediately and swaps when the
   face arrives, instead of blocking the headline on a 43 KB download. */
@font-face {
  font-family: 'Roboto Flex MD';
  src: url('/assets/roboto-flex.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* ============================================================================
   Oli Dark — Material Design 3 (custom scheme)
   ----------------------------------------------------------------------------
   EXTRACTED, NOT AUTHORED. Every value above was read out of the shipped files
   on 2026-07-23:
     explainer.html · landscape.html · devops.html

   Colour, elevation and type-family were already tokenised in those files and
   are copied verbatim. Shape, type-scale and spacing were NOT tokenised — they
   lived in Tailwind utility classes — so those blocks are DERIVED from actual
   usage frequency across the three files, and are marked as such.

   NOT covered by this system, deliberately:
     heroes.html   — comic register, Montserrat + League Spartan
     childrens-guide.html — storybook register, hand-written CSS
   Those are different brand voices on purpose. Do not unify them into this.
   ========================================================================== */

/* --- Colour: tertiary (green) ------------------------------------------
   NOTE: tertiary and success are the same green by design. MD3's baseline
   tertiary is PINK — explicitly rejected by the owner. Do not "restore" it. */

/* --- Surface ramp (6 steps, dark) --------------------------------------
   Use ascending steps for nested/elevated containers, not shadows alone. */

/* --- Inverse (used for code blocks / inverted callouts) ---------------- */

/* --- Elevation ---------------------------------------------------------
   Dark-theme shadows are heavier than MD3 light defaults on purpose —
   they have to read against a #0E1116 ground. */

/* ======================================================================
   DERIVED BLOCKS — these were not tokens in the source files.
   Reconstructed from class-usage frequency, 2026-07-23. Treat as a
   faithful description of the existing look, not as a prior decision.
   ====================================================================== */

/* --- Shape scale (from rounded-* usage: xl 48× · 2xl 36× · lg 22×) ----- */
/* rounded-lg   — inputs, chips, small controls */
/* rounded-xl   — THE DEFAULT. most common by far */
/* rounded-2xl  — cards, panels, section wrappers */
/* rounded-full — pills, avatars, dots */

/* --- Type scale --------------------------------------------------------
   This is a COMPACT, information-dense scale. The three most-used sizes are
   12px, 14px and 11px — it is a documentation voice, not a marketing one.
   Reproduce that density or new pages will not match. */

/* --- Spacing rhythm (4px base; p-3/gap-3 dominate at 108× and 46×) ----- */

/* ---------------------------------------------------------------------------
   Minimum viable component rules — enough to make a new page look native.
   --------------------------------------------------------------------------- */

body {
  background: var(--md-surface);
  color: var(--md-on-surface);
  font-family: var(--md-font);
  font-size: var(--md-text-base);
  line-height: 1.55;
}

/* Outlined card — the dominant container in all three source pages.
   Note it is OUTLINED, not filled-and-shadowed: the hairline does the work. */
.md-card {
  background: var(--md-surface-c);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-lg);
  padding: var(--md-space-4);
}

/* State layer — MD3 interaction feedback. 8% primary on hover, 12% pressed. */
.md-interactive { position: relative; cursor: pointer; transition: background .15s ease; }
.md-interactive:hover  { background: color-mix(in srgb, var(--md-primary) 8%,  var(--md-surface-c)); }
.md-interactive:active { background: color-mix(in srgb, var(--md-primary) 12%, var(--md-surface-c)); }

/* Code / terminal block — inverse surface, never the card surface. */
.md-term {
  background: var(--md-inverse-surface);
  color: var(--md-inverse-on-surface);
  font-family: var(--md-mono);
  font-size: var(--md-text-sm);
  border-radius: var(--md-shape-md);
  padding: var(--md-space-4);
  overflow-x: auto;
}

/* Hairline — used constantly for table rules and section dividers. */
.md-hairline { border-color: var(--md-outline-variant); }