/** * Hearthwrite sitewide UI theme packs * * Role split (not mono-tint): * Structure — bg / card / panel / muted text / subtle borders (near-black or warm void) * Primary — flame / cta / accent (CTA heat, selection, strong focus) * Secondary — gold (kickers, soft borders, labels) — related but distinct from primary * * Default ember lives on :root in HearthWriteDesignTokens.css. * Ivory editorial chrome (--hw-fe-*) defaults in HearthWriteFrontendTokens.css (Ember). * cinder/midnight/parchment remap both --hw-* and --hw-fe-* so nav, Arena, Profile, * Settings, Studio, and other ivory surfaces follow the same pack. * Genre chips stay on DesignTokens. Surfaces must use var(--hw-*) / var(--hw-fe-*) / * rgba(var(--hw-*-rgb), …). * * Pack map: * ember (default) — warm ivory hubs + clay ember (current product look) * cinder — deep brown void + cream + clay ember * midnight — black ink + steel blue * parchment — warm charcoal + brass */ /* Shared pack helpers — canvas + studio/home aliases */ html[data-hw-theme="cinder"], html[data-hw-theme="midnight"], html[data-hw-theme="parchment"] { --hw-ember-bg: var(--hw-canvas-bg); --hw-home-canvas-bg: var(--hw-canvas-bg); --hw-studio-canvas: var(--hw-canvas-bg); --hw-fe-canvas: var(--hw-canvas-bg); --hw-nav-text: var(--hw-text); --hw-nav-text-soft: var(--hw-text-soft); --hw-nav-muted: var(--hw-muted); --hw-nav-flame: var(--hw-flame); --hw-nav-flame-light: var(--hw-flame-light); --hw-nav-gold: var(--hw-gold); --hw-fe-color-scheme: dark; --global-palette1: var(--hw-flame); --global-palette-btn-bg: var(--global-palette1); --global-palette-highlight: var(--hw-gold); --global-palette-highlight-alt: var(--hw-text-soft); --global-palette-btn: var(--hw-text); --global-palette-btn-hover: var(--hw-text-strong); accent-color: var(--hw-flame); color-scheme: dark; } /* ------------------------------------------------------------------ Cinder — deep brown void + clay ember (pillar-era homage) Page voids stay in the brown family. Neutral charcoal (#0a0a0a, #12100e) read as grey-black against this pack. ------------------------------------------------------------------ */ html[data-hw-theme="cinder"] { /* Structure — deep brown voids, lighter brown panels */ --hw-bg: #1f140f; --hw-bg-soft: #2a1810; --hw-bg-deep: #160f0c; --hw-card: #2e1d15; --hw-card-2: #3c261b; --hw-elevated: #3c261b; --hw-panel: rgba(46, 29, 21, 0.9); --hw-panel-solid: #2e1d15; --hw-panel-soft: rgba(60, 38, 27, 0.86); --hw-panel-light: rgba(255, 244, 232, 0.04); --hw-card-rgb: 46, 29, 21; --hw-card-2-rgb: 60, 38, 27; --hw-bg-deep-rgb: 22, 15, 12; --hw-stage-floor: #2a1810; --hw-cinder: #5c4a32; /* Text — cream on dark */ --hw-text: #fff4e8; --hw-text-strong: #fff8ef; --hw-text-soft: #ead6c2; --hw-text-muted: #b89c84; --hw-muted: #b89c84; --hw-muted-2: #8f735c; --hw-text-rgb: 255, 244, 232; /* Primary — clay ember (same family as ivory Ember accents) */ --hw-cta: #b85c3a; --hw-flame: #b85c3a; --hw-flame-light: #c9724f; --hw-flame-deep: #8f4027; --hw-accent: #b85c3a; --hw-accent-light: #c9724f; /* Readable on brown. Pressed fills stay on --hw-flame-deep. */ --hw-accent-strong: #e7b08a; --hw-cta-ink: #1a0f08; --hw-flame-rgb: 184, 92, 58; --hw-flame-light-rgb: 201, 114, 79; --hw-flame-deep-rgb: 143, 64, 39; --hw-accent-rgb: 184, 92, 58; --hw-accent-light-rgb: 201, 114, 79; --hw-accent-strong-rgb: 231, 176, 138; /* Secondary — amber gold for labels / soft borders */ --hw-gold: #e0c09a; --hw-gold-hover: #f0d7b4; --hw-gold-rgb: 224, 192, 154; --hw-red: #c45c5c; --hw-red-rgb: 196, 92, 92; --hw-border: rgba(var(--hw-gold-rgb), 0.14); --hw-border-strong: rgba(var(--hw-flame-rgb), 0.32); --hw-border-subtle: rgba(var(--hw-gold-rgb), 0.1); --hw-shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.28); --hw-shadow-md: 0 16px 40px rgba(0, 0, 0, 0.36); --hw-shadow-lg: 0 28px 72px rgba(0, 0, 0, 0.48); --hw-shadow-fire: 0 10px 24px rgba(var(--hw-flame-rgb), 0.16); --hw-canvas-surface: var(--hw-bg); --hw-canvas-bg: radial-gradient(circle at 68% 8%, rgba(var(--hw-flame-rgb), 0.2), transparent 34%), radial-gradient(circle at 12% 12%, rgba(var(--hw-red-rgb), 0.12), transparent 30%), radial-gradient(circle at 12% 0%, rgba(var(--hw-flame-rgb), 0.06), transparent 14%), radial-gradient(circle at 88% 0%, rgba(var(--hw-flame-rgb), 0.05), transparent 14%), linear-gradient(180deg, var(--hw-bg) 0%, var(--hw-bg-soft) 52%, var(--hw-bg-deep) 100%); --hw-surface: var(--hw-card); --hw-bg-rgb: 31, 20, 15; --hw-bg-soft-rgb: 42, 24, 16; --hw-elevated-rgb: 60, 38, 27; --hw-border-soft: rgba(var(--hw-text-rgb), 0.08); --hw-card-face: linear-gradient( 180deg, rgba(var(--hw-card-2-rgb), 0.88) 0%, rgba(var(--hw-card-rgb), 0.96) 100% ); --hw-nav-border: rgba(var(--hw-gold-rgb), 0.12); --hw-nav-glow: 0 0 10px rgba(var(--hw-flame-rgb), 0.08); --hw-nav-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); --hw-search-text: #fff4e8; --hw-search-text-soft: #ead6c2; --hw-search-placeholder: rgba(184, 156, 132, 0.78); --hw-search-border: rgba(var(--hw-gold-rgb), 0.22); --hw-search-border-hover: rgba(var(--hw-gold-rgb), 0.32); --hw-search-border-focus: rgba(var(--hw-flame-rgb), 0.5); --hw-search-surface: radial-gradient(ellipse 120% 80% at 8% -20%, rgba(var(--hw-flame-rgb), 0.08), transparent 50%), linear-gradient(168deg, rgba(60, 38, 27, 0.98) 0%, rgba(42, 24, 16, 0.99) 50%, rgba(22, 15, 12, 1) 100%); --global-palette2: var(--hw-flame-deep); --global-palette12: color-mix(in srgb, var(--hw-flame) 78%, #000); --hw-ad-ember: var(--hw-flame); --hw-ad-ember-bright: var(--hw-flame-light); --hw-ad-gold: var(--hw-gold); --hw-ad-parchment: var(--hw-text); --hw-ad-muted: var(--hw-muted); --hw-ad-border: rgba(var(--hw-gold-rgb), 0.16); --hw-ad-bg: var(--hw-bg-deep); --hw-ad-bg-deep: var(--hw-bg); --hw-ad-panel: var(--hw-panel); --hw-ad-panel-strong: var(--hw-panel-solid); --hw-ad-deep-red: color-mix(in srgb, var(--hw-bg-deep) 82%, var(--hw-flame) 18%); /* Remap ivory editorial aliases so hubs go dark with the pack */ --hw-fe-bg: var(--hw-bg); --hw-fe-bg-soft: var(--hw-bg-soft); --hw-fe-surface: var(--hw-card); --hw-fe-elevated: var(--hw-elevated); --hw-fe-panel: var(--hw-panel); --hw-fe-panel-solid: var(--hw-panel-solid); --hw-fe-text: var(--hw-text); --hw-fe-text-soft: var(--hw-text-soft); --hw-fe-muted: var(--hw-muted); --hw-fe-text-rgb: var(--hw-text-rgb); --hw-fe-accent: var(--hw-flame); --hw-fe-accent-strong: var(--hw-accent-strong); --hw-fe-accent-light: var(--hw-flame-light); --hw-fe-accent-rgb: var(--hw-flame-rgb); --hw-fe-accent-light-rgb: var(--hw-flame-light-rgb); --hw-fe-accent-strong-rgb: var(--hw-accent-strong-rgb); --hw-fe-border: rgba(var(--hw-gold-rgb), 0.22); --hw-fe-border-soft: rgba(var(--hw-text-rgb), 0.08); --hw-fe-border-strong: rgba(var(--hw-flame-rgb), 0.38); --hw-fe-shadow-sm: var(--hw-shadow-sm); --hw-fe-shadow-md: var(--hw-shadow-md); --hw-fe-shadow-lg: var(--hw-shadow-lg); --hw-fe-shadow-fire: var(--hw-shadow-fire); --hw-search-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05); --hw-search-elevate: 0 8px 18px rgba(0, 0, 0, 0.35); --hw-search-focus-glow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 0 3px rgba(var(--hw-flame-rgb), 0.28); } html[data-hw-theme="cinder"] .hw-sm-btn, html[data-hw-theme="cinder"] .hw-sm-row, html[data-hw-theme="cinder"] .hw-sm-pill, html[data-hw-theme="cinder"] .hw-sm-menu summary, html[data-hw-theme="cinder"] .hw-sm-prose, html[data-hw-theme="cinder"] .hw-sm .ProseMirror, html[data-hw-theme="cinder"] .hw-sm textarea, html[data-hw-theme="cinder"] .hw-sm select, html[data-hw-theme="cinder"] .hw-sm input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) { background-color: var(--hw-elevated); color: var(--hw-text); } html[data-hw-theme="cinder"] .hw-sm textarea::placeholder, html[data-hw-theme="cinder"] .hw-sm input::placeholder { color: var(--hw-text-muted); } html[data-hw-theme="cinder"] .hw-sm-btn--primary, html[data-hw-theme="cinder"] .hw-sm-btn--tool.is-active, html[data-hw-theme="cinder"] .hw-sm-row.is-active, html[data-hw-theme="cinder"] .hw-sm-btn.is-active { background-color: var(--hw-flame); color: #fff; } html[data-hw-theme="cinder"] .hw-sm-btn--primary:hover, html[data-hw-theme="cinder"] .hw-sm-btn--tool.is-active:hover, html[data-hw-theme="cinder"] .hw-sm-row.is-active:hover, html[data-hw-theme="cinder"] .hw-sm-btn.is-active:hover { background-color: var(--hw-flame-deep); color: #fff; } html[data-hw-theme="cinder"] .hw-sm-btn--danger { background-color: transparent; color: var(--hw-accent-strong); } html[data-hw-theme="cinder"] .hw-sm-guide button:hover, html[data-hw-theme="cinder"] .hw-sm-guide button:focus-visible { background-color: var(--hw-card-2); color: var(--hw-text); } html[data-hw-theme="cinder"] .hw-hidden-gems__shuffle { color: var(--hw-accent-strong); } /* Grey stage floors baked into older island CSS. Token wins once the island is rebuilt. */ html[data-hw-theme="cinder"] .hw-genre-heatmap__cell, html[data-hw-theme="cinder"] .hw-genre-explorer__stage, html[data-hw-theme="cinder"] .hw-genre-spotlight__aside { background-color: var(--hw-stage-floor); } /* Cinder atmosphere — keep ember heat on legacy wash plates */ html[data-hw-theme="cinder"] body.hw-hearth-wash-home .hw-hearth-wash__plate, html[data-hw-theme="cinder"] body.hw-hearth-wash-home .hw-hearth-wash__flank, html[data-hw-theme="cinder"] body.hw-hearth-flanks-home .hw-hearth-flanks__plate, html[data-hw-theme="cinder"] body.hw-rk-hearth-wash .hw-rk-page-wash__plate { filter: saturate(0.9) brightness(0.78) contrast(1.05) !important; opacity: 0.48; } html[data-hw-theme="cinder"] body.hw-hearth-wash-home .hw-hearth-wash__veil, html[data-hw-theme="cinder"] body.hw-hearth-flanks-home .hw-hearth-flanks__veil, html[data-hw-theme="cinder"] body.hw-rk-hearth-wash .hw-rk-page-wash__veil { background: radial-gradient(ellipse 60% 72% at 50% 40%, rgba(22, 15, 12, 0.82) 0%, rgba(22, 15, 12, 0.5) 48%, transparent 78%), linear-gradient(90deg, rgba(var(--hw-flame-rgb), 0.1) 0%, transparent 28%, transparent 72%, rgba(var(--hw-flame-rgb), 0.12) 100%), linear-gradient(180deg, rgba(22, 15, 12, 0.55) 0%, transparent 16%, transparent 80%, rgba(22, 15, 12, 0.65) 100%) !important; } /* ------------------------------------------------------------------ Midnight — black ink structure + steel-blue accents (not blue-washed) ------------------------------------------------------------------ */ html[data-hw-theme="midnight"] { /* Structure — strong black / charcoal (barely cool, not blue panels) */ --hw-bg: #08090b; --hw-bg-soft: #0e0f12; --hw-bg-deep: #050506; --hw-card: #121316; --hw-card-2: #18191d; --hw-elevated: #1c1d22; --hw-panel: rgba(18, 19, 22, 0.94); --hw-panel-solid: #121316; --hw-panel-soft: rgba(24, 25, 29, 0.9); --hw-panel-light: rgba(255, 255, 255, 0.035); --hw-card-rgb: 18, 19, 22; --hw-card-2-rgb: 24, 25, 29; --hw-bg-deep-rgb: 5, 5, 6; --hw-cinder: #2a2c32; /* Text — neutral cool white/gray (not blue-gray wash) */ --hw-text: #eef0f3; --hw-text-strong: #f7f8fa; --hw-text-soft: #c5c9d0; --hw-text-muted: #8e939c; --hw-muted: #8e939c; --hw-muted-2: #6a6f78; --hw-text-rgb: 238, 240, 243; /* Primary accent — steel blue (CTAs, selection, strong focus only) */ --hw-cta: #6b9fef; --hw-flame: #6b9fef; --hw-flame-light: #8bb4f5; --hw-flame-deep: #3d6fbf; --hw-accent: #6b9fef; --hw-accent-light: #8bb4f5; --hw-accent-strong: #3d6fbf; --hw-cta-ink: #06070a; --hw-flame-rgb: 107, 159, 239; --hw-flame-light-rgb: 139, 180, 245; --hw-flame-deep-rgb: 61, 111, 191; --hw-accent-rgb: 107, 159, 239; --hw-accent-light-rgb: 139, 180, 245; --hw-accent-strong-rgb: 61, 111, 191; /* Secondary highlight — silver (borders, kickers) — not another blue */ --hw-gold: #b8bec8; --hw-gold-hover: #d4d8e0; --hw-gold-rgb: 184, 190, 200; --hw-red: #e57373; --hw-red-rgb: 229, 115, 115; --hw-border: rgba(var(--hw-gold-rgb), 0.14); --hw-border-strong: rgba(var(--hw-flame-rgb), 0.42); --hw-border-subtle: rgba(255, 255, 255, 0.06); --hw-shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.4); --hw-shadow-md: 0 16px 40px rgba(0, 0, 0, 0.48); --hw-shadow-lg: 0 28px 72px rgba(0, 0, 0, 0.58); --hw-shadow-fire: 0 12px 28px rgba(var(--hw-flame-rgb), 0.18); /* Canvas — black void; blue only as a faint edge glow */ --hw-canvas-surface: #08090b; --hw-canvas-bg: radial-gradient(circle at 72% 6%, rgba(var(--hw-flame-rgb), 0.1), transparent 32%), radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.03), transparent 28%), linear-gradient(180deg, #08090b 0%, #0e0f12 52%, #0a0b0d 100%); /* Ivory-era surface aliases used by React hubs / discovery */ --hw-surface: var(--hw-card); --hw-bg-rgb: 8, 9, 11; --hw-bg-soft-rgb: 14, 15, 18; --hw-elevated-rgb: 28, 29, 34; --hw-border-soft: rgba(255, 255, 255, 0.06); --hw-card-face: linear-gradient( 180deg, rgba(var(--hw-card-2-rgb), 0.88) 0%, rgba(var(--hw-card-rgb), 0.96) 100% ); --hw-nav-border: rgba(255, 255, 255, 0.08); --hw-nav-glow: 0 0 10px rgba(255, 255, 255, 0.04); --hw-nav-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); --hw-search-text: #eef0f3; --hw-search-text-soft: #c5c9d0; --hw-search-placeholder: rgba(142, 147, 156, 0.78); --hw-search-border: rgba(var(--hw-gold-rgb), 0.22); --hw-search-border-hover: rgba(var(--hw-gold-rgb), 0.32); --hw-search-border-focus: rgba(var(--hw-flame-rgb), 0.5); --hw-search-surface: radial-gradient(ellipse 120% 80% at 8% -20%, rgba(var(--hw-flame-rgb), 0.05), transparent 50%), linear-gradient(168deg, rgba(22, 23, 27, 0.98) 0%, rgba(12, 13, 15, 0.99) 50%, rgba(8, 9, 11, 1) 100%); --global-palette2: var(--hw-flame-deep); --global-palette12: color-mix(in srgb, var(--hw-flame) 78%, #000); --hw-ad-ember: var(--hw-flame); --hw-ad-ember-bright: var(--hw-flame-light); --hw-ad-gold: var(--hw-gold); --hw-ad-parchment: var(--hw-text); --hw-ad-muted: var(--hw-muted); --hw-ad-border: rgba(255, 255, 255, 0.1); --hw-ad-bg: var(--hw-bg-deep); --hw-ad-bg-deep: var(--hw-bg); --hw-ad-panel: var(--hw-panel); --hw-ad-panel-strong: var(--hw-panel-solid); --hw-ad-deep-red: color-mix(in srgb, var(--hw-bg-deep) 82%, var(--hw-flame) 18%); /* Ivory editorial aliases — nav / Arena / Profile / Settings / Studio */ --hw-fe-bg: var(--hw-bg); --hw-fe-bg-soft: var(--hw-bg-soft); --hw-fe-surface: var(--hw-card); --hw-fe-elevated: var(--hw-elevated); --hw-fe-panel: var(--hw-panel); --hw-fe-panel-solid: var(--hw-panel-solid); --hw-fe-text: var(--hw-text); --hw-fe-text-soft: var(--hw-text-soft); --hw-fe-muted: var(--hw-muted); --hw-fe-text-rgb: var(--hw-text-rgb); --hw-fe-accent: var(--hw-flame); --hw-fe-accent-strong: var(--hw-flame-deep); --hw-fe-accent-light: var(--hw-flame-light); --hw-fe-accent-rgb: var(--hw-flame-rgb); --hw-fe-accent-light-rgb: var(--hw-flame-light-rgb); --hw-fe-accent-strong-rgb: var(--hw-flame-deep-rgb); --hw-fe-border: rgba(var(--hw-gold-rgb), 0.22); --hw-fe-border-soft: rgba(255, 255, 255, 0.08); --hw-fe-border-strong: rgba(var(--hw-flame-rgb), 0.42); --hw-fe-shadow-sm: var(--hw-shadow-sm); --hw-fe-shadow-md: var(--hw-shadow-md); --hw-fe-shadow-lg: var(--hw-shadow-lg); --hw-fe-shadow-fire: var(--hw-shadow-fire); --hw-search-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06); --hw-search-elevate: 0 8px 18px rgba(0, 0, 0, 0.35); --hw-search-focus-glow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 3px rgba(var(--hw-flame-rgb), 0.28); } /* Atmosphere — cool cast on plates; veil stays black-heavy */ html[data-hw-theme="midnight"] body.hw-hearth-wash-home .hw-hearth-wash__plate, html[data-hw-theme="midnight"] body.hw-hearth-wash-home .hw-hearth-wash__flank, html[data-hw-theme="midnight"] body.hw-hearth-flanks-home .hw-hearth-flanks__plate, html[data-hw-theme="midnight"] body.hw-rk-hearth-wash .hw-rk-page-wash__plate { filter: saturate(0.28) brightness(0.62) hue-rotate(190deg) contrast(1.12) grayscale(0.15) !important; opacity: 0.42; } html[data-hw-theme="midnight"] body.hw-hearth-wash-home .hw-hearth-wash__veil, html[data-hw-theme="midnight"] body.hw-hearth-flanks-home .hw-hearth-flanks__veil, html[data-hw-theme="midnight"] body.hw-rk-hearth-wash .hw-rk-page-wash__veil { background: radial-gradient(ellipse 62% 74% at 50% 42%, rgba(5, 5, 6, 0.88) 0%, rgba(5, 5, 6, 0.58) 46%, transparent 78%), linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0%, transparent 32%, transparent 68%, rgba(0, 0, 0, 0.35) 100%), linear-gradient(180deg, rgba(5, 5, 6, 0.62) 0%, transparent 16%, transparent 80%, rgba(5, 5, 6, 0.7) 100%) !important; } /* ------------------------------------------------------------------ Parchment — dark warm void + brass accents (not brass-washed chrome) ------------------------------------------------------------------ */ html[data-hw-theme="parchment"] { /* Structure — deep warm charcoal (cards stay dark, not brass fills) */ --hw-bg: #0f0d0b; --hw-bg-soft: #15120f; --hw-bg-deep: #0a0908; --hw-card: #171411; --hw-card-2: #1e1a16; --hw-elevated: #221e19; --hw-panel: rgba(23, 20, 17, 0.94); --hw-panel-solid: #171411; --hw-panel-soft: rgba(30, 26, 22, 0.9); --hw-panel-light: rgba(242, 235, 225, 0.04); --hw-card-rgb: 23, 20, 17; --hw-card-2-rgb: 30, 26, 22; --hw-bg-deep-rgb: 10, 9, 8; --hw-cinder: #3d372f; /* Text — cream on dark */ --hw-text: #f2ebe1; --hw-text-strong: #faf6f0; --hw-text-soft: #d9d0c2; --hw-text-muted: #a89a88; --hw-muted: #a89a88; --hw-muted-2: #7f7364; --hw-text-rgb: 242, 235, 225; /* Primary accent — brass (CTAs / selection) */ --hw-cta: #c4a574; --hw-flame: #c4a574; --hw-flame-light: #d4b888; --hw-flame-deep: #8f7350; --hw-accent: #c4a574; --hw-accent-light: #d4b888; --hw-accent-strong: #8f7350; --hw-cta-ink: #14110e; --hw-flame-rgb: 196, 165, 116; --hw-flame-light-rgb: 212, 184, 136; --hw-flame-deep-rgb: 143, 115, 80; --hw-accent-rgb: 196, 165, 116; --hw-accent-light-rgb: 212, 184, 136; --hw-accent-strong-rgb: 143, 115, 80; /* Secondary — softer cream-gold for labels/borders */ --hw-gold: #e0d0b0; --hw-gold-hover: #efe4cc; --hw-gold-rgb: 224, 208, 176; --hw-red: #c45c4a; --hw-red-rgb: 196, 92, 74; --hw-border: rgba(var(--hw-gold-rgb), 0.14); --hw-border-strong: rgba(var(--hw-flame-rgb), 0.38); --hw-border-subtle: rgba(242, 235, 225, 0.06); --hw-shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.34); --hw-shadow-md: 0 16px 40px rgba(0, 0, 0, 0.42); --hw-shadow-lg: 0 28px 72px rgba(0, 0, 0, 0.52); --hw-shadow-fire: 0 12px 28px rgba(var(--hw-flame-rgb), 0.16); --hw-canvas-surface: #0f0d0b; --hw-canvas-bg: radial-gradient(circle at 68% 8%, rgba(var(--hw-flame-rgb), 0.1), transparent 34%), radial-gradient(circle at 12% 12%, rgba(140, 100, 60, 0.06), transparent 30%), linear-gradient(180deg, #0f0d0b 0%, #15120f 52%, #12100e 100%); /* Ivory-era surface aliases used by React hubs / discovery */ --hw-surface: var(--hw-card); --hw-bg-rgb: 15, 13, 11; --hw-bg-soft-rgb: 21, 18, 15; --hw-elevated-rgb: 34, 30, 25; --hw-border-soft: rgba(var(--hw-text-rgb), 0.08); --hw-card-face: linear-gradient( 180deg, rgba(var(--hw-card-2-rgb), 0.88) 0%, rgba(var(--hw-card-rgb), 0.96) 100% ); --hw-nav-border: rgba(var(--hw-gold-rgb), 0.12); --hw-nav-glow: 0 0 10px rgba(var(--hw-text-rgb), 0.05); --hw-nav-shadow: 0 12px 32px rgba(0, 0, 0, 0.42); --hw-search-text: #f2ebe1; --hw-search-text-soft: #d9d0c2; --hw-search-placeholder: rgba(168, 154, 136, 0.78); --hw-search-border: rgba(var(--hw-gold-rgb), 0.22); --hw-search-border-hover: rgba(var(--hw-gold-rgb), 0.32); --hw-search-border-focus: rgba(var(--hw-flame-rgb), 0.48); --hw-search-surface: radial-gradient(ellipse 130% 90% at 8% -20%, rgba(var(--hw-flame-rgb), 0.05), transparent 55%), linear-gradient(168deg, rgba(30, 26, 22, 0.98) 0%, rgba(18, 15, 13, 0.99) 46%, rgba(12, 10, 9, 1) 100%); --global-palette2: var(--hw-flame-deep); --global-palette12: color-mix(in srgb, var(--hw-flame) 78%, #000); --hw-ad-ember: var(--hw-flame); --hw-ad-ember-bright: var(--hw-flame-light); --hw-ad-gold: var(--hw-gold); --hw-ad-parchment: var(--hw-text); --hw-ad-muted: var(--hw-muted); --hw-ad-border: rgba(var(--hw-gold-rgb), 0.16); --hw-ad-bg: var(--hw-bg-deep); --hw-ad-bg-deep: var(--hw-bg); --hw-ad-panel: var(--hw-panel); --hw-ad-panel-strong: var(--hw-panel-solid); --hw-ad-deep-red: color-mix(in srgb, var(--hw-bg-deep) 82%, var(--hw-flame) 18%); /* Ivory editorial aliases — nav / Arena / Profile / Settings / Studio */ --hw-fe-bg: var(--hw-bg); --hw-fe-bg-soft: var(--hw-bg-soft); --hw-fe-surface: var(--hw-card); --hw-fe-elevated: var(--hw-elevated); --hw-fe-panel: var(--hw-panel); --hw-fe-panel-solid: var(--hw-panel-solid); --hw-fe-text: var(--hw-text); --hw-fe-text-soft: var(--hw-text-soft); --hw-fe-muted: var(--hw-muted); --hw-fe-text-rgb: var(--hw-text-rgb); --hw-fe-accent: var(--hw-flame); --hw-fe-accent-strong: var(--hw-flame-deep); --hw-fe-accent-light: var(--hw-flame-light); --hw-fe-accent-rgb: var(--hw-flame-rgb); --hw-fe-accent-light-rgb: var(--hw-flame-light-rgb); --hw-fe-accent-strong-rgb: var(--hw-flame-deep-rgb); --hw-fe-border: rgba(var(--hw-gold-rgb), 0.22); --hw-fe-border-soft: rgba(var(--hw-text-rgb), 0.08); --hw-fe-border-strong: rgba(var(--hw-flame-rgb), 0.38); --hw-fe-shadow-sm: var(--hw-shadow-sm); --hw-fe-shadow-md: var(--hw-shadow-md); --hw-fe-shadow-lg: var(--hw-shadow-lg); --hw-fe-shadow-fire: var(--hw-shadow-fire); --hw-search-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05); --hw-search-elevate: 0 8px 18px rgba(0, 0, 0, 0.32); --hw-search-focus-glow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 0 3px rgba(var(--hw-flame-rgb), 0.26); } /* Parchment atmosphere — soft brass tip, dark center */ html[data-hw-theme="parchment"] body.hw-hearth-wash-home .hw-hearth-wash__plate, html[data-hw-theme="parchment"] body.hw-hearth-wash-home .hw-hearth-wash__flank, html[data-hw-theme="parchment"] body.hw-hearth-flanks-home .hw-hearth-flanks__plate, html[data-hw-theme="parchment"] body.hw-rk-hearth-wash .hw-rk-page-wash__plate { filter: saturate(0.65) brightness(0.88) hue-rotate(18deg) sepia(0.18) !important; opacity: 0.5; } html[data-hw-theme="parchment"] body.hw-hearth-wash-home .hw-hearth-wash__veil, html[data-hw-theme="parchment"] body.hw-hearth-flanks-home .hw-hearth-flanks__veil, html[data-hw-theme="parchment"] body.hw-rk-hearth-wash .hw-rk-page-wash__veil { background: radial-gradient(ellipse 58% 72% at 50% 40%, rgba(10, 9, 8, 0.78) 0%, rgba(10, 9, 8, 0.45) 48%, transparent 78%), linear-gradient(90deg, rgba(var(--hw-flame-rgb), 0.08) 0%, transparent 28%, transparent 72%, rgba(var(--hw-flame-rgb), 0.1) 100%), linear-gradient(180deg, rgba(10, 9, 8, 0.5) 0%, transparent 18%, transparent 78%, rgba(10, 9, 8, 0.58) 100%) !important; } /* Island CSS restates the old deep clay after this file. Keep Cinder accent text readable. */ html[data-hw-theme="cinder"] { --hw-accent-strong: #e7b08a !important; --hw-fe-accent-strong: #e7b08a !important; --hw-accent-strong-rgb: 231, 176, 138 !important; --hw-fe-accent-strong-rgb: 231, 176, 138 !important; }