/* Arcane Circuits THEME v2 (Bigpappa 17 lane A). A SUPERSET of the design system tokens.css: every original name and role is kept with its value unchanged
   (no original token was changed; the art argues for adding, not altering). Added: motif tokens, derived glows and gradients, --font-rune, motion and geometry tokens.
   Themes: dark "Tech mage grimoire" is the default; [data-theme="light"] is "Ancient vellum"; with no data-theme attribute, prefers-color-scheme picks (the pages' own script
   normally sets data-theme). Contrast numbers for every text role are in THEME.md and specimen.html. */
/* Arcane Circuits — generated from tokens.json */
:root, [data-theme="dark"] {
  --void: #050b0d; /* The book cover and table: the ground around the page. Dark: near-black teal casing. Ancient vellum: worn tan leather. Text on it uses `ink`. */
  --surface: #0b181c; /* The page itself. Dark: an inked teal-black screen page with a faint blueprint grid. Ancient vellum: stained, foxed parchment. Body text uses `ink`, secondary text `ink-muted`. */
  --surface-raised: #112429; /* Inset plates, cards, inputs and table rows sitting on `surface`, like a pasted-in leaf or a lit panel. Text on it uses `ink` and `ink-muted`. */
  --teal-deep: #0e4a54; /* Heavy slab fill for banners, ribbons, selected rows and large color blocks. Text on it uses `on-teal-deep`. */
  --on-teal-deep: #e8f2ec; /* Text and icons placed on `teal-deep`. */
  --line: #8c7a45; /* Brass rules that carry meaning: input outlines, button outlines, page frames, chart axes. Holds 3:1 against `surface` and `surface-raised` in both themes. */
  --line-subtle: #2e3a32; /* Faint ruled lines and decorative dividers. Never the only cue for a control boundary. */
  --ink: #e8f2ec; /* Primary text on `void`, `surface` and `surface-raised`. Dark: pale glowing ink. Light: sepia-black ink. */
  --ink-muted: #a3b8b0; /* Secondary text, marginalia, captions and eyebrow labels on `surface` and `surface-raised`. */
  --rune: #3ce4e4; /* The brand color, the enchanted ink: links, primary buttons, focus rings, active states, key data series, and the live glow in the dark theme. On `surface` and `surface-raised`; text placed on a rune fill uses `on-accent`. */
  --mint: #4fe3a8; /* Circuit-green accent: success, ok status, second data series. On `surface` and `surface-raised`. */
  --gold: #d9b25a; /* Gilding: page frames, ornament, rule diamonds, warning status. On `surface` and `surface-raised`. */
  --violet: #a98bff; /* Arcane purple: agent and AI features, third data series. On `surface` and `surface-raised`. */
  --amber: #f0944a; /* Copper and ember: solder, salvage, decisions waiting on a person, fourth data series. On vellum it is also the rubrication ink for illuminated initials and eyebrow labels. On `surface` and `surface-raised`. */
  --danger: #ff7b72; /* Errors and destructive actions. Always paired with the word or an icon, never color alone. On `surface` and `surface-raised`. */
  --on-accent: #031416; /* Text and icons placed on filled `rune`, `mint`, `gold`, `violet`, `amber` or `danger`. */
  --glow-rune: 0 0 16px rgba(60, 228, 228, 0.32); /* Primary button, active element and the page edge. A teal electric glow in the dark theme, a plain soft shadow on vellum. */
  /* --- v2 motif tokens (the owner's art: steel rims, circuit traces, glow, lightning, brass highlights) --- */
  --steel: #46888a; /* Metal rim body and chamfered plate edges. Graphic use only (3:1): 4.4:1 on `surface`, below the 4.5:1 text bar, so never set text in it. */
  --steel-light: #6dbbb8; /* Rim highlight, rune-ring glyphs, icon accent strokes. Also holds text contrast on `surface` and `surface-raised`. */
  --steel-deep: #24424b; /* Rim shadow side and the dark inner bevel (the folder icons' grey-teal). Fill only. */
  --circuit: #278682; /* Circuit traces and solder pads. Graphic use only (3:1 on `surface` and `surface-raised`). */
  --glow: #47cfd4; /* Lit edges, active traces, glow halos. Brighter and cooler than `rune`; use `rune` for text and links. */
  --lightning: #aaf7ff; /* Arc core: the white-cyan centre of a lightning stroke. Pair with `glow` for the halo. */
  --brass: #c9bb85; /* Brass highlight on bevels and ornament (the hat-and-sun folder). `line` stays the rule colour. */
  --glow-rgb: 71 207 212; /* The `glow` colour as channels, so shadows can set their own alpha: rgb(var(--glow-rgb) / .3). */
  --glow-soft: 0 0 18px rgb(var(--glow-rgb) / 0.22); /* Faint halo for resting plates. */
  --glow-strong: 0 0 6px rgb(var(--glow-rgb) / 0.65), 0 0 26px rgb(var(--glow-rgb) / 0.38); /* Active or focused motif, the live trace. */
  --glow-lightning: 0 0 4px rgb(170 247 255 / 0.9), 0 0 16px rgb(var(--glow-rgb) / 0.65); /* Drop-shadow for a lightning arc. */
  --rim-gradient: conic-gradient(from 210deg, var(--steel-light), var(--steel) 18%, var(--steel-deep) 42%, var(--steel) 62%, var(--steel-light) 80%, var(--steel-deep) 94%, var(--steel-light)); /* Bevelled metal ring: bright upper-left, dark lower-right, like the emblem rim. */
  --plate-fill: linear-gradient(160deg, rgb(255 255 255 / 0.05), transparent 38%), var(--surface-raised); /* Chamfered plate body: faint glass sheen over `surface-raised`. */
  --plate-edge: rgb(var(--glow-rgb) / 0.55); /* The thin glowing edge of a plate. */
  --rain-ink: rgb(var(--glow-rgb) / 0.16); /* Binary and rune rain glyphs. Decorative, aria-hidden. */
  --rain-fade: var(--surface); /* Colour the rain fades into at the bottom. */
  --lift: 0 6px 24px rgba(0, 0, 0, 0.55); /* Menus, popovers and modals. */
}
[data-theme="light"] {
  --void: #b49b6e;
  --surface: #e8d6ab;
  --surface-raised: #f2e5c4;
  --teal-deep: #0b5a63;
  --on-teal-deep: #ffffff;
  --line: #7e6535;
  --line-subtle: #c4ad7c;
  --ink: #2a1d10;
  --ink-muted: #52402a;
  --rune: #0a6068;
  --mint: #0b6040;
  --gold: #6e4f0c;
  --violet: #55369f;
  --amber: #8f4313;
  --danger: #9c2018;
  --on-accent: #ffffff;
  --glow-rune: 0 2px 6px rgba(58, 28, 8, 0.35);
  --steel: #2c5f61;
  --steel-light: #2b6366;
  --steel-deep: #1f4a4d;
  --circuit: #1b6360;
  --glow: #08636d;
  --lightning: #0a5f6e;
  --brass: #665514;
  --glow-rgb: 8 99 109;
  --glow-soft: 0 1px 4px rgb(58 28 8 / 0.22);
  --glow-strong: 0 2px 8px rgb(58 28 8 / 0.38);
  --glow-lightning: 0 1px 3px rgb(58 28 8 / 0.4);
  --rim-gradient: conic-gradient(from 210deg, #6f9fa0, var(--steel) 18%, var(--steel-deep) 42%, var(--steel) 62%, #6f9fa0 80%, var(--steel-deep) 94%, #6f9fa0);
  --plate-fill: linear-gradient(160deg, rgb(255 255 255 / 0.35), transparent 40%), var(--surface-raised);
  --plate-edge: rgb(var(--glow-rgb) / 0.7);
  --rain-ink: rgb(var(--glow-rgb) / 0.14);
  --rain-fade: var(--surface);
  --lift: 0 6px 20px rgba(58, 28, 8, 0.3);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --void: #b49b6e;
    --surface: #e8d6ab;
    --surface-raised: #f2e5c4;
    --teal-deep: #0b5a63;
    --on-teal-deep: #ffffff;
    --line: #7e6535;
    --line-subtle: #c4ad7c;
    --ink: #2a1d10;
    --ink-muted: #52402a;
    --rune: #0a6068;
    --mint: #0b6040;
    --gold: #6e4f0c;
    --violet: #55369f;
    --amber: #8f4313;
    --danger: #9c2018;
    --on-accent: #ffffff;
    --glow-rune: 0 2px 6px rgba(58, 28, 8, 0.35);
    --steel: #2c5f61;
    --steel-light: #2b6366;
    --steel-deep: #1f4a4d;
    --circuit: #1b6360;
    --glow: #08636d;
    --lightning: #0a5f6e;
    --brass: #665514;
    --glow-rgb: 8 99 109;
    --glow-soft: 0 1px 4px rgb(58 28 8 / 0.22);
    --glow-strong: 0 2px 8px rgb(58 28 8 / 0.38);
    --glow-lightning: 0 1px 3px rgb(58 28 8 / 0.4);
    --rim-gradient: conic-gradient(from 210deg, #6f9fa0, var(--steel) 18%, var(--steel-deep) 42%, var(--steel) 62%, #6f9fa0 80%, var(--steel-deep) 94%, #6f9fa0);
    --plate-fill: linear-gradient(160deg, rgb(255 255 255 / 0.35), transparent 40%), var(--surface-raised);
    --plate-edge: rgb(var(--glow-rgb) / 0.7);
    --rain-ink: rgb(var(--glow-rgb) / 0.14);
    --rain-fade: var(--surface);
    --lift: 0 6px 20px rgba(58, 28, 8, 0.3);
  }
}
:root {
  --space-1: 4px; /* Icon-to-text gaps, chip inner padding, the gap between a page's double frame lines. */
  --space-2: 8px; /* Tight gaps, button vertical padding. */
  --space-3: 12px; /* Gaps inside forms and rows. */
  --space-4: 16px; /* Default gap, button horizontal padding, page side gutter. */
  --space-6: 24px; /* Plate padding. */
  --space-8: 32px; /* Gap between sections, page margin inside the frame. */
  --space-12: 48px; /* Page top and bottom padding. */
  --space-16: 64px; /* Large title-page spacing. */
  --radius-sm: 3px; /* Plates, chips, inputs. Pages and frames stay nearly square, like a bound book. */
  --radius-md: 6px; /* Buttons and color blocks. */
  --radius-lg: 12px; /* Large media frames and modal sheets. */
  --radius-pill: 999px; /* Toggles and progress tracks only. */
  --font-display: "Cinzel", "Trajan Pro", Georgia, serif;
  --font-serif: "EB Garamond", Garamond, Georgia, serif;
  --font-sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", Consolas, "Courier New", monospace;
  --font-fell: "IM Fell English", "EB Garamond", Georgia, serif;
  --font-fell-sc: "IM Fell English SC", "IM Fell English", Georgia, serif;
  --font-rune: "Noto Sans Runic", "Segoe UI Historic", "Segoe UI Symbol", serif; /* Rune rings and rune bands only (Elder Futhark, U+16A0-16FF). Decorative, aria-hidden. Never for words people must read. */
  --text-display-xl: 600 52px/58px var(--font-display); /* Title page and cover titles, one per page. */
  --text-display-lg: 600 36px/42px var(--font-display); /* Chapter and page titles. */
  --text-heading: 600 24px/30px var(--font-display); /* Section headings. */
  --text-subheading: 600 17px/24px var(--font-display); /* Plate and card titles. */
  --text-prose: 400 18px/28px var(--font-serif); /* Long-form reading text when a neutral serif voice is wanted. The grimoire page reads in `body`; the vellum page reads in `tome-prose`. */
  --text-prose-italic: italic 400 18px/28px var(--font-serif); /* Epigraphs, marginalia, pull quotes. */
  --text-prose-sm: 400 16px/24px var(--font-serif); /* Captions and secondary reading text. */
  --text-tome-title: 400 40px/46px var(--font-fell-sc); /* Chapter titles in the Ancient vellum theme. */
  --text-tome-prose: 400 19px/29px var(--font-fell); /* Reading text in the Ancient vellum theme: worn old-style print. */
  --text-tome-italic: italic 400 19px/29px var(--font-fell); /* Epigraphs and marginal notes in the Ancient vellum theme. */
  --text-body: 400 15px/22px var(--font-sans); /* Default text inside controls, tables and tools. */
  --text-body-strong: 600 15px/22px var(--font-sans); /* Emphasis inside interface text and list item titles. */
  --text-body-sm: 400 13px/18px var(--font-sans); /* Helper text and notes in tools. */
  --text-label: 500 12px/16px var(--font-sans); /* Eyebrows and field labels. Set in uppercase. */
  --text-code: 400 13px/20px var(--font-mono); /* Code, part numbers, values, anything typed or measured. */
  --text-ref-id: 500 12px/16px var(--font-mono); /* Short reference ids such as FX-54 or AC-24, status chips. */
  --text-rune: 400 14px/1 var(--font-rune); /* Rune band glyphs; letter-spacing is set by `ac-runes`. */
  --rim-width: 6px; /* Default thickness of `ac-rim`. */
  --chamfer: 14px; /* Cut-corner size of `ac-plate`. */
  --trace-width: 2px; /* Circuit trace stroke. */
  --pad-size: 9px; /* Solder pad diameter at a trace end. */
  --ease-arc: cubic-bezier(0.2, 0.7, 0.2, 1); /* The one easing for motif motion. */
  --dur-pulse: 4s; /* Slow motif cycles (glow breathing, trace pulse). */
}
.display-xl {
  font-family: var(--font-display);
  font-size: 52px;
  line-height: 58px;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.display-lg {
  font-family: var(--font-display);
  font-size: 36px;
  line-height: 42px;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.heading {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 30px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.subheading {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.prose {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  letter-spacing: 0;
}
.prose-italic {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0;
}
.prose-sm {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
}
.tome-title {
  font-family: var(--font-fell-sc);
  font-size: 40px;
  line-height: 46px;
  font-weight: 400;
  letter-spacing: 0.04em;
}
.tome-prose {
  font-family: var(--font-fell);
  font-size: 19px;
  line-height: 29px;
  font-weight: 400;
  letter-spacing: 0;
}
.tome-italic {
  font-family: var(--font-fell);
  font-size: 19px;
  line-height: 29px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
  letter-spacing: 0;
}
.body-strong {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
  letter-spacing: 0;
}
.body-sm {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  letter-spacing: 0;
}
.label {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.1em;
}
.code {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
}
.ref-id {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0;
}