/* PDND · Illuminated rulebook · design tokens. Generated by build.py: edit there. Replaces the red tokens.css. Same names wherever an old name made sense, so existing var() uses keep resolving. RULES OF COLOUR gold (--text-accent / --ornament / --brand) = labels, headings, structure, and the ONE primary action per view red (--danger / --danger-fill) = damage, danger, disadvantage, destructive. Never decoration. green (--positive) = healing, advantage, success orange (--warning) = bloodied/caveats · steel blue (--info / --temp-hp) = temp HP, neutral info WCAG 2.x CONTRAST (AA: 4.5:1 text, 3:1 UI parts/large text). Computed by build.py: --text on --bg 15.10:1 pass (4.5:1) --text on --surface-raised 14.10:1 pass (4.5:1) --text on --surface-sunken 15.60:1 pass (4.5:1) --text on --surface-hover 13.10:1 pass (4.5:1) --text-muted on --bg 8.11:1 pass (4.5:1) --text-muted on --surface-raised 7.57:1 pass (4.5:1) --text-muted on --surface-sunken 8.38:1 pass (4.5:1) --text-muted on --surface-hover 7.04:1 pass (4.5:1) --text-faint on --bg 5.73:1 pass (4.5:1) --text-faint on --surface-raised 5.35:1 pass (4.5:1) --text-faint on --surface-sunken 5.92:1 pass (4.5:1) --text-faint on --surface-hover 4.97:1 pass (4.5:1) --text-accent on --bg 8.26:1 pass (4.5:1) --text-accent on --surface-raised 7.71:1 pass (4.5:1) --text-accent on --surface-sunken 8.53:1 pass (4.5:1) --text-accent on --surface-hover 7.16:1 pass (4.5:1) --positive on --bg 9.74:1 pass (4.5:1) --positive on --surface-raised 9.09:1 pass (4.5:1) --positive on --surface-sunken 10.06:1 pass (4.5:1) --positive on --surface-hover 8.45:1 pass (4.5:1) --warning on --bg 7.44:1 pass (4.5:1) --warning on --surface-raised 6.95:1 pass (4.5:1) --warning on --surface-sunken 7.69:1 pass (4.5:1) --warning on --surface-hover 6.45:1 pass (4.5:1) --info on --bg 9.21:1 pass (4.5:1) --info on --surface-raised 8.60:1 pass (4.5:1) --info on --surface-sunken 9.51:1 pass (4.5:1) --info on --surface-hover 7.99:1 pass (4.5:1) --danger on --bg 6.71:1 pass (4.5:1) --danger on --surface-raised 6.27:1 pass (4.5:1) --danger on --surface-sunken 6.93:1 pass (4.5:1) --danger on --surface-hover 5.82:1 pass (4.5:1) --hp-healthy on --bg 8.26:1 pass (4.5:1) --hp-healthy on --surface-raised 7.71:1 pass (4.5:1) --hp-healthy on --surface-sunken 8.53:1 pass (4.5:1) --hp-healthy on --surface-hover 7.16:1 pass (4.5:1) --hp-bloodied on --bg 7.44:1 pass (4.5:1) --hp-bloodied on --surface-raised 6.95:1 pass (4.5:1) --hp-bloodied on --surface-sunken 7.69:1 pass (4.5:1) --hp-bloodied on --surface-hover 6.45:1 pass (4.5:1) --hp-critical on --bg 6.30:1 pass (4.5:1) --hp-critical on --surface-raised 5.88:1 pass (4.5:1) --hp-critical on --surface-sunken 6.50:1 pass (4.5:1) --hp-critical on --surface-hover 5.46:1 pass (4.5:1) --hp-down on --bg 5.73:1 pass (4.5:1) --hp-down on --surface-raised 5.35:1 pass (4.5:1) --hp-down on --surface-sunken 5.92:1 pass (4.5:1) --hp-down on --surface-hover 4.97:1 pass (4.5:1) --text-on-brand on --brand 8.26:1 pass (4.5:1) --text-on-brand on --brand-hover 9.80:1 pass (4.5:1) --text-on-brand on --brand-pressed 6.54:1 pass (4.5:1) --text-on-danger on --danger-fill 5.19:1 pass (4.5:1) --text-on-danger on --danger-fill-pressed 6.93:1 pass (4.5:1) --text on --brand-soft 13.06:1 pass (4.5:1) --text-accent on --brand-soft 7.15:1 pass (4.5:1) --positive on --positive-bg 8.26:1 pass (4.5:1) --warning on --warning-bg 6.43:1 pass (4.5:1) --info on --info-bg 8.24:1 pass (4.5:1) --danger on --danger-bg 6.10:1 pass (4.5:1) --border-strong on --bg 4.40:1 pass (3:1 UI) --border-strong on --surface-raised 4.11:1 pass (3:1 UI) --border-strong on --surface-sunken 4.55:1 pass (3:1 UI) --brand on --bg 8.26:1 pass (3:1 UI) --danger-fill on --bg 3.36:1 pass (3:1 UI) --danger-fill on --surface-raised 3.14:1 pass (3:1 UI) --ornament on --bg 8.26:1 pass (3:1 UI) --text-accent on --danger-bg 7.51:1 pass (4.5:1) Below 3:1, used only for decoration (never the sole boundary of a control): --ornament-dim on --bg 2.98:1 decorative only --border on --bg 1.58:1 decorative only --border-subtle on --bg 1.25:1 decorative only MIGRATION A: the inline :root in Site/templates/sheet.html (old names -> use instead) --ink #f6ecec -> var(--text) --amber #ff5a5a -> var(--text-accent) (labels: now gold) --cream #14080b -> var(--surface) (app column) --card #241014 -> no card ground: drop the background; .card becomes an unboxed section (components.css) --band #3a1014 -> var(--surface-raised) --gold #ff4d4d -> var(--text-accent) (kicker, "real" gold at last) --rule #5a242c -> var(--border) (hairline) / var(--border-strong) (input or button outline) --green #ff5a5a -> var(--positive) (it was red; "good" now really reads as good) --red #ff6b6b -> var(--danger) --muted #d2b4b6 -> var(--text-muted) --soft #3a161c -> var(--surface-hover) --warn #4a1418 -> var(--danger-bg) --nav 62px -> var(--tabbar-h) (--nav kept as an alias) hard-coded: #e10600 (buttons, header rule, pips, toast) -> var(--brand) for primary actions, var(--danger-fill) ONLY for Damage/destructive, var(--ornament) for the header rule and pips; #0c0608/#0e0608 -> var(--bg); #1a0c0e -> var(--surface-sunken); #fff / #ff8a8a / #c9a0a3 text -> var(--text) / var(--danger) / var(--text-muted); "Segoe UI" + Georgia -> var(--font-body) / var(--font-display) MIGRATION B: the earlier red token set (pdnd-design/tokens.css): every name is kept, values change. Notable meaning shifts: --brand #e10600 -> #c9a556 gold fill, with --text-on-brand now DARK ink (#100e0b), not white --text-accent #ff5a5a -> #c9a556 gold --brand-soft #3a1014 -> #241d12 (selected ground) --hp-healthy green -> gold (positive green is reserved for healing/advantage) --warning #e8a33d -> #e8894a orange (separated from gold) --info #a493f0 -> #9fb4dc pale steel blue --radius-* 6/10/14/999 -> 0/2/2/2 (square; --radius-pill no longer makes pills) --font-display Georgia -> Cinzel; --font-body system sans -> Crimson Pro new: --danger-fill, --danger-fill-pressed, --text-on-danger, --ornament, --ornament-dim, --temp-hp, --font-num, --num-features, --fw-medium/semibold, --fs-num-lg, --ls-display, --gutter, --btn-h, --rule, --rule-strong, --focus-outline, --shadow-pop, --scrim, --icon-stroke, --tabbar-h, --app-max, --app-max-wide */ :root { color-scheme: dark; --bg: #100e0b; --surface: #100e0b; --surface-sunken: #0a0907; --surface-raised: #1a1612; --surface-hover: #221d17; --border-subtle: #2a241b; --border: #3d3427; --border-strong: #8c7647; --ornament: #c9a556; --ornament-dim: #6e5c34; --text: #ece3cf; --text-muted: #b3a78f; --text-faint: #968b75; --text-accent: #c9a556; --brand: #c9a556; --brand-hover: #d6b56b; --brand-pressed: #b39248; --brand-soft: #241d12; --text-on-brand: #100e0b; --positive: #93c49c; --positive-bg: #14231a; --warning: #e8894a; --warning-bg: #2c1a0f; --info: #9fb4dc; --info-bg: #151b27; --danger: #e57a68; --danger-bg: #2a1310; --danger-fill: #b9382c; --danger-fill-pressed: #9a2b22; --text-on-danger: #fbf3e2; --hp-healthy: #c9a556; --hp-bloodied: #e8894a; --hp-critical: #ef6a55; --hp-down: #968b75; --temp-hp: #9fb4dc; /* type: Cinzel is display only (names, section heads, labels, buttons); Crimson Pro does all reading and all numbers */ --font-display: "Cinzel", "Trajan Pro", Georgia, serif; --font-body: "Crimson Pro", "Iowan Old Style", Georgia, serif; --font-num: "Crimson Pro", Georgia, serif; /* numbers: lining + tabular (see --num-features) */ --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* debugging only; not used in the UI */ --num-features: "lnum" 1, "tnum" 1; /* font-feature-settings for columns of numbers */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fs-label: 12px; /* Cinzel caps labels, tracked; never smaller than 11px */ --fs-small: 16px; /* Crimson Pro runs small: 16px is its 14px */ --fs-body: 18px; --fs-body-lg: 20px; --fs-h3: 19px; /* Cinzel */ --fs-h2: 22px; /* Cinzel */ --fs-h1: 30px; /* Cinzel, character name */ --fs-num: 38px; /* stat line numerals */ --fs-num-lg: 30px; /* ability modifiers */ --fs-num-xl: 104px; /* current HP */ --lh-tight: 1.1; --lh-body: 1.42; --ls-label: .14em; /* Cinzel caps tracking */ --ls-display: .05em; /* space (4px base) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-8: 48px; --gutter: 24px; /* page side margin on phones (20px under 380px wide) */ --tap: 44px; /* minimum tap target */ --btn-h: 52px; /* standard button height */ /* shape: square. Kept as tokens so old var() uses still resolve. No pills. */ --radius-sm: 0; --radius-md: 2px; --radius-lg: 2px; --radius-pill: 2px; --rule: 1px; --rule-strong: 1.5px; /* focus: a gold ring with an ink gap, visible on every surface */ --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--text-accent); --focus-outline: 2px solid var(--text-accent); /* elevation: none on the page; the sheet/popover separate with a rule and a scrim */ --shadow-sheet: 0 -1px 0 var(--ornament-dim); --shadow-pop: 0 12px 28px rgba(0, 0, 0, .55); --scrim: rgba(5, 4, 3, .78); --icon: 20px; --icon-lg: 24px; --icon-stroke: 1.5; --tabbar-h: 62px; --nav: 62px; /* --nav kept for the old sheet.html calc() */ --app-max: 480px; --app-max-wide: 960px; }