/*
* base.css — ShadowDark DM Companion
* Typography, color custom properties, resets, global elements.
*
* JSL-Blackletter (the wordmark) loads locally from /fonts/.
* Cinzel, Crimson Pro, and Share Tech Mono load via the Google Fonts CDN
* (see the in index.html). Their fallback stacks in the --font-* tokens
* keep the app fully functional offline (system serif/mono).
*
* Color token reference (from KDL 2026-06-27's osr_design_direction.md):
* --color-bg Dungeon Floor #0f0d0b
* --color-surface Stone Wall #1e1a16
* --color-border Mortar Line #2e2820
* --color-text White #ffffff
* --color-text-muted Dimmed White rgba(255,255,255,0.6)
* --color-accent Cornflower Blue #6495ED
* --color-danger Void Red #8b1a1a
*/
/* ============================================================
@font-face declarations
JSL-Blackletter is the custom wordmark font — not on Google Fonts,
so it stays local in /fonts/. Cinzel, Crimson Pro, and Share Tech Mono
are served from the Google Fonts CDN ( in index.html).
============================================================ */
@font-face {
font-family: 'JSL-Blackletter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/JSL-Blackletter.woff2') format('woff2');
}
/* ============================================================
Design tokens
============================================================ */
:root {
/* Color palette — do not use raw hex values in component styles */
--color-bg: #0f0d0b;
--color-surface: #1e1a16;
--color-surface-hover: #282320;
--color-border: #2e2820;
--color-text: #d8d7d7;
--color-text-muted: rgba(255, 255, 255, 0.6);
--color-accent: #6495ED;
--color-accent-hover: #7aa8f0;
/* Auto-contrast ink (KDL 2026-06-27 theme_contrast_custom_accent.md #1). The two ink
candidates and the live pick. --ink-on-accent is computed in JS (theme.js
paint()) per the active accent's WCAG luminance and set inline on , so
it always wins this cascade default. The default of var(--color-text) keeps
today's exact appearance if JS never runs (no-JS / storage failure). */
--ink-on-light: #0d0c0a; /* near-black ink for light/bright accent fills */
--ink-on-dark: #f5f4f2; /* near-white ink for dark/saturated accent fills */
--ink-on-accent: var(--color-text);
--color-danger: #8b1a1a;
--color-danger-bg: #3d0d0d;
--color-oracle-bg: #1c1912;
--color-heading: #d8d7d7; /* All heading font (JSL-Blackletter, Cinzel) — white */
--color-cornflower: #7aa8f0; /* Lighter Cornflower — a:visited (distinct from --color-accent which is now also cornflower) */
/* Actions panel — HP widget colors */
--color-damage: #b03030; /* Damage button fill — deep red, OSR blood */
--color-damage-hover: #c83838; /* Damage button hover */
--color-damage-bg: #3a1010; /* Damage button background tint on danger-style variant */
--color-heal: #3a7a3a; /* Heal button fill — muted forest green */
--color-heal-hover: #4a8e4a; /* Heal button hover */
--color-attack: #8a96a4; /* Attack button — steel/silver; distinct from damage red */
--color-cast: #a285c7; /* Cast button — arcane/violet; distinct from steel attack and red damage */
--color-rest: #5a8a6a; /* Rest button — sage green; restorative, calmer than heal forest */
--color-rest-hover: #6da082; /* Rest button hover */
--color-wizard-mishap: #d35a1a; /* Wizard mishap line — hellfire orange; wild/chaotic, distinct from red damage and violet cast */
--color-luck: #bfa01e; /* Luck token — old-coin gold; fortune motif. Tuned yellow-gold (hue ~48) to separate from item amber #d39a4a (hue ~36, orange-amber) and rest sage. KDL 2026-06-27. */
/* Typography stacks */
/* --font-heading: display headings h1–h4, module titles, stat block names */
--font-heading: 'JSL-Blackletter', 'UnifrakturMaguntia', serif;
/* --font-heading-ui: small structural chrome — buttons, nav labels, form labels, anything ≤14px where blackletter becomes unreadable */
--font-heading-ui: 'Cinzel', 'Palatino Linotype', serif;
--font-body: 'Crimson Pro', Georgia, 'Times New Roman', serif;
--font-mono: 'Share Tech Mono', 'Courier New', monospace;
/* Type scale — Major Third (1.25) starting at 17px base */
--text-base: 17px;
--text-sm: 0.8rem; /* ~14px — captions, small labels */
--text-h5: 1rem; /* ~17px — inline heading, label */
--text-h4: 1.25rem; /* ~21px — sub-section, group label */
--text-h3: 1.5rem; /* ~27px — card title, panel heading */
--text-h2: 2rem; /* ~33px — section heading */
--text-h1: 2.5rem; /* ~41px — app title, module name */
/* Line heights */
--lh-body: 1.65;
--lh-heading: 1.2;
--lh-mono: 1.4;
/* Letter spacing */
--ls-cinzel-caps: 0.04em; /* Cinzel uppercase labels only */
--ls-default: 0;
/* Spacing rhythm (8px base unit) */
--space-xs: 0.25rem; /* 4px */
--space-sm: 0.5rem; /* 8px */
--space-md: 1rem; /* 16px */
--space-lg: 1.5rem; /* 24px */
--space-xl: 2rem; /* 32px */
--space-2xl: 3rem; /* 48px */
/* SITE-WIDE content top spacing (2026-06-23, Ken). The content area's top
gap was the full --space-xl (32px), which left a large dead band under the
mode bar / breadcrumb on every page. --content-pad-top tightens ONLY the
top edge of #app-content to a sensible value; the sides/bottom keep
--space-xl. One token, reused app-wide — change it here to retune globally. */
--content-pad-top: var(--space-md); /* 16px */
/* Transitions — nothing above 300ms for UI (per KDL 2026-06-27's rule 7) */
--transition-fast: 120ms ease-out;
--transition-ui: 150ms ease-out;
--transition-reveal: 300ms ease-in-out;
/* Grain texture token — kept for any opt-in surface that references it, but the
global background haze it produced was removed per Ken (2026-06-10): he prefers
a clean flat dark ground, no fog/noise softening. Body no longer applies it. */
--grain: none;
}
/* ============================================================
Reset
============================================================ */
*,
*::before,
*::after {
box-sizing: border-box;
border-radius: 0; /* Hard rule from KDL 2026-06-27: no rounded corners, no exceptions */
margin: 0;
padding: 0;
}
html {
font-size: var(--text-base);
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
/* Flat dark ground — no grain/fog overlay (Ken prefers clean lines, 2026-06-10).
Theme system still drives the color via --color-bg per data-theme + custom accent. */
background-color: var(--color-bg);
color: var(--color-text);
font-family: var(--font-body);
font-size: 1rem;
line-height: var(--lh-body);
min-height: 100vh;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ============================================================
Typography — global heading and text elements
============================================================ */
h1 {
font-family: var(--font-heading);
font-size: var(--text-h1);
font-weight: 700;
line-height: var(--lh-heading);
color: var(--color-heading);
}
h2 {
font-family: var(--font-heading);
font-size: var(--text-h2);
font-weight: 600;
line-height: var(--lh-heading);
color: var(--color-heading);
}
h3 {
font-family: var(--font-heading);
font-size: var(--text-h3);
font-weight: 600;
line-height: var(--lh-heading);
color: var(--color-heading);
}
h4 {
font-family: var(--font-heading);
font-size: var(--text-h4);
font-weight: 600;
line-height: var(--lh-heading);
color: var(--color-heading);
}
/* h5 uses --font-heading-ui (Cinzel): small structural UI label */
h5 {
font-family: var(--font-heading-ui);
font-size: var(--text-h5);
font-weight: 400;
line-height: var(--lh-heading);
color: var(--color-heading);
letter-spacing: var(--ls-cinzel-caps);
}
p {
margin-bottom: 1em;
font-family: var(--font-body);
font-size: 1rem;
line-height: var(--lh-body);
}
p:last-child {
margin-bottom: 0;
}
em, i {
font-style: italic;
font-family: var(--font-body);
}
strong, b {
font-weight: 600;
}
small {
font-size: var(--text-sm);
color: var(--color-text-muted);
}
code,
pre {
font-family: var(--font-mono);
font-size: 0.9rem;
line-height: var(--lh-mono);
color: var(--color-text);
}
/* ============================================================
Global horizontal rule — double-rule manuscript divider (per KDL 2026-06-27)
============================================================ */
hr {
border: none;
border-top: 1px solid var(--color-border);
box-shadow: 0 2px 0 0 var(--color-border);
margin: var(--space-lg) 0;
height: 0;
}
/* ============================================================
Links
All links use Cornflower Blue — it is the sole interactive color signal.
============================================================ */
a {
color: var(--color-accent);
text-decoration: none;
transition: color var(--transition-fast);
}
a:visited {
/* Lighter cornflower (--color-cornflower) distinguishes visited from unvisited,
both now in the cornflower family */
color: var(--color-cornflower);
}
a:hover,
a:focus-visible {
color: var(--color-accent-hover);
}
/* ============================================================
Focus styles — keyboard navigation (WCAG AA)
Using outline rather than box-shadow so it works on all elements.
Cornflower Blue is the only accent color; no exceptions.
============================================================ */
:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
/* Remove default focus ring for mouse users (browser handles :focus-visible) */
:focus:not(:focus-visible) {
outline: none;
}
/* ============================================================
Selection
============================================================ */
::selection {
background-color: var(--color-accent);
/* Auto-contrast ink (KDL 2026-06-27 #1) — readable on light accents too; #d8d7d7 is the
no-JS fallback (today's near-white). */
color: var(--ink-on-accent, #d8d7d7);
}
/* ============================================================
Utility classes
============================================================ */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.text-muted {
color: var(--color-text-muted);
}
.text-accent {
color: var(--color-accent);
}
.text-danger {
color: var(--color-danger);
}
.font-heading {
font-family: var(--font-heading);
}
.font-heading-ui {
font-family: var(--font-heading-ui);
}
.font-mono {
font-family: var(--font-mono);
}
.caps {
text-transform: uppercase;
letter-spacing: var(--ls-cinzel-caps);
}