gp-dimm-city 1.0.0

package/styles/dc-component-defaults.css

@@ -0,0 +1,214 @@
+@layer dc.tokens {
+
+:root {  /* ── Section Component Public Tokens ────────────────────────────────────
+     Default theming for .section / @section macros. Chapter-scoped overrides
+     live in the book's own sheet (`@layer book`) and win via the parent-context cascade —
+     typically by applying a .dc-accent-X utility on @chapter / @section
+     (see components/*.css "ACCENT IDENTITY UTILITIES" section). */
+  --dc-section-bg:     var(--paper-cream);
+  --dc-section-accent: var(--brand-magenta);  /* brand signal at every section header (was --blood) */
+
+  /* ─── Component Public Token Defaults ────────────────────────────────────
+     Override surface for per-chapter and per-project theming. These are the
+     defaults that were previously declared inside each component class rule.
+     Moving them to :root makes them visible to the theming system and lets
+     the book's own sheet (`@layer book`) override them at chapter-id scope instead of having to
+     write a full component selector chain.
+     Set them here; override at chapter id scope in the book's own sheet (`@layer book`).
+     ──────────────────────────────────────────────────────────────────────── */
+
+  /* .dc-alert public API */
+  --dc-alert-bg:             var(--hud-blue-dim);   /* surface-callout alias — player-facing note panel */
+  --dc-alert-border:         var(--hud-blue-dark);  /* border-callout-dm alias — left rail */
+  --dc-alert-fg:             var(--ink);
+  --dc-alert-label-color:    var(--ink-dark);       /* ink-dark on hud-blue-dim = 7.05:1 AA pass */
+  --dc-alert-body-size:      var(--fs-body-sm);
+  --dc-alert-border-width:   4px;
+  --dc-alert-label-size:     8pt;
+  --dc-alert-label-weight:   700;
+  --dc-alert-label-spacing:  0.12em;
+  --dc-alert-label-margin:   8pt;
+  --dc-alert-margin-top:     0;
+
+  /* .dc-skill-card public API */
+  --dc-card-accent:          var(--ink);            /* default no-specialty: plain ink */
+  --dc-card-surface:         var(--paper-cream);
+  --dc-card-tab-bg:          var(--ink-dark);       /* overridden by .dc-specialty.<name> context */
+  --dc-card-tab-title-color: var(--paper-cream);
+  --dc-card-body-mark:       var(--crimson);
+
+  /* .dc-specialty-intro public API */
+  --dc-specialty-intro-title-bg:    var(--hud-magenta);  /* overridden by .dc-specialty.<name> context */
+  --dc-specialty-intro-title-color: var(--bg);
+  --dc-specialty-intro-bg:          var(--hud-panel);
+
+  /* .dc-path-shell public API */
+  --dc-path-title-bg:    var(--hud-magenta);  /* overridden by .dc-specialty.<name> .dc-path-shell context */
+  --dc-path-title-color: var(--paper-cream);
+  --dc-path-accent:      var(--hud-magenta);
+
+  /* .dc-specialty-card public API */
+  --dc-specialty-card-bg:          var(--paper-cream);
+  --dc-specialty-card-border:      var(--hud-blue);
+  --dc-specialty-card-accent:      var(--crimson);
+  --dc-specialty-card-fg:          var(--ink);
+  --dc-specialty-card-media-height: 0.85in;
+  --dc-specialty-card-media-width:  0.75in;
+  --dc-specialty-card-title-align: right;
+  --dc-specialty-card-band-height: 16pt;
+
+  /* .dc-block public API */
+  --dc-block-bg:       var(--paper-light);
+  --dc-block-fg:       var(--ink);
+  --dc-block-accent:   var(--hud-blue-dark);
+  --dc-block-title-bg: var(--hud-blue-dark);
+  --dc-block-title-fg: var(--paper-cream);
+
+  /* ─── Component Public Tokens Lifted From Inline Fallbacks ───────────────
+     Workstream B (2026-06-21): these tokens were consumed in components/*.css
+     ONLY via inline `var(--dc-X, fallback)` and were never declared on :root,
+     so they were invisible to the public override surface. Each default below
+     equals the component's existing inline fallback, so rendering is unchanged
+     — the inline fallbacks are now redundant (and harmless). Override any of
+     these at chapter-id / project scope the same way as the blocks above.
+     ──────────────────────────────────────────────────────────────────────── */
+
+  /* .dc-ap (action-point tag) public API */
+  --dc-arrow-color:          var(--blood);
+  --dc-ap-bg:                var(--hud-blue-dark);
+  --dc-ap-fg:                var(--paper-cream);
+  --dc-ap-border:            var(--ink-dark);
+
+  /* .dc-sidebar (floated inset box) public API */
+  --dc-sidebar-surface:      var(--paper-light);
+  --dc-sidebar-border:       var(--hud-blue);
+  --dc-sidebar-accent:       var(--orange);
+
+  /* .section.dc-fiction-excerpt public API */
+  --dc-fiction-bg:           transparent;
+  --dc-fiction-art-width:    3in;
+  --dc-fiction-art-shadow:   4px 4px 0 var(--hud-blue-dark);
+  --dc-fiction-art-outline:  3px solid var(--ink-dark);
+  --dc-fiction-line-height:  1.45;
+
+  /* .dc-chevron (chevron banner) public API */
+  --dc-chevron-bg:           var(--brand-magenta-deep);
+  --dc-chevron-color:        var(--paper-cream);
+  --dc-chevron-font-size:    var(--fs-h1);
+
+  /* .dc-classtag public API */
+  --dc-classtag-color:       var(--orange);
+
+  /* .dc-card-tab (skill-card tab) extra public API */
+  --dc-card-tab-shadow:      none;
+
+  /* cover meta public API */
+  --dc-cover-meta-border:    rgba(201, 214, 226, 0.35);
+
+  /* .dc-definition-block public API */
+  --dc-definition-block-accent:       var(--hud-blue-bright);
+  --dc-definition-block-accent-width: 4px;
+  --dc-definition-block-surface:      var(--surface-orange-tint);
+
+  /* distribution table (.dc-dist-*) public API */
+  --dc-dist-ap-color:        var(--ink);
+  --dc-dist-name-color:      var(--hud-blue);
+  --dc-dist-tag-border:      var(--hud-blue-dim);
+  --dc-dist-tag-surface:     var(--paper-light);
+
+  /* .dc-fiction public API */
+  --dc-fiction-art-float:    left;
+
+  /* .dc-flavor public API */
+  --dc-flavor-accent:        var(--orange);
+  --dc-flavor-accent-width:  3px;
+  --dc-flavor-color:         var(--ink-smoke);
+
+  /* gear entry public API */
+
+  /* .dc-intro public API */
+  --dc-intro-accent:         var(--orange);
+  --dc-intro-bg:             var(--paper-stain);
+
+  /* NPC stat block (.dc-npc-stat-*) public API */
+  --dc-npc-stat-label-color: var(--hud-blue-dark);
+  --dc-npc-stat-primary:     var(--hud-blue-dark);
+  --dc-npc-stat-rule:        var(--rust);
+  --dc-npc-stat-rule-width:  2pt;
+  --dc-npc-stat-secondary:   var(--ink-smoke);
+
+  /* outcomes table (.dc-outcomes / .dc-outcome-*) public API */
+  --dc-outcome-key-color:    var(--paper-cream);
+  --dc-outcome-name-color:   var(--paper-cream);
+  --dc-outcome-name-opacity: 0.85;
+  --dc-outcomes-border:      var(--ink);
+  --dc-outcomes-inner-border: var(--paper-aged);
+  --dc-outcomes-label-bg:    var(--ink-dark);
+  --dc-outcomes-label-color: var(--paper-cream);
+  --dc-outcomes-surface:     var(--paper-cream);
+  --dc-outcomes-divider:     var(--hud-blue-dim);
+
+  /* .dc-path-shell extra public API (shape geometry) */
+  --dc-path-shell-clip:           polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
+  --dc-path-shell-padding-bottom: 0;
+  --dc-path-shell-padding-top:    0;
+  --dc-path-title-shape:          polygon(0 0, 100% 0, 100% 100%, 25px 100%, 0 calc(100% - 15px));
+
+  /* portrait public API */
+  --dc-portrait-border:      var(--paper-aged);
+  --dc-portrait-surface:     var(--paper-cream);
+
+  /* .dc-pullquote public API */
+  --dc-pullquote-accent:      var(--hud-magenta);
+  --dc-pullquote-accent-soft: rgba(230, 0, 122, 0.15);
+  --dc-pullquote-bg:          var(--concrete-pale);
+
+  /* roll / die callout public API */
+  --dc-roll-lucid-color:     var(--hud-blue-dark);
+  --dc-roll-surreal-color:   var(--hud-magenta);
+  --dc-roll-the-die-border:  var(--hud-magenta);
+  --dc-roll-the-die-color:   var(--blood);
+
+  /* .dc-sidebar-box public API */
+  --dc-sidebar-box-accent:   var(--hud-blue-dark);
+  --dc-sidebar-box-border:   var(--border-hairline);
+  --dc-sidebar-box-rail:     4px;
+  --dc-sidebar-box-surface:  var(--paper-cream);
+
+  /* .dc-sidebar-callout public API */
+  --dc-sidebar-callout-accent: var(--hud-blue);
+  --dc-sidebar-callout-bg:     rgba(42, 106, 138, 0.08);
+
+  /* .dc-skill-card extra public API (shape geometry) */
+  --dc-skill-body-shape:     polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 44px) 100%, 0 100%);
+  --dc-skill-tab-shape:      polygon(0 0, calc(100% - 18px) 0, 100% 100%, 0 100%);
+
+  /* .dc-specialty-card extra public API (shadow + shape + title) */
+  --dc-specialty-card-shadow:      none;
+  --dc-specialty-card-shell-shape: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 18px), calc(100% - 24px) 100%, 0 100%);
+  --dc-specialty-card-title-color: var(--dc-specialty-card-accent);
+
+  /* .dc-specialty-intro extra public API (shape geometry) */
+  --dc-specialty-intro-clip:        polygon(0 0, 100% 0, 100% calc(100% - 32px), calc(100% - 56px) 100%, 0 100%);
+  --dc-specialty-intro-title-shape: polygon(0 0, 100% 0, 100% 100%, 22px 100%, 0 calc(100% - 14px));
+
+  /* .dc-spray public API */
+  --dc-spray-bg:             var(--hud-magenta);
+  --dc-spray-color:          var(--paper-cream);
+
+  /* .dc-tape public API */
+  --dc-tape-bg:              var(--paper-aged);
+  --dc-tape-border:          rgba(212, 18, 0, 0.60);
+  --dc-tape-color:           var(--ink-dust);
+
+  /* NOTE — the "Semantic Surface Roles" bridge layer that used to close this
+     file (--surface-callout / -dm / -vibe, --surface-well, --surface-panel,
+     --text-on-dark, --text-accent, --text-muted, --border-callout / -dm,
+     --border-accent, --elevation-card) was DELETED. It was proposed as a
+     layer components would consume, and then nothing ever did: twelve
+     aliases, zero `var()` call sites in any of the seven sheets. The
+     component public tokens above are the real override surface — a new
+     project retheming this library sets THOSE. */
+}
+
+}

