/* Omen Den theme layer on top of FluentUI Blazor V5's generated design tokens. The Fluent JS engine owns the color/brand tokens — the brand seed (#8F2C8D) is supplied via the `data-theme-color` attribute on in App.razor and the engine derives the full --colorBrand* ramp from it. This file only covers what the engine does not: switchable body typography and a high-contrast safety net for our own chrome. Do NOT redeclare Fluent color/spacing tokens here — they are supplied by the library. Brand seed provenance — reference 16-stop ramp (designer export), not consumed directly: 10 #060105, 20 #250F24, 30 #411141, 40 #580F57, 50 #700970, 60 #841083, 70 #8F2C8D (seed), 80 #994197, 90 #A454A0, 100 #AE66AA, 110 #B878B4, 120 #C289BE, 130 #CC9BC8, 140 #D6ADD2, 150 #DFBFDC, 160 #E8D1E6. */ /* Open Dyslexic — self-hosted (OFL-1.1) from wwwroot/fonts/opendyslexic. Browsers fetch only the face actually matched, so listing bold/italic costs nothing until such text appears. */ @font-face { font-family: "OpenDyslexic"; src: url("../fonts/opendyslexic/OpenDyslexic-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "OpenDyslexic"; src: url("../fonts/opendyslexic/OpenDyslexic-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "OpenDyslexic"; src: url("../fonts/opendyslexic/OpenDyslexic-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "OpenDyslexic"; src: url("../fonts/opendyslexic/OpenDyslexic-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; } /* Typography — switch the base font token on the layout wrapper per `data-font`. Crucially the wrapper also re-declares `font-family: var(--fontFamilyBase)`: font-family is inherited, so plain text would otherwise inherit body's already-resolved Segoe value and ignore a var override. Declaring it here forces the wrapper subtree (and slotted content) to re-resolve the variable. Segoe is the Fluent default, so it just falls back to the inherited token. Family names match Roboto (Google Fonts) and OpenDyslexic (self-hosted @font-face above). */ .omen-theme-root { font-family: var(--fontFamilyBase); } .omen-theme-root[data-font="roboto"] { --fontFamilyBase: "Roboto", "Segoe UI", system-ui, sans-serif; } .omen-theme-root[data-font="opendyslexic"] { --fontFamilyBase: "OpenDyslexic", "Segoe UI", system-ui, sans-serif; } /* Signature Omen Den surface: a brand-purple stripe across the top of the primary card on each page, matching theomenden.com. Pair with FluentCard via Class="omen-surface". */ .omen-surface { width: 100%; border-radius: var(--borderRadiusLarge, 8px); border-top: var(--strokeWidthThicker, 3px) solid var(--colorBrandStroke1); box-shadow: var(--shadow8); } /* Pre-paint background fallback that mirrors the flagship site (the Fluent engine then manages the in-app surfaces). */ body { background-color: #141414; } @media (prefers-color-scheme: light) { body { background-color: #f5f5f5; } } /* High contrast — we rely on the OS forced-colors mode, which FluentUI components honor automatically. Keep our hand-rolled header legible by deferring to system colors. */ @media (forced-colors: active) { .omen-header { background-color: Canvas; border-bottom-color: CanvasText; } }