/* ========================================================================= UARO WoE — Dark-Fantasy Tokens Loads AFTER assets/custom.css. Overrides the --woe-* surface, text, border, accent, and guild tokens so existing rules adopt the dark-fantasy palette without touching the 3,000-line legacy file. Adds --df-*, --woe-font-display, --woe-font-body, --woe-emp-glow, --woe-bg-grid for new components. ========================================================================= */ /* ---------- Theme-independent additions ---------- */ :root { /* Dark-fantasy palette anchors (used by both light & dark for accent ornament) */ --df-blood: #B91C1C; --df-blood-deep: #6B0F0F; --df-ember: #DC8A38; --df-gold: #C9A961; --df-bone: #E8DCC4; --df-rune: #6E5436; --df-shadow: #00000099; /* New font roles. --woe-font-sans (Rubik) and --woe-font-mono (JetBrains) stay as legacy custom.css defines them. */ --woe-font-display: "Cinzel", "Trajan Pro", "Cormorant Garamond", Georgia, serif; --woe-font-body: "EB Garamond", "Garamond", Georgia, serif; /* WoE-specific decorative anchors */ --woe-emp-glow: var(--df-gold); /* ============================================================ Refined typography — role-named tokens. Body stays at 16px; chrome text bumps up one notch so eyebrows, table headers, badges, and pagination read comfortably without enlarging body prose. The display tier sits at body × ~1.618 (golden ratio) at the upper clamp() bound. ============================================================ */ /* ---- Type scale (role-named, sits ABOVE the legacy --woe-font-*) */ --woe-text-eyebrow: 0.78rem; /* 12.5px — uppercase mono eyebrows */ --woe-text-pill: 0.78rem; /* 12.5px — segmented chips, type/status badges */ --woe-text-meta: 0.875rem; /* 14px — server time, hero chip, pagination */ --woe-text-table-head: 0.82rem; /* 13px — table column headers */ --woe-text-card-label: 0.82rem; /* 13px — stat-card labels */ --woe-text-card-cap: 0.95rem; /* 15.2px — stat-card captions */ --woe-text-prose: 1rem; /* 16px — body prose, table cells */ --woe-text-prose-sub: 0.95rem; /* 15.2px — italic sub-prose */ --woe-text-display-sm: 1.1rem; /* 17.6px — Cinzel uppercase chrome */ --woe-text-display: clamp(1.65rem, 3.2vw, 2.4rem); /* page-head hero title */ --woe-text-display-lg: clamp(2rem, 4.6vw, 2.6rem); /* mega hero (~body × 1.618) */ /* ---- Letter-spacing vocabulary (semantic, role-named) ---- */ --woe-track-numeral: -0.01em; /* JetBrains Mono numerals, dense data */ --woe-track-prose: 0.005em; /* serif body — tiny opening for screen */ --woe-track-label: 0.10em; /* subtle uppercase label */ --woe-track-display: 0.14em; /* Cinzel headings */ --woe-track-display-mega: 0.16em; /* hero title, brand */ --woe-track-pill: 0.16em; /* segmented chips, badges */ --woe-track-eyebrow: 0.18em; /* mono uppercase eyebrow */ /* ---- Line-height vocabulary (role-named alongside legacy --woe-line-*) */ --woe-leading-display: 1.15; /* hero titles, single-line display */ --woe-leading-title: 1.3; /* section titles */ --woe-leading-prose: 1.6; /* body prose at 16px serif */ --woe-leading-ui: 1.5; /* table cells, form controls */ --woe-leading-caption: 1.45; /* card captions, secondary copy */ } /* ------------------------------------------------------------------------- LIGHT THEME — parchment & rune ------------------------------------------------------------------------- */ :root, [data-bs-theme="light"] { /* Surfaces — cream parchment, never pure white */ --woe-surface-base: #F2EAD9; --woe-surface: #E5DBC4; --woe-surface-elevated: #EFE5D0; --woe-surface-overlay: #F8F1DF; --woe-surface-sunken: #DCD0B5; /* Borders — rune brown */ --woe-border: #C4B594; --woe-border-strong: #8C7553; /* Text — dark obsidian on parchment */ --woe-text-primary: #2A1F1E; --woe-text-secondary: #6E5436; /* = --df-rune */ --woe-text-muted: #927A57; --woe-text-inverse: #F2EAD9; /* Brand accent — gold replaces site-blue */ --woe-accent: #8C6D2A; /* darker gold for AA on cream */ --woe-accent-hover: #6B521E; --woe-accent-muted: rgba(201, 169, 97, 0.18); /* Event accent — blood (was ember). Used for WoE flash, alerts, danger. */ --woe-accent-event: #6B0F0F; /* = --df-blood-deep, AA on cream */ --woe-accent-event-hover: #B91C1C; --woe-accent-event-muted: rgba(185, 28, 28, 0.10); /* Theme-aware text accent — light value flips to blood-deep so anything painting accent TEXT (eyebrows, podium, CTA, badges) stays AA on cream. */ --woe-text-accent: var(--df-blood-deep); /* Focus-indicator tint — used by border-color / box-shadow on :focus rings so keyboard-focus indicators clear WCAG 2.4.7 (≥3:1) in light mode where gold would otherwise wash out on cream parchment. */ --woe-focus-tint: var(--df-blood-deep); /* Semantic — recolored to dark-fantasy palette but keep contrast */ --woe-success: #2D6B3F; --woe-success-muted: rgba(45, 107, 63, 0.12); --woe-danger: #B91C1C; --woe-danger-muted: rgba(185, 28, 28, 0.10); --woe-warning: #8C6D2A; --woe-warning-muted: rgba(140, 109, 42, 0.14); --woe-info: #4A6877; --woe-info-muted: rgba(74, 104, 119, 0.12); /* Stat-specific data-viz — keep semantic meanings, pull palette inward */ --woe-stat-kills: #2D6B3F; --woe-stat-deaths: #B91C1C; --woe-stat-damage-dealt: #8C4A14; --woe-stat-damage-received: #6B3D5F; --woe-stat-heal: #4A6877; --woe-stat-emp-break: #8C6D2A; --woe-stat-castle-hold: #4F4438; /* Guild categorical — jewel-tone retint */ --woe-guild-1: #B91C1C; /* crimson */ --woe-guild-2: #4A6877; /* slate teal */ --woe-guild-3: #2D6B3F; /* forest */ --woe-guild-4: #8C6D2A; /* burnt gold */ --woe-guild-5: #6B3D5F; /* plum */ --woe-guild-6: #2F5260; /* deep teal */ --woe-guild-7: #8B6F47; /* bronze */ --woe-guild-8: #4D3F66; /* indigo */ --woe-row-hover: rgba(110, 84, 54, 0.06); --woe-row-hover-strong: rgba(110, 84, 54, 0.10); --woe-bg-grid: rgba(110, 84, 54, 0.06); --woe-shadow-sm: 0 1px 1px rgba(42, 31, 30, 0.06), 0 1px 2px rgba(42, 31, 30, 0.04); --woe-shadow-md: 0 2px 4px rgba(42, 31, 30, 0.06), 0 6px 14px rgba(42, 31, 30, 0.08); --woe-shadow-lg: 0 8px 18px rgba(42, 31, 30, 0.10), 0 18px 36px rgba(42, 31, 30, 0.10); /* Bootstrap subtle / emphasis pairs — prevent yellow leaks on cream */ --bs-warning-bg-subtle: #EAD9B3; --bs-warning-text-emphasis: #6B521E; --bs-success-bg-subtle: #D6E2D2; --bs-success-text-emphasis: #2D6B3F; --bs-info-bg-subtle: #D5DEE3; --bs-info-text-emphasis: #4A6877; --bs-danger-bg-subtle: #ECCFCF; --bs-danger-text-emphasis: #6B0F0F; --bs-secondary-bg-subtle: #DCD0B5; --bs-secondary-bg: #C4B594; --bs-light-bg-subtle: #EFE5D0; --bs-emphasis-color: var(--df-blood-deep); } /* ------------------------------------------------------------------------- DARK THEME — obsidian, blood, gold, bone (default experience) ------------------------------------------------------------------------- */ [data-bs-theme="dark"] { /* Surfaces — obsidian stack */ --woe-surface-base: #0A0708; --woe-surface: #14100F; --woe-surface-elevated: #1A1413; --woe-surface-overlay: #221917; --woe-surface-sunken: #060404; /* Borders — warm dark, lifted enough to read against #14100F */ --woe-border: #2A1F1E; --woe-border-strong: #3D2C2A; /* Text — bone primary, rune-dim secondary */ --woe-text-primary: #E8DCC4; --woe-text-secondary: #8A7864; --woe-text-muted: #5C4F40; --woe-text-inverse: #0A0708; /* Brand accent — gold (replaces site-blue). Hover: warm bone. */ --woe-accent: #C9A961; --woe-accent-hover: #E8DCC4; --woe-accent-muted: rgba(201, 169, 97, 0.16); /* Event accent — blood (replaces ember). Used for WoE flash, alerts. */ --woe-accent-event: #DC2626; --woe-accent-event-hover: #EF4444; --woe-accent-event-muted: rgba(220, 38, 38, 0.18); /* Theme-aware text accent — dark mode resolves to gold; the light block's value (blood-deep) takes over when [data-bs-theme="light"] is set. */ --woe-text-accent: var(--df-gold); /* Focus-indicator tint — gold rings clear AA on obsidian; flips to blood-deep in the light block so keyboard focus stays visible on cream. */ --woe-focus-tint: var(--df-gold); /* Semantic — dark-fantasy recolor, keep WCAG AA */ --woe-success: #84BD8E; --woe-success-muted: rgba(132, 189, 142, 0.16); --woe-danger: #F08080; --woe-danger-muted: rgba(240, 128, 128, 0.18); --woe-warning: #DCBE76; --woe-warning-muted: rgba(220, 190, 118, 0.18); --woe-info: #94B0C4; --woe-info-muted: rgba(148, 176, 196, 0.18); /* Stat-specific data-viz */ --woe-stat-kills: #84BD8E; --woe-stat-deaths: #F08080; --woe-stat-damage-dealt: var(--df-ember); --woe-stat-damage-received: #B388C5; --woe-stat-heal: #94B0C4; --woe-stat-emp-break: var(--df-gold); --woe-stat-castle-hold: #A89A82; /* Guild categorical — jewel-tone retint, slot 1 = crimson per kit */ --woe-guild-1: #B91C1C; --woe-guild-2: #6B7AA1; --woe-guild-3: #4F7351; --woe-guild-4: #B58432; --woe-guild-5: #6B3D5F; --woe-guild-6: #4A6877; --woe-guild-7: #8B6F47; --woe-guild-8: #5C4A6E; --woe-row-hover: rgba(201, 169, 97, 0.04); --woe-row-hover-strong: rgba(201, 169, 97, 0.08); --woe-bg-grid: rgba(201, 169, 97, 0.04); /* Shadows — soft black, never lifted high (atmospheric, not bouncy) */ --woe-shadow-sm: none; --woe-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.5); --woe-shadow-lg: 0 18px 56px rgba(0, 0, 0, 0.7); /* Bootstrap subtle / emphasis pairs */ --bs-warning-bg-subtle: #3A2A18; --bs-warning-text-emphasis: var(--df-ember); --bs-success-bg-subtle: #1A2A1F; --bs-success-text-emphasis: #84BD8E; --bs-info-bg-subtle: #1A2330; --bs-info-text-emphasis: #94B0C4; --bs-danger-bg-subtle: #2A1414; --bs-danger-text-emphasis: #F08080; --bs-secondary-bg-subtle: #1F1817; --bs-secondary-bg: #2A1F1E; --bs-light-bg-subtle: #1F1817; --bs-emphasis-color: var(--df-gold); }