package/styles/dc-core.css

@@ -0,0 +1,268 @@
+/* =============================================================================
+   DC-CORE.CSS — Global Element Baseline
+   =============================================================================
+
+   ── ARCHITECTURAL CONTRACT ────────────────────────────────────────────────
+   OWNS:
+   - body baseline styles (font, tracking, line-height, hyphens,
+     widows/orphans, positioning)
+   - Global element resets driven by tokens: h1–h6, p, a, em, code/kbd/samp,
+     pre, blockquote, ul/li, table/th/td, dl/dt/dd
+   - print-color-adjust
+
+   MUST NOT CONTAIN:
+   - :root token definitions (→ dc-component-defaults.css)
+   - .dc-* or .pmd-* component styles (→ components/*.css)
+   - columns:N rules (→ page-templates.css)
+   - @page declarations or named-page assignments (→ page-rules.css)
+   - Component-scoped font-size or line-height overrides — each component
+     owns its own typography via its own selector
+   - div.chapter scaffolding or guide-specific rules (→ the consuming book's own sheet)
+   - @media screen rules (print-only project)
+   - Anything Gutterpress's MARKER_CSS already ships. Core injects
+     `body { margin: 0 }`, `:where(img, svg, video) { max-width: 100% }`,
+     `:where(p > img:only-child, figure > img) { width: fit-content;
+     max-width: 100%; height: auto; vertical-align: bottom }` and
+     `:where(h1,h2,h3,h4,h5,h6) { break-after: avoid }` before this sheet
+     loads. Restating any of those here is duplication — and restating them
+     at element specificity ALSO outranks core's zero-specificity
+     `:where()` form, so a later core fix would silently not reach this book.
+
+   AGENT RULE: "Is this a body baseline or a naked element reset
+   (no class, no ID, no page context)?" — if NO, use another file.
+   ──────────────────────────────────────────────────────────────────────── */
+
+@layer dc.base {
+
+/* ── GLOBAL PRINT ACCURACY ────────────────────────────────────────────────── */
+* {
+  print-color-adjust: exact;
+}
+
+
+body {
+  font-family: var(--font-body);
+  font-size: var(--fs-body);
+  line-height: var(--lh-normal);
+  /* Body text tracking — subtle tightening reads as "industrial print"
+     vs the slack default. Not enough to harm readability; enough to
+     give the body register its own creaturepunk voice. */
+  letter-spacing: 0.005em;
+  text-wrap: pretty;
+  position: relative;
+  hyphens: auto;
+  /* Paged Media orphans/widows constraint: cascades to every .page box, so
+     no need to repeat at .page p level — that would be pure duplication. */
+  widows: 2;
+  orphans: 2;
+}
+
+/* ── HEADINGS ─────────────────────────────────────────────────────────────── */
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-display);
+  letter-spacing: var(--ls-display);
+  line-height: var(--lh-tight);
+  text-transform: uppercase;
+  text-wrap: balance;
+  margin-top: 0;
+  margin-bottom: 0.5em;
+  color: var(--ink-dark);
+}
+
+/* H1 — magenta neon authority: chapter openers, page-level titles.
+   overflow-wrap: the lixdu display face at 26pt overflows a narrow column
+   on one-word caps titles (CREATUREPUNK) and on long unbreakable strings
+   such as URLs or class names. */
+h1 {
+  font-size: var(--fs-h1);
+  font-weight: var(--fw-bold);
+  letter-spacing: 0.2em;
+  margin-bottom: 0.75em;
+  color: var(--hud-magenta);
+  border-bottom: 2px solid var(--hud-magenta);
+  padding-bottom: 0.15em;
+  overflow-wrap: break-word;
+}
+
+/* H2 — cold teal: major section breaks */
+h2 {
+  font-size: var(--fs-h2);
+  color: var(--hud-blue-dark);
+  letter-spacing: var(--ls-heading);
+  border-bottom: 2.5pt solid var(--hud-blue-dark);
+  padding-bottom: 0.1em;
+}
+
+/* H3 — deep teal: sub-sections (hud-blue-dark gives 6.4:1 on paper-cream vs hud-blue's 3.8:1) */
+h3 { font-size: var(--fs-h3); margin-top: 0.08in; color: var(--hud-blue-dark); letter-spacing: var(--ls-heading); }
+/* H4–H6 — grim dark ramp: body labels */
+h4 { font-size: var(--fs-h4); margin-top: 0.05in; color: var(--ink-dark);  letter-spacing: 0.06em; }
+h5 { font-size: var(--fs-h5); color: var(--ink-smoke); }
+h6 { font-size: var(--fs-h6); color: var(--ink-dust); }
+
+
+
+/* ── INLINE ELEMENTS ──────────────────────────────────────────────────────── */
+/* Baseline p color = --ink. Prose outside any styled container (a plain <p>
+   not inside @section / @callout / etc.) was inheriting nothing and reading
+   as cyan in some leaked contexts — measured 1.33:1 on the wall. Explicit
+   color: --ink at the base element makes loose paragraphs always legible.
+   Components with paper substrates may still override --ink-smoke or warmer
+   tones via their own selectors. */
+p   { margin-top: 0; margin-bottom: 0.08in; color: var(--ink); }
+em  { color: var(--ink-smoke); font-style: italic; }
+/* Links: --crimson #e1261c on paper-cream = 4.03:1 (fails AA normal text).
+   --blood #901a12 on paper-cream = 7.73:1 (passes AA + AAA). Per expert
+   debate consensus: crimson is reserved for FILLS / decorative rails; text
+   color on light backgrounds uses --blood. */
+a   { color: var(--blood); text-decoration: none; border-bottom: 1px dotted var(--blood); }
+
+code, kbd, samp {
+  font-family: var(--font-mono);
+  color: var(--ink);
+  font-size: 0.92em;
+  background: var(--paper-aged);
+  padding: 1pt 4pt;
+  border-radius: 2pt;
+  border: 1px solid var(--paper-aged);
+}
+
+/* Code blocks: wrap instead of spilling. An unwrapped long line inside a
+   card (measured: one 937px-wide code line in the Gutterdruid skill card)
+   escapes every ancestor box, and that overflow is the single largest
+   trigger of Chromium's whole-document shrink-to-fit (~27% on this book).
+   pre-wrap keeps every character readable; overflow-x: clip is the backstop
+   so any residual unbreakable run can never widen the document again. */
+pre {
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  overflow-x: clip;
+}
+pre code {
+  white-space: inherit;
+}
+
+blockquote {
+  font-family: var(--font-quote);
+  font-style: italic;
+  color: var(--ink);
+  border-left: 7px solid var(--hud-blue-dim);
+  border-right: 2px solid rgba(230, 0, 122, 0.18);
+  background: var(--paper-stain);
+  padding: var(--space-md) var(--space-md) var(--space-md) var(--space-xl);
+  margin: 0.75rem 0;
+  text-wrap: balance;
+}
+
+/* ── GLOBAL LIST STYLES (kept as-is per plan) ─────────────────────────────── */
+ul { padding-left: 0.25in; }
+ul li { list-style: none; margin-bottom: 0.06in; }
+ul li::before {
+  content: "» ";
+  /* --orange (#d4500a) on wall = 2.46:1 (fail). --rust (#b23a12) = 3.48:1
+     (measured — also fail). --blood (#901a12) = 5.21:1 on wall, passes
+     AA small text. Bullet markers appear in every list including those
+     outside paper substrates, so they MUST read on the wall background. */
+  color: var(--blood);
+  font-weight: 700;
+  padding-right: 0.1em;
+}
+
+/* ── TABLES — universal default look, no class required ─────────────────────
+   Per the design-guide constitution (no per-element class attributes), every
+   <table> in markdown gets the full DC data-table appearance by default:
+   striped rows, HUD-blue header bar, mono caps headers, sane cell padding.
+   Authors write a plain markdown table and it looks right — no decoration. */
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 9pt;
+  margin: 0.1in 0;
+  break-inside: avoid;
+}
+
+/* Row tinting: alternating paper-cream and paper-light reads cleaner
+   than paper-cream + paper-stain. The previous pair (cream + stain)
+   produced too much chroma shift between rows and read as "muddy" per
+   user feedback. paper-light is closer to cream so the zebra is subtle
+   without being invisible. */
+tr:nth-child(even) td { background: var(--paper-light); }
+tr:nth-child(odd)  td { background: var(--paper-cream); }
+
+th {
+  /* Was --hud-blue-dark — clashed with adjacent section accents in some
+     chapters (the Size Modifier heading uses rust/orange tones and the teal
+     table header fought it). ink-dark reads as a structural "this is a
+     header bar" rule that takes on no chroma identity of its own.
+     Deliberately NOT `var(--dc-table-header-bg, var(--ink-dark))`: that
+     hook was never declared at :root and no chapter ever set it, so it was
+     an override surface invisible to the override surface. A chapter that
+     genuinely needs its own header colour should declare the token in
+     dc-component-defaults.css alongside the other component public tokens first. */
+  background: var(--ink-dark);
+  color: var(--paper-cream);
+  font-family: var(--font-mono);
+  font-size: 8pt;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  padding: 6px 8px;
+  text-align: left;
+}
+
+/* Authors often use a table purely as a boxed option list, which markdown
+   still requires a header row for — the cells come through genuinely empty.
+   Left alone those render as a solid ink bar with no text sitting above the
+   list (chapter-01 size/age/origin/dream lists). Collapse empty header cells
+   so the bar disappears; cells with real text are unaffected. */
+th:empty {
+  background: none;
+  padding: 0;
+  border: 0;
+  line-height: 0;
+}
+
+td {
+  border-bottom: 1pt solid var(--border-hairline);
+  padding: 5px 8px;
+  vertical-align: top;
+}
+
+/* ── DEFINITION LISTS — standard markdown `Term` / `: definition` ─────────────
+   Gutterpress (markdown-it-deflist) parses the standard PHP-Markdown-Extra /
+   Pandoc definition-list syntax and emits plain <dl><dt><dd>. Styled here to
+   match the definition register (orange-tint substrate + HUD-blue rail) so a
+   plain-markdown definition list is a drop-in for the @definition macro and the
+   raw-HTML .dc-terms glossary — no class or wrapper required by the author. */
+dl {
+  background: var(--surface-orange-tint);
+  border-left: 4px solid var(--hud-blue-bright);
+  padding: var(--space-md);
+  margin: var(--space-md) 0;
+}
+dt {
+  font-weight: 700;
+  color: var(--hud-blue-dark);
+  margin-top: var(--space-sm);
+}
+dl dt:first-child { margin-top: 0; }
+dd {
+  margin: 0.02in 0 0 var(--space-md);
+  color: var(--ink);
+}
+
+
+/* ── Headings: never split a multi-line heading across a page ────────────────
+   Keeping a heading WITH the content that follows is core's job — MARKER_CSS
+   ships `:where(h1,h2,h3,h4,h5,h6) { break-after: avoid }`, and CSS
+   Fragmentation resolves a break opportunity as "avoid" if EITHER adjacent
+   box says so, which is why the long `h2 + p, h2 + ul, …` list of
+   `break-before: avoid` twins that used to live here was doing nothing the
+   heading's own break-after did not already do. What core does not cover is
+   a heading that wraps to two lines splitting across the page boundary. */
+h2,
+h3,
+h4 {
+  break-inside: avoid;
+}
+
+}

