/* =========================================================================== * design-tokens.css — Hedensia design-tokens (single source of truth) * * Loaded FIRST in (before style.css, dnd-statblock.css, etc.) so all * other stylesheets and inline styles can reference --hd-* variables. * * Token-groups: * 1. Surface (backgrounds) * 2. Text (AAA contrast on surface-2 #3a2418) * 3. Accent (semantic, AAA-lifted) * 4. Border * 5. Typography (font-families, size-scale, weights, leading) * 6. Spacing (4px-base scale) * 7. Radius * 8. Elevation (shadows) * 9. Z-index (stacking layers) * 10. Motion (timings + easings + reduced-motion override) * 11. Breakpoints (SSOT for media-queries — værdier ikke direkte i CSS) * 12. Parchment-exception (D&D statblock card-in-modal) * 13. Handout-tokens (letter-style long-form text) * 14. Semantic emphasis (D&D items/spells/conditions — replaces blind italic) * 15. Drop-cap tokens (handouts + narrative-blocks) * * WCAG AAA: all foreground/background pairings defined here pass 7:1 normal * text contrast (or 4.5:1 for ≥18pt/14pt-bold). Validated by * tests/wcag-contrast-gate.js (Phase 6). * * Compatibility: vanilla CSS custom properties (works on Safari 16.6 iPadOS * 16 — the display target). No container queries, no :has(). * --hd-* prefix mirrors the project's "hd" namespace. * Themes: light/dark via [data-theme="light"|"dark"] attribut på root. * Default (no attribute) = dark. Fase 5 wirer JS-controlleren + settings-toggle. * @layer-arkitektur: reset < tokens < base < components < utilities < overrides. * =========================================================================== */ /* === @layer-arkitektur === * Defineres her så design-tokens.css (loaded FØRST) etablerer kaskade-rækkefølgen * for hele appen. Alle downstream CSS-filer wrappes i deres respektive layer. * Cascade-prioritet (senere = højere): reset < tokens < base < components < utilities < overrides. */ @layer reset, tokens, base, components, utilities, overrides; /* === Self-hosted webfont: OpenDyslexic (SIL OFL 1.1) === * Dyslexia-friendly prose face, applied to readable regions while read-aloud * mode is on (see read-aloud.css). Declared at top level (outside @layer) so the * @font-face registration is unaffected by cascade layers. font-display:swap so * prose renders in the fallback until the (precached) woff2 is ready. * Files: public/fonts/opendyslexic/ — licence in OFL.txt. */ @font-face { font-family: 'OpenDyslexic'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/opendyslexic/opendyslexic-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'OpenDyslexic'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/opendyslexic/opendyslexic-latin-700-normal.woff2') format('woff2'); } @font-face { font-family: 'OpenDyslexic'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/opendyslexic/opendyslexic-latin-400-italic.woff2') format('woff2'); } @layer tokens { :root { /* === 1. Color: Surface (backgrounds) — DARK theme (default) === */ --hd-surface-base: #1a0f0a; /* mørkt læder */ --hd-surface-1: #2a1810; --hd-surface-2: #3a2418; --hd-surface-3: #4a3020; --hd-surface-overlay: rgba(26, 15, 10, 0.95); /* === §9 Paper-tier tokens — karakterark hierarchy color coding (dark defaults) === */ --hd-paper-tier-0: color-mix(in srgb, var(--hd-surface-3) 70%, transparent); /* darkest — group header */ --hd-paper-tier-1: color-mix(in srgb, var(--hd-surface-2) 70%, transparent); /* subgroup */ --hd-paper-tier-2: color-mix(in srgb, var(--hd-surface-1) 60%, transparent); /* element row */ /* === 2. Color: Text (AAA on surface-2 #3a2418 AND surface-3 #4a3020) === */ --hd-text-primary: #e8d7b0; /* pergament-cremefarvet — 10.22:1 on surf-2 */ --hd-text-secondary: #dec382; /* antik guld lifted — 8.46:1 on surf-2, 7.05:1 on surf-3 (AAA) */ --hd-text-tertiary: #d4b070; /* antik guld medium — 7.09:1 on surf-2 (AAA) */ --hd-text-disabled: #d4b070; /* AAA-readable muted/disabled text on surf-2 */ --hd-text-on-accent: #1a0f0a; --hd-text-on-scrim: #fdf1dc; /* fixed light text for black media/scrim controls */ --hd-text-on-emphasis: var(--hd-text-on-accent); /* === 3. Color: Accent === */ --hd-accent-primary: #dec382; /* antik guld lifted — 8.46:1 on surf-2 (AAA) */ --hd-accent-secondary: #ff9aaa; /* oxblod-tonet rose — AAA-readable on dark surfaces */ --hd-accent-success: #5dd47e; /* bevares — 7.74:1 on dark surf-2 (AAA) */ --hd-accent-warning: #ffd24a; /* 10.08:1 on dark surf-2 (AAA) */ --hd-accent-error: #ff9aaa; /* AAA-lifted rose — 7.23:1 on surf-2 */ --hd-accent-info: #c9a96a; --hd-accent-danger: var(--hd-accent-error); /* Karakterark skill-glyph: expertise ◆ sits on the theme-flipping player-portal * surface (--hd-surface-base + parchment texture), NOT on the light parchment * stone. Theme-aware lavender keeps it AAA on the near-black dark bg (8.5:1). * Distinct from --hd-ka-prof-expertise (#4a2c8a), which colours the ability-mod * on the theme-independent light parchment stone. */ --hd-ka-skill-expertise: #b9a3e8; /* dark — light lavender (8.5:1 on surface-base) */ /* === 4. Color: Border === */ --hd-border-subtle: rgba(201, 169, 106, 0.55); --hd-border-medium: rgba(201, 169, 106, 0.6); --hd-border-strong: rgba(201, 169, 106, 0.6); --hd-border-accent: var(--hd-accent-primary); --hd-border-error: var(--hd-accent-error); --hd-focus-ring: #dec382; /* antik guld lifted — 8.46:1 on surf-2, 7.05:1 on surf-3 (SC 1.4.11) */ /* === Semantic palettes — Fase 4 follow-up (compendium hex-zero) === */ /* Activity-types (vises som farvet text/icon på --hd-surface-2). All AAA on dark surface-2. * Hue-sorted L-alternation (HIGH≈95% / LOW≈75-79%) sikrer ΔE≥25 mellem hue-naboer incl. wraparound. * HIGH=pale/washed, LOW=vivid/saturated — men begge holder AAA ≥7:1 på surface-2 (#3a2418). */ --hd-activity-heal: #a3dbb3; /* 137° green L=75% — helbredelse (was #9fdab0 L=74%) */ --hd-activity-damage: #ffe9e5; /* 8° pale rose L=95% HIGH — skade (was #ffb3a8 L=83%) */ --hd-activity-attack: #ffeb8a; /* 50° gold L=77% LOW — angreb (was #ffd980 L=75%) */ --hd-activity-check: #95dcf3; /* 195° sky-blue S=80% L=77% — tjek (was #a3d4d8 S=40%) */ --hd-activity-save: #a7b2ec; /* 230° periwinkle S=65% L=79% — redning (was #b3c7e8 S=54%) */ --hd-activity-utility: #f6ecf9; /* 285° pale lavender L=95% HIGH — nytte (was #d4b8e8 L=82%) */ --hd-activity-cast: #e8a1d0; /* 320° warm pink L=77% LOW — magi (was #ecb0d4 L=81%) */ --hd-activity-forward: #f6f4ee; /* 40° pale cream S=31% L=95% HIGH — videregivelse (was #d8cdb5 L=78%) */ --hd-activity-order: #ffc194; /* 25° peach L=79% LOW — ordre (was #ffc09e L=81%) */ --hd-activity-summon: #ecf9f6; /* 168° pale mint L=95% HIGH — fremkaldelse (was #99dfd1 L=74%) */ --hd-activity-enchant: #f8fbea; /* 70° pale lime S=67% L=95% HIGH — fortryllelse (was #d8e88a L=73%) */ --hd-activity-hostile: var(--hd-activity-damage); --hd-activity-divine: var(--hd-activity-heal); /* ============================================================ * Plan D D9 — Concentration / condition warning marker * Used for §15 yellow-amber concentration badge on combatant tokens. * Dark: warm gold-amber (visible on --hd-surface-1/2 cremepergament). * Light: deep oxblood-gold (visible on light parchment). * Both AAA-contrast against --hd-surface-2 (verified via wcag-contrast-gate). * ============================================================ */ --hd-condition-warning: #ffcc44; /* 45° amber-gold L=63% — AAA on dark surface-2 #3a2418 */ /* Plan D D10 — §15 damage-modifier tokens (immune/resistant/vulnerable). * Used for CombatCompanion enemy-token corner badges + detail-card labels. * All AAA (≥7:1) on dark --hd-surface-2 (#3a2418). */ --hd-damage-immune: #66c99e; /* 158° muted teal-green — AAA on dark surface-2 */ --hd-damage-resistant: #aabde8; /* 222° muted slate-blue — AAA on dark surface-2 */ --hd-damage-vulnerable: #f09a90; /* 8° warm rose — AAA on dark surface-2 */ /* ============================================================ * Plan E E2 — §23 Quest entry-type marker colors (Færd-destination). * Used as chip-dot fills (8px filter-chips) and DM-border-left 3px on * timeline entries. All ≥7:1 AAA on --hd-surface-2 both themes (verified * via wcag-contrast-gate). Drop-cap on narrative entries uses existing * --hd-dropcap-color (already AAA on parchment in both themes). * Hue-sorted distinctive: rejse=blue, npc=yellow, lokation=green, * plot=purple, narrative=gold, private=muted-beige, dm=warm-rose, * note=teal, system=warm-gray. * Dark theme: lifted pastels L=75-85% (mirrors activity-palette pattern). * Light theme: deepened tones L=15-30% on light pergament-surface. * ============================================================ */ --hd-quest-rejse: #a8c8e8; /* 213° pale blue — 8.37:1 AAA on dark surface-2 */ --hd-quest-npc: #ecd380; /* 47° pale yellow — 9.82:1 AAA on dark surface-2 */ --hd-quest-lokation: #a8d8a8; /* 120° pale green — 9.03:1 AAA on dark surface-2 */ --hd-quest-plot: #d0a8e8; /* 285° pale lavender — 7.23:1 AAA on dark surface-2 */ --hd-quest-narrative: #dec38c; /* 42° antik guld — 8.50:1 AAA on dark surface-2 */ --hd-quest-private: #c5b8a8; /* 30° muted beige — 7.47:1 AAA on dark surface-2 */ --hd-quest-dm: #f0a8a0; /* 8° warm rose — 7.48:1 AAA on dark surface-2 */ --hd-quest-note: #90d4d0; /* 175° pale teal — AAA on dark surface-2 */ --hd-quest-system: #c0b8b0; /* 30° warm gray — AAA on dark surface-2 */ /* ============================================================ * Plan E E6 — §24 Hold activity-feed border-left colors (dark theme). * Used as 3px border-left on each variant + (group) color-mix bg tint. * All ≥7:1 AAA on --hd-surface-2 (verified via wcag-contrast-gate). * Hue-sorted distinctive: dice=violet, assist=green, group=gold, * combat=red, rest=blue. Pastel L=70-85% mirrors quest-palette pattern. * ============================================================ */ --hd-activity-dice: #d0a8e8; /* 285° pale lavender — 7.23:1 AAA on dark surface-2 */ --hd-activity-assist: #a8d8a8; /* 120° pale green — 9.03:1 AAA on dark surface-2 */ --hd-activity-group: #dec38c; /* 42° antik guld — 8.50:1 AAA on dark surface-2 */ --hd-activity-combat: #f0a8a0; /* 8° warm rose — 7.48:1 AAA on dark surface-2 */ --hd-activity-rest: #a8c8e8; /* 213° pale blue — 8.37:1 AAA on dark surface-2 */ /* Rarity-badges (bg+text pair, AAA internal contrast). D&D-konvention bevaret, fill mørkere + text lysere vs Material-default. */ --hd-rarity-uncommon-fill: #1b5e20; --hd-rarity-uncommon-text: #e6f8e8; /* AAA 7.10:1 — lifted from #a8e6b1 */ --hd-rarity-rare-fill: #0a3a82; --hd-rarity-rare-text: #b9d3f3; /* AAA 7.05:1 — lifted from #a8c8f0 */ --hd-rarity-very-rare-fill: #3a0e6e; --hd-rarity-very-rare-text: #d8b8f0; --hd-rarity-legendary-fill: #7a2800; --hd-rarity-legendary-text: #ffd9a8; /* AAA 7.39:1 — fill darkened from #a83800 */ --hd-rarity-artifact-fill: #820e10; --hd-rarity-artifact-text: #ffc8c8; /* AAA 7.10:1 — lifted from #ffb8b8 */ /* common: bruger eksisterende --hd-surface-2 fill + --hd-text-tertiary text (eksisterende AAA-pair, ingen ny token) */ /* Audio-kategorier (PR-B Group B — visualizer track-dots + filter-badges). * Brugt som marker/badge colors i audio-controller; text labels bruger normale text-tokens. */ --hd-audio-mood: #4a9eff; /* 213° blå-kølig — atmosfærisk stemning */ --hd-audio-base: #44bb44; /* 120° grøn-stabil — grundlæggende lag */ --hd-audio-intensity: #ff4444; /* 0° rød-action — intensitet/spænding */ --hd-audio-crowd: #ffaa00; /* 40° orange-varm — folkemængde/dialog */ --hd-audio-weather: #88ccff; /* 207° lys-blå — vejr/atmosfære */ --hd-audio-sfx: #cc88ff; /* 275° lilla-fx — punkt-effekter */ /* Dasham game-piece palette. Card ink is validated on both owner colors. */ --hd-dasham-owner-red: #7a200d; --hd-dasham-owner-red-soft: #8a2a12; --hd-dasham-owner-red-deep: #4d160b; --hd-dasham-owner-blue: #0b495f; --hd-dasham-owner-blue-soft: #245768; --hd-dasham-owner-blue-deep: #082f3d; --hd-dasham-card-ink: #fdf1dc; /* Status (toggle-states i compendium — semantisk identiske med activity-tokens, aliaser for navngivning) */ --hd-status-allowed: var(--hd-activity-heal); --hd-status-forbidden: var(--hd-activity-damage); --hd-status-lang-da: var(--hd-activity-check); --hd-status-lang-en: var(--hd-activity-attack); /* === 5. Typography === */ /* Font families — voice-akse (display / narrative / ui / mono) */ --hd-font-display: 'IM Fell English', 'Libre Baskerville', 'Georgia', 'Times New Roman', serif; --hd-font-body: 'Libre Baskerville', 'Georgia', serif; --hd-font-narrative: 'Libre Baskerville', 'Georgia', 'Times New Roman', serif; /* Fase 2 — long-form narrative voice (handout, lazy-dm in-character) */ --hd-font-parchment: 'IM Fell English', 'Libre Baskerville', 'Georgia', serif; /* Fase 6.2 — statblock-specific parchment-feel. Display-first parchment chain for D&D-card-rendering; narrative remains the long-form Libre/Baskerville chain. */ --hd-font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --hd-font-mono: 'Menlo', 'Consolas', monospace; --hd-font-fantasy: 'Cinzel', 'Palatino Linotype', 'Georgia', serif; /* Fase 2.3b — dasham game-feel (player-name, rule-badge, game-title) */ --hd-font-dyslexic: 'OpenDyslexic', 'Verdana', 'Tahoma', sans-serif; /* Read-aloud prose face (self-hosted); sans fallback covers any gap */ /* Fluid headings + display + statisk body/UI (Fase 2 bruger disse i base.css + utilities.css) */ --hd-text-display: clamp(2rem, 1.5rem + 3.75vw, 3.5rem); /* Fase 2 — over h1, til hero/page-titles */ --hd-text-h1: clamp(1.75rem, 1.25rem + 2.5vw, 2.75rem); --hd-text-h2: clamp(1.5rem, 1.10rem + 2.0vw, 2.25rem); --hd-text-h3: clamp(1.25rem, 0.95rem + 1.5vw, 1.75rem); --hd-text-h4: clamp(1.125rem, 0.95rem + 0.9vw, 1.375rem); --hd-text-h5: 1rem; --hd-text-h6: 0.875rem; --hd-text-body-large: 1.0625rem; --hd-text-body: 1rem; --hd-text-body-small: 0.875rem; --hd-text-md: var(--hd-text-body); --hd-text-ui: 0.875rem; --hd-text-ui-small: 0.75rem; --hd-text-caption: 0.75rem; --hd-text-micro: 0.5625rem; /* 9px — Fase 6.3 — badges, ikon-text, micro-meta. AAA-pair-status: kun brug på --hd-surface-1/2 med --hd-text-tertiary (8.46:1) */ /* Weight */ --hd-weight-regular: 400; --hd-weight-medium: 500; --hd-weight-semibold: 600; --hd-weight-bold: 700; --hd-weight-extrabold: 800; /* Line height */ --hd-leading-tight: 1.2; /* headlines */ --hd-leading-snug: 1.4; /* subheadings */ --hd-leading-normal: 1.55; /* body / .hd-voice--ui default */ --hd-leading-relaxed: 1.7; /* long-form (rules-helper, lazy-dm body) */ --hd-leading-display: 1.1; /* Fase 2 — .hd-voice--display tight headlines */ --hd-leading-icon: 1; /* Fase 7.1 — icon/glyph centering, not prose leading */ --hd-leading-narrative: 1.75; /* Fase 2 — .hd-voice--narrative long-form reading */ /* Tracking (letter-spacing) */ --hd-tracking-tight: -0.01em; /* Fase 2 — display headlines */ --hd-tracking-normal: 0; /* Fase 2 — body/UI default */ /* === 6. Spacing (4px base) === */ --hd-space-1: 0.25rem; /* 4px */ --hd-space-2: 0.5rem; /* 8px */ --hd-space-3: 0.75rem; /* 12px */ --hd-space-4: 1rem; /* 16px */ --hd-space-5: 1.5rem; /* 24px */ --hd-space-6: 2rem; /* 32px */ --hd-space-8: 3rem; /* 48px */ /* Player top-bar height — shared between .hd-player-top-bar (fixed) and * all destination-mounts (padding-top to clear the fixed top-bar). */ --player-top-bar-height: 48px; /* Item 1 — band reserved at the top of .hd-player-content-mount while a fixed * CTA pill is visible (44px pill + the mount's 2×12px strip-padding), so the * pill no longer overlaps each surface's first interactive row. Applied via the * body.hd-has-portal-cta / .hd-has-characterless-cta classes (player-content-zoom.css). */ --hd-portal-cta-band: calc(44px + 2 * var(--hd-space-3)); /* === 7. Radius === */ --hd-radius-sm: 4px; /* inputs, small buttons */ --hd-radius-md: 8px; /* cards, modal */ --hd-radius-lg: 12px; /* large modals, hero */ --hd-radius-full: 9999px; /* pills, badges */ /* === 8. Elevation === */ --hd-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --hd-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45); --hd-shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.6); --hd-shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--hd-border-medium); /* === 9. Z-index === */ --hd-z-sticky: 100; --hd-z-overlay: 2000; --hd-z-modal: 2100; --hd-z-popover: 2200; --hd-z-toast: 10121; /* === 10. Motion === */ --hd-motion-instant: 0ms; --hd-motion-fast: 120ms; --hd-motion-base: var(--hd-motion-normal); --hd-motion-normal: 200ms; --hd-motion-slow: 320ms; --hd-motion-slower: 480ms; /* Skriftrulle tab-skift: ark-sliden SKAL have samme varighed som reel-spinnet * (player-roller.js _reel) ellers snapper indholdet på plads (var 200ms) mens * rullen stadig drejer → effekten læses ikke. Disse er den kanoniske kilde: * både CSS-sliden (player-content-transition.css) og reel-spinnet læser dem. */ --hd-motion-roll-up: 480ms; /* ark ruller OP ved fane-åbning */ --hd-motion-roll-down: 430ms; /* ark ruller NED til Forside ved luk */ --hd-ease-page-turn: cubic-bezier(0.2, 0.7, 0.2, 1); --hd-ease-ui: var(--hd-ease-page-turn); --hd-ease-in-out: cubic-bezier(0.55, 0.06, 0.25, 1); --hd-ease-spring: cubic-bezier(0.34, 1.06, 0.64, 1); --hd-ease-linear: linear; /* Skriftrulle ark-slide + reel-spin deler denne ease-in-out: arket accelererer * blødt fra start og decelererer til et roligt stop lige før det er fremme. * Matcher easeInOut(t) i player-roller.js, så slide og reel følges ad hele vejen. */ --hd-ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1); /* ===== Portal-magi (spillerportal-animationer, 2026-05-31) ===== */ --hd-magic-orbit-dur: 17s; /* guldkant orbit (§4.1) */ --hd-magic-foil-dur: 17s; /* foil-drift (§4.2) */ --hd-magic-illum-dur: 8s; /* illumineret initial-glød (§4.3) */ --hd-magic-rune-dur-1: 40s; /* rune-ring ydre (§4.4) */ --hd-magic-rune-dur-2: 52s; /* rune-ring indre, reverse (§4.4) */ --hd-magic-skimmer-dur: 9s; /* guldblad-skimmer (§4.8) */ --hd-magic-rune-blue: #7cc1ff; /* kølig rune-blå (bruger-valgt) */ --hd-gold-deep: #6f5210; /* mørk guld (ramme/initial-gradient) */ --hd-gold-mid: #caa12f; /* mellem-guld */ --hd-ink: #2b2017; /* blæk (quill-streg) */ /* Bagudkompat-aliases — bevares som var-references så eksisterende callers virker. */ --hd-transition-fast: var(--hd-motion-fast) var(--hd-ease-page-turn); --hd-transition-normal: var(--hd-motion-normal) var(--hd-ease-page-turn); /* === 11. Breakpoints (Fase 3 — em-baserede for a11y; SSOT — CSS understøtter ikke var() i @media; værdier er dokumenteret her) * Mobile-first: alle @media queries bruger min-width. Container queries (@container) bruges på komponent-level * for genbrugbare komponenter (player-overlay, eventyrere-card, etc.) for at undgå viewport-coupling. * Se docs/plans/2026-05-13-luminous-spindle-fase-3.md §2-§3. */ --hd-bp-md: 40em; /* ≥640px — phone-landscape + small tablet */ --hd-bp-lg: 64em; /* ≥1024px — iPad-landscape + desktop */ --hd-bp-xl: 100em; /* ≥1600px — large desktop / TV opt-in */ /* === 12. Parchment-exception (D&D statblock card-in-modal) === */ --hd-parchment-bg: #FDF1DC; /* lys beige — D&D-look bevares */ --hd-parchment-text: #1a1a1a; /* 16.4:1 — body text */ --hd-parchment-accent: #7A200D; /* 7.6:1 — headers, dividers */ --hd-parchment-rule: #922610; /* divider lines */ --hd-parchment-meta: #5a3a1a; /* 8.1:1 — sekundære labels, italic flavor */ /* === 13. Narrative-tokens (long-form letter-style — surface + signature) * Fase 2.5a: .hd-handout absorberet i .hd-narrative (utilities.css). * Handout-tokens renamed til narrative-* for parallel naming. Surface * bevares som dedikeret token (selvom det = --hd-surface-2) for at * gøre fremtidig pergament-skift i light-tema (Fase 5) lokal. === */ --hd-narrative-bg: var(--hd-surface-2); --hd-narrative-signature-style: italic; /* === 14. Semantic emphasis (erstatter D&D italics for items/spells/conditions) === */ --hd-emphasis-item-color: var(--hd-accent-primary); /* magic items */ --hd-emphasis-spell-color: var(--hd-accent-primary); /* spell-navne */ --hd-emphasis-condition-color: var(--hd-accent-warning); /* condition-navne (forgiftet, bedøvet…) */ --hd-emphasis-weight: var(--hd-weight-medium); /* 500 — pop'er uden at virke "shouty" */ /* === 15. Drop-cap + narrative layout (Fase 2 — handout + lazy-dm narrative) * Drop-cap-color skifter pr. tema: gold (dark) / oxblod-rød (light). * Light-tema-override defineret i [data-theme="light"]-blokken nedenfor. === */ --hd-narrative-max-width: 65ch; /* komfortabel læselinje */ --hd-dropcap-size: 3.5em; --hd-dropcap-line-height: 0.9; --hd-dropcap-color: var(--hd-accent-warning); /* gold (dark) — light mirrors til oxblod */ --hd-dropcap-font-family: var(--hd-font-display); --hd-dropcap-padding-right: 0.5rem; --hd-dropcap-padding-top: 0.25rem; /* === Skriftrulle (spillerportal) — mørkt tema (Tydelig) === */ --hd-roller-core: #3a2418; --hd-roller-hi: #7a5636; --hd-roller-mid: #5a3a26; --hd-roller-dk: #2a1810; --hd-roller-end: #150c07; --hd-roller-crease-h: 18px; --hd-roller-crease-down: linear-gradient(180deg,rgba(6,3,1,0.96) 0%,rgba(6,3,1,0.6) 40%,rgba(6,3,1,0.22) 70%,rgba(6,3,1,0) 100%); --hd-roller-crease-up: linear-gradient(0deg,rgba(6,3,1,0.96) 0%,rgba(6,3,1,0.6) 40%,rgba(6,3,1,0.22) 70%,rgba(6,3,1,0) 100%); --hd-roller-line: rgba(0,0,0,0.5); /* mørk fals-streg */ --hd-roller-winwash: rgba(255,242,214,0.07); /* ende-vinduer lidt lysere */ --hd-roller-ovl: 60%; /* tuck-overlay rækkevidde */ --hd-roller-glint-base-w: 5%; /* basis ende-vindue (hjul) bredde; landscape kan lokalt cappe den aktive bredde */ --hd-roller-glint-w: var(--hd-roller-glint-base-w); /* aktiv hjulbredde — også reserveret som bar-padding så menu/labels ligger MELLEM hjulene */ /* === Real textures (player portal) === * Bitmap-teksturer fra public/img/textures/. Theme-invariant paths; * theme-vælger hvilke der bruges via klasser i player-*-destination.css. */ --hd-texture-bright-paper: url('../img/textures/bright-paper-5.jpg'); --hd-texture-seam-paper: url('../img/textures/seam-paper-13.jpg'); --hd-texture-leather: url('../img/textures/leather-seamless.png'); --hd-texture-dark-paper: url('../img/textures/dark-paper-9.jpg'); --hd-texture-gold-seam: url('../img/textures/gold-seam.jpg'); --hd-texture-wood: url('../img/textures/wood-seamless.png'); /* Body+mount-teksturer (per-tema). Anvendes på body via player-portal-bg.css og som --hd-parchment-surface på .hd-player-content-mount. Farvede læder-varianter bruges til spillerportalens filled action-knapper. */ --hd-texture-leather-light: url('../img/textures/leather-light.png'); --hd-texture-leather-dark: url('../img/textures/leather-dark.png'); --hd-texture-leather-red: url('../img/textures/leather-red.png'); --hd-texture-leather-green: url('../img/textures/leather-green.png'); --hd-texture-leather-blue: url('../img/textures/leather-blue.png'); --hd-texture-parchment-dark: url('../img/textures/parchment-dark.png'); --hd-texture-parchment-light: url('../img/textures/parchment-light.png'); /* === Roller wood-overlay (theme-keyed) === * Lægges over rullens midter-90% mellem glint-ende-vinduerne. * Dark default: overlay-blend bevarer cylinder-volumen i mørk gradient. */ --hd-roller-wood-opacity: 0.40; --hd-roller-wood-blend: overlay; /* pergament-backdrop på .hd-player-content-mount (det rul-op/ned-ark). Bruger real bitmap-teksturer (parchment-dark/-light fra OGA Simple Seamless Tiles of Dirt and Sand). 1024px tile = halv-native (2048×2048); balancerer variation mod synlige seams ved scroll. Override pr. tema nedenfor. */ --hd-parchment-surface: var(--hd-texture-parchment-dark); --hd-parchment-repeat: repeat; --hd-parchment-size: 1024px 1024px; /* paper base colors for parchment fiber fallback */ --hd-roller-paper: #241510; --hd-roller-paper2: #1f120c; /* === Edition-badge semantic tokens (dark theme) === */ --hd-success-100: #1d4d2d; /* dark green tint — badge background */ --hd-success-700: #a3d9a5; /* light green text — readable on dark tint */ --hd-warning-100: #4d3d12; /* dark amber tint — badge background */ --hd-warning-700: #f0d97a; /* light amber text — readable on dark tint */ } [data-theme="light"] { /* Surface — pergament */ --hd-surface-base: #fdf1dc; --hd-surface-1: #f5e5c8; --hd-surface-2: #ecd9b0; --hd-surface-3: #e0cb9c; --hd-surface-overlay: rgba(253, 241, 220, 0.95); /* === §9 Paper-tier tokens — karakterark hierarchy color coding (light overrides) === */ --hd-paper-tier-0: color-mix(in srgb, var(--hd-surface-3) 70%, transparent); /* darkest — group header */ --hd-paper-tier-1: color-mix(in srgb, var(--hd-surface-2) 70%, transparent); /* subgroup */ --hd-paper-tier-2: color-mix(in srgb, var(--hd-surface-1) 60%, transparent); /* element row */ /* Text */ --hd-text-primary: #1a1a1a; --hd-text-secondary: #3a2a1a; --hd-text-tertiary: #5a3a1a; --hd-text-disabled: #5a3a1a; --hd-text-on-accent: #fdf1dc; --hd-text-on-scrim: #fdf1dc; /* fixed light text for black media/scrim controls */ --hd-text-on-emphasis: var(--hd-text-on-accent); /* Accent */ --hd-accent-primary: #7a200d; /* oxblod — 7.41:1 on surf-2 light (AAA) */ --hd-accent-secondary: #7a200d; /* oxblod — AAA-readable on light surfaces */ --hd-accent-success: #0b4824; /* AAA-lifted forest green — 7.69:1 on surf-2 light */ --hd-accent-warning: #4a3600; /* AAA-lifted dark amber — 8.31:1 on surf-2 light */ --hd-accent-error: #7a200d; /* oxblod — 7.41:1 on surf-2 light (AAA) */ --hd-accent-info: #7a200d; --hd-accent-danger: var(--hd-accent-error); /* Karakterark skill-glyph expertise ◆ — dark violet on light parchment surface */ --hd-ka-skill-expertise: #4a2c8a; /* light — 9.3:1 on surface-base light */ /* Border */ --hd-border-subtle: rgba(122, 32, 13, 0.6); --hd-border-medium: rgba(122, 32, 13, 0.65); --hd-border-strong: rgba(122, 32, 13, 0.7); /* 0.7 alpha → 3.90:1 on surf-2 (SC 1.4.11) */ --hd-border-accent: var(--hd-accent-primary); --hd-border-error: var(--hd-accent-error); --hd-focus-ring: #7a200d; /* oxblod — 7.41:1 on surf-2 light (SC 1.4.11) */ /* Drop-cap mirror: oxblod-rød på pergament-baggrund (light-tema) */ --hd-dropcap-color: var(--hd-accent-primary); /* oxblod — 7.41:1 on surf-2 light (AAA) */ /* === Activity-palette (Fase 5 — mirror lightness + light-only cast remap) * * Strategi: bevar hue+chroma fra dark, invertér lightness så alle tokens * er mørke (L=12-33%) for AAA 7:1 på pergament-surf-2 (#ecd9b0). * * Cast undtagelse: hue remap 320° (dark) → 265° (light) for at give 99° hue- * distance til damage (6°) — løser 13° wraparound fra Fase 4 carry-over. * Dark-tema cast forbliver 320° (Fase 4 lock). * * ΔE-policy: light-tema threshold ≥15 (vs dark ≥25). Light's mandatory AAA * på lyst pergament komprimerer Lab L*-spread til ~13 enheder, hvilket gør * ΔE 25 umuligt uden at sacrifice perceptuel distinction (>5 tokens i * near-black). Approach C bevaret; ΔE-tuning er minor (forward+order+summon * mørkere) for at klare ≥15. Se design-system.md §Fase 5 light tuning. * === */ --hd-activity-heal: #164b2a; /* 137° dark green L=19% — helbredelse 7.29:1 AAA */ --hd-activity-damage: #7b251b; /* 8° dark rose L=30% — skade 7.12:1 AAA */ --hd-activity-attack: #5b3d07; /* 50° dark gold L=19% — angreb 7.15:1 AAA */ --hd-activity-check: #0b495f; /* 195° dark sky-blue L=21% — tjek 7.09:1 AAA */ --hd-activity-save: #2d3d8a; /* 230° dark periwinkle L=33% — redning 7.04:1 AAA */ --hd-activity-utility: #5a2d7a; /* 285° dark lavender L=33% — nytte 7.23:1 AAA */ --hd-activity-cast: #4a1a8c; /* 290° REMAP purple L=33% — magi 8.32:1 AAA */ --hd-activity-forward: #3d3210; /* 47° dark cream L=15% — videregivelse 9.10:1 AAA (ΔE-tuned) */ --hd-activity-order: #522810; /* 22° dark brun-rød L=19% — ordre 9.05:1 AAA (ΔE-tuned) */ --hd-activity-summon: #06372e; /* 168° dark mint L=12% — fremkaldelse 9.49:1 AAA (ΔE-tuned) */ --hd-activity-enchant: #35430a; /* 70° dark lime L=15% — fortryllelse 7.72:1 AAA */ --hd-activity-hostile: var(--hd-activity-damage); --hd-activity-divine: var(--hd-activity-heal); /* Plan D D9 — Condition warning (light theme mirror) */ --hd-condition-warning: #4a2500; /* 28° deep amber-brown L=14% — 9.72:1 on light surface-2 #ecd9b0 (AAA) */ /* Plan D D10 — §15 damage-modifier tokens (light theme). * Verified AAA (≥7:1) on light --hd-surface-2 (#f5ede0). */ --hd-damage-immune: #1a5a3a; /* 158° deep teal L=20% — 7.45:1 AAA on light surface-2 */ --hd-damage-resistant: #2d3d6a; /* 222° deep slate-blue L=22% — 7.62:1 AAA on light surface-2 */ --hd-damage-vulnerable: #6a1a14; /* 8° deep rose-red L=22% — 8.10:1 AAA on light surface-2 */ /* Plan E E2 — §23 Quest entry-type marker colors (light theme). * Verified AAA (≥7:1) on light --hd-surface-2 (#ecd9b0). */ --hd-quest-rejse: #1a3a6a; /* 213° deep blue L=22% — 8.14:1 AAA */ --hd-quest-npc: #5a3e00; /* 47° deep amber L=22% — 7.12:1 AAA */ --hd-quest-lokation: #0a4020; /* 120° deep forest L=19% — 8.56:1 AAA */ --hd-quest-plot: #4a1a78; /* 285° deep purple L=24% — 8.84:1 AAA */ --hd-quest-narrative: #3a2818; /* 42° deep bronze L=15% — 10.10:1 AAA */ --hd-quest-private: #4a3a2a; /* 30° deep umber L=22% — 7.83:1 AAA */ --hd-quest-dm: #6a1a14; /* 8° deep rose-red L=22% — 8.54:1 AAA */ --hd-quest-note: #0a4a44; /* 175° deep teal L=22% — AAA */ --hd-quest-system: #4a423a; /* 30° deep warm-gray L=22% — AAA */ /* Plan E E6 — §24 Hold activity-feed border-left colors (light theme). * Verified AAA (≥7:1) on light --hd-surface-2 (#ecd9b0). * Mirror-deepened from dark pastels per Fase 5 light-theme strategy. */ --hd-activity-dice: #4a1a78; /* 285° deep lavender L=24% — 8.84:1 AAA */ --hd-activity-assist: #0a4020; /* 120° deep forest L=19% — 8.56:1 AAA */ --hd-activity-group: #3a2818; /* 42° deep bronze L=15% — 10.10:1 AAA */ --hd-activity-combat: #6a1a14; /* 8° deep rose-red L=22% — 8.54:1 AAA */ --hd-activity-rest: #1a3a6a; /* 213° deep blue L=22% — 8.14:1 AAA */ /* === Rarity-palette (light — lys fill + mørk text på pergament) * D&D-konvention: rare=blå, legendary=orange, artifact=rød. * Light konstruktion: pale fill + dark text → AAA 7:1 på pair-fill. === */ --hd-rarity-uncommon-fill: #c8e6cf; --hd-rarity-uncommon-text: #0a3e1a; /* 9.13:1 AAA */ --hd-rarity-rare-fill: #c0d8f0; --hd-rarity-rare-text: #0a2660; /* 9.82:1 AAA */ --hd-rarity-very-rare-fill: #d8c0f0; --hd-rarity-very-rare-text: #2a0a5a; /* 9.86:1 AAA */ --hd-rarity-legendary-fill: #ffd9a8; --hd-rarity-legendary-text: #5a1e00; /* 9.71:1 AAA */ --hd-rarity-artifact-fill: #f0c8c8; --hd-rarity-artifact-text: #5a0a0c; /* 9.30:1 AAA */ /* Audio-kategorier (light-tema mirror-L pattern) */ --hd-audio-mood: #1d4ed8; /* 213° mørk-blå */ --hd-audio-base: #15803d; /* 120° skov-grøn */ --hd-audio-intensity: #b91c1c; /* 0° mørk-rød */ --hd-audio-crowd: #c2410c; /* 40° mørk-orange */ --hd-audio-weather: #2563eb; /* 207° medium-blå */ --hd-audio-sfx: #7c3aed; /* 275° mørk-violet */ /* Dasham keeps one game-piece palette across themes so card text contrast stays stable. */ --hd-dasham-owner-red: #7a200d; --hd-dasham-owner-red-soft: #8a2a12; --hd-dasham-owner-red-deep: #4d160b; --hd-dasham-owner-blue: #0b495f; --hd-dasham-owner-blue-soft: #245768; --hd-dasham-owner-blue-deep: #082f3d; --hd-dasham-card-ink: #fdf1dc; /* === Skriftrulle — lyst tema (Tydelig, mørkere inderkant før papiret) === */ --hd-roller-core: #d9bd86; --hd-roller-hi: #fff3da; --hd-roller-mid: #c9a96a; --hd-roller-dk: #94774a; --hd-roller-end: #5e4526; --hd-roller-crease-down: linear-gradient(180deg,rgba(26,15,6,0.84) 0%,rgba(26,15,6,0.5) 40%,rgba(26,15,6,0.18) 70%,rgba(26,15,6,0) 100%); --hd-roller-crease-up: linear-gradient(0deg,rgba(26,15,6,0.84) 0%,rgba(26,15,6,0.5) 40%,rgba(26,15,6,0.18) 70%,rgba(26,15,6,0) 100%); --hd-roller-line: rgba(74,46,20,0.42); --hd-roller-winwash: rgba(255,252,240,0.22); --hd-roller-paper: #ecd9b0; --hd-roller-paper2: #e3cda0; /* Lys tema bruger soft-light: undgår at lyse paper-toner blegner under overlay */ --hd-roller-wood-opacity: 0.42; --hd-roller-wood-blend: soft-light; /* Mount-pergament i lys tema: parchment-light (OGA seamless dirt-pack). */ --hd-parchment-surface: var(--hd-texture-parchment-light); /* === Edition-badge semantic tokens (light theme) === */ --hd-success-100: #d4edda; /* light green background — badge fill on parchment */ --hd-success-700: #155724; /* dark green text — AAA on light green fill */ --hd-warning-100: #fff3cd; /* light yellow background — badge fill on parchment */ --hd-warning-700: #856404; /* dark amber text — AAA on light yellow fill */ } /* Reduce motion preference — honored by all --hd-motion-* and --hd-transition-* tokens. * Activated by macOS System Preferences → Accessibility → Display → Reduce motion, * iOS Settings → Accessibility → Motion → Reduce Motion, or browser equivalent. */ @media (prefers-reduced-motion: reduce) { :root { --hd-motion-instant: 0ms; --hd-motion-fast: 0ms; --hd-motion-normal: 0ms; --hd-motion-slow: 0ms; --hd-motion-slower: 0ms; --hd-motion-roll-up: 0ms; --hd-motion-roll-down: 0ms; --hd-transition-fast: 0ms; --hd-transition-normal: 0ms; } } } /* end @layer tokens */