package/styles/dc-fonts.css

@@ -0,0 +1,107 @@
+/* =============================================================================
+   DC-FONTS.CSS — @font-face declarations and the cascade-layer order
+   =============================================================================
+
+   ── ARCHITECTURAL CONTRACT ────────────────────────────────────────────────
+   OWNS:
+   - The @layer order statement for the whole Dimm City stack (below)
+   - @font-face declarations (the font files live under ../fonts/<family>/,
+     each family beside its licence)
+
+   MUST NOT CONTAIN:
+   - Any style rule at all — body baseline and element resets live in
+     dc-core.css, which loads immediately after this sheet
+   - @page declarations or named-page assignments (→ page-rules.css)
+   - .page.* layout or column rules (→ page-templates.css)
+   - .dc-* component/utility styles (→ components/*.css / page-templates.css)
+   - Design tokens (→ dc-palette.css, dc-identity.css, dc-component-defaults.css)
+   - Anything a single book needs (→ that book's own sheet, `@layer book`)
+   - @media screen rules (print-only project)
+
+   AGENT RULE: "Is this a token or a font?" — if NO, use another file.
+
+   ──────────────────────────────────────────────────────────────────────── */
+
+/* Layer order for the whole DC stack, declared here because this is the
+   first sheet the cascade sees — so layer order stops depending on the
+   manifest's file order. `dc-fonts.css` itself is deliberately NOT wrapped
+   in a layer: @font-face inside a layer is legal but pointless (font-family
+   lookup is not a cascade contest). `dc-native.css`, the last sheet in this
+   package, is ALSO deliberately unlayered — not because it is special, but
+   because it is LAST, and anything that must beat unlayered author CSS
+   cannot be layered (see docs/css-architecture.md).
+
+   `book` is the layer for a consuming book's own sheets: declared last here,
+   it outranks every dc.* layer, so a book wins any cross-layer tie without
+   fighting specificity. A book that must beat dc-native.css lists an
+   UNLAYERED sheet after it in its manifest instead. Do not invent further
+   layers in a book — a layer this statement does not name sorts after
+   `book`, silently above your own overrides. */
+@layer dc.tokens, dc.base, dc.components, dc.templates, dc.pages, book;
+
+/* ── WEBFONTS (local) ─────────────────────────────────────────────────────── */
+@font-face {
+  font-family: 'Titillium Web';
+  src: url("../fonts/titillium-web/titillium-web-400.ttf") format('truetype');
+  font-weight: 400; font-style: normal; font-display: swap;
+}
+@font-face {
+  font-family: 'Titillium Web';
+  src: url("../fonts/titillium-web/titillium-web-400-italic.ttf") format('truetype');
+  font-weight: 400; font-style: italic; font-display: swap;
+}
+@font-face {
+  font-family: 'Titillium Web';
+  src: url("../fonts/titillium-web/titillium-web-600.ttf") format('truetype');
+  font-weight: 600; font-style: normal; font-display: swap;
+}
+@font-face {
+  font-family: 'Titillium Web';
+  src: url("../fonts/titillium-web/titillium-web-600-italic.ttf") format('truetype');
+  font-weight: 600; font-style: italic; font-display: swap;
+}
+@font-face {
+  font-family: 'Titillium Web';
+  src: url("../fonts/titillium-web/titillium-web-700.ttf") format('truetype');
+  font-weight: 700; font-style: normal; font-display: swap;
+}
+@font-face {
+  font-family: 'Titillium Web';
+  src: url("../fonts/titillium-web/titillium-web-700-italic.ttf") format('truetype');
+  font-weight: 700; font-style: italic; font-display: swap;
+}
+@font-face {
+  font-family: 'Tomorrow';
+  src: url("../fonts/tomorrow/tomorrow-400.ttf") format('truetype');
+  font-weight: 400; font-style: normal; font-display: swap;
+}
+@font-face {
+  font-family: 'Tomorrow';
+  src: url("../fonts/tomorrow/tomorrow-500.ttf") format('truetype');
+  font-weight: 500; font-style: normal; font-display: swap;
+}
+@font-face {
+  font-family: 'Tomorrow';
+  src: url("../fonts/tomorrow/tomorrow-700.ttf") format('truetype');
+  font-weight: 700; font-style: normal; font-display: swap;
+}
+@font-face {
+  font-family: 'Tomorrow';
+  src: url("../fonts/tomorrow/tomorrow-400-italic.ttf") format('truetype');
+  font-weight: 400; font-style: italic; font-display: swap;
+}
+@font-face {
+  font-family: 'Tomorrow';
+  src: url("../fonts/tomorrow/tomorrow-500-italic.ttf") format('truetype');
+  font-weight: 500; font-style: italic; font-display: swap;
+}
+@font-face {
+  font-family: 'Tomorrow';
+  src: url("../fonts/tomorrow/tomorrow-700-italic.ttf") format('truetype');
+  font-weight: 700; font-style: italic; font-display: swap;
+}
+@font-face {
+  font-family: 'lixdu';
+  src: url("../fonts/lixdu/lixdu.woff") format('woff');
+  font-weight: normal; font-style: normal; font-display: swap;
+}

package/styles/dc-identity.css

@@ -0,0 +1,66 @@
+@layer dc.tokens {
+
+:root {  /* ─── Dimm City Specialty Identity Tokens ────────────────────────────────
+     Project-specific: these map Dimm City class identities to palette values.
+     A different project using this component library would replace this entire
+     block with its own identity tokens, keeping the pillar palette above and
+     the component defaults below untouched.
+     ──────────────────────────────────────────────────────────────────────── */
+
+  /* ── Specialty Accent Colors ──────────────────────────────────────────── */
+  /* Scheme A: 4 brand-anchored (augmerc=magenta, wirephreak=cyan, technosorcerer=violet, etherlock=yellow),
+     1 fungi-pillar (gutterdruid=bioluminescent rot), 3 bespoke creaturepunk hues
+     (proxy=burnt orange, streetwarden=toxic-civic hazard green, cybersurgeon=chrome).
+     Streetwarden keeps #4db840 (high-vis civic hazard) — distinct from the quieter
+     fungi-mid lichen tone; gutterdruid is the alive-and-glowing spore. */
+  --augmerc-accent:        var(--brand-magenta);  /* cyber-augmentation = brand-signature magenta */
+  --proxy-accent:          var(--orange);          /* burnt-circuit orange */
+  --streetwarden-accent:   #4db840;                /* toxic civic green — hazard, not park bench — ~CMYK 58/0/65/28; TAC ~151% */
+  --gutterdruid-accent:    var(--fungi-glow);      /* bioluminescent spore — alley fungus at full flare */
+  --cybersurgeon-accent:   #a8b4b8;                /* cool blue-gray chrome (was flat silver) */
+  --wirephreak-accent:     var(--brand-cyan);      /* signal interference = brand neon-cyan */
+  --technosorcerer-accent: var(--brand-violet);    /* ritual + tech = brand cyber-violet */
+  --etherlock-accent:      var(--brand-yellow);    /* spirit channeling = brand radiant gold */
+  --dualist-accent:        var(--crystal-aqua);     /* refractive mineral split — two-path walker */
+  --generalist-accent:     var(--crystal-amethyst); /* deep mineral refraction — survivor's stone, opposite pole from dualist */
+
+  /* ── Specialty Dark Colors (path-shell + specialty-card backgrounds) ── */
+  --augmerc-dark:          #8a1a90;  /* deep magenta-violet (TAC ~157% — was #7a1080 at 175%) */
+  --augmerc-deep:          var(--augmerc-dark);  /* alias — chapter-opener accent */
+  --proxy-dark:            #3d1a00;  /* near-black scorch — ~CMYK 0/45/100/76; TAC ~221% — large fills only */
+  --cybersurgeon-dark:     #303840;  /* cold clinical near-black — ~CMYK 18/6/0/78; TAC ~102% — POD-safe */
+  --wirephreak-dark:       #003a40;  /* deep teal-black — drowned circuit — ~CMYK 100/11/0/75; TAC ~186% — large fills only */
+  --streetwarden-dark:     #1a3d10;  /* rot-soaked forest dark — ~CMYK 57/0/73/76; TAC ~206% — large fills only */
+  --technosorcerer-dark:   #200a38;  /* ink-bruise kin — deep ritual dark — ~CMYK 42/73/0/78; TAC ~193% — large fills only */
+  --gutterdruid-dark:      #2a3408;  /* swamp-rot dark — greenish, not brown — ~CMYK 19/0/85/80; TAC ~184% — large fills only */
+  --etherlock-dark:        #3d3000;  /* deep tarnished gold — ~CMYK 0/21/100/76; TAC ~197% — large fills only */
+  --dualist-dark:          #143a4a;  /* sapphire-trench — deep crystal-aqua dark — ~CMYK 73/21/0/71; TAC ~165% */
+  --generalist-dark:       #1e0e2e;  /* deep amethyst-black — opposite crystal pole from dualist — ~CMYK 36/69/0/82; TAC ~187% — large fills only */
+
+  /* ── Specialty Mid Colors (card-tab bg + card border — uniform contract)
+     Each mid sits perceptually midway between its specialty's accent and
+     dark, slightly shifted toward the dark hue. Used wherever a specialty
+     needs a chrome/structural tone that isn't accent-glare or dark-mass. */
+  --augmerc-mid:           #9a1896;  /* between brand-magenta and augmerc-dark */
+  --proxy-mid:             #7a3008;  /* burnt umber, between scorch-orange and dark */
+  --cybersurgeon-mid:      #606870;  /* cool steel mid (pre-existing token) */
+  --streetwarden-mid:      #347828;  /* civic green mid, not chartreuse */
+  --gutterdruid-mid:       #4d6020;  /* olive-swamp lichen */
+  --wirephreak-mid:        #006878;  /* drowned signal teal */
+  --technosorcerer-mid:    #4a1878;  /* ritual indigo midpoint */
+  --etherlock-mid:         #8a6a00;  /* tarnished antique gold */
+  --dualist-mid:           #2a6878;  /* drowned mineral aqua — between crystal-aqua and sapphire-trench */
+  --generalist-mid:        #503070;  /* mid amethyst — between crystal-amethyst and generalist-dark */
+
+  /* ── Skill Tier Badge Colors — creaturepunk-decoded ─────────────────────
+     Tier identity reframed: not trophy-show metals but salvaged/scarred ones.
+     Bronze = rust-on-steel, Gold = pirated brass, Silver = cyan-tinged chrome. */
+  --tier-bronze:  #8a5c28;  /* tier 1 — rust-on-steel salvage */
+  --tier-gold:    #b8921a;  /* tier 2 — pirated brass, tarnished */
+  --tier-silver:  #a8b4b8;  /* tier 3 — cyan-tinged chrome (was flat printer-gray) */
+
+  /* ─── End Dimm City Specialty Tokens ─────────────────────────────────────── */
+
+}
+
+}