/* DeepDrft design tokens — shared palette layer. Consumed by both DeepDrftPublic (public site, light + dark) and the CMS host (light only). Page-specific styling lives in the consuming host's own stylesheet (e.g. DeepDrftPublic/wwwroot/styles/deepdrft-styles.css). */ /* Light theme - wireframe palette (navy / green / warm off-white) */ :root { /* Wireframe tokens - source of truth */ --deepdrft-navy: #112338; --deepdrft-navy-mid: #17283f; --deepdrft-green: #1A3C34; --deepdrft-green-light: #2A5C4F; --deepdrft-green-accent: #3D7A68; --deepdrft-green-interactive: #429d6a; --deepdrft-muted: #8A9BB0; --deepdrft-soft: #e3e7ec; --deepdrft-white: #FAFAF8; --deepdrft-border: rgba(13, 27, 42, 0.10); --deepdrft-border-green: rgba(26, 60, 52, 0.20); /* Thin light-on-dark border, NowPlayingCard spirit (Phase 15 §5). One token instead of scattering the rgba(250,250,248,0.12) literal NowPlayingCard uses inline. */ --deepdrft-border-light: rgba(250, 250, 248, 0.12); /* Modal scrim base colour (RGB triple for use in rgba()) — panel dark-ground (#0D1B2A). Deliberately NOT --deepdrft-navy (#112338); tokenised here so the scrim rule in deepdrft-styles.css has no hardcoded literals. Change here once. */ --deepdrft-scrim-rgb: 13, 27, 42; /* Modal scrim opacity — the SINGLE point of truth for the visualizer-controls overlay tint (Phase 15 §4/§10.5). Mild so the panel reads as modal without a blackout. Change here once. */ --deepdrft-modal-scrim-alpha: 0.15; /* Panel ground — muted, desaturated charcoal beneath the controls panel. Tunable: increase blue channel (e.g. #1e2235) to recover warmth, lower (e.g. #191b20) to go darker. Source token; consumed by the theme-aware --deepdrft-panel-surface dark value below. */ --deepdrft-panel-ground: #1a1c22; /* Glass-panel family — the bespoke overlay panels (queue / visualizer control deck / privacy). Light values here make these panels a light translucent glass with dark text so they read coherently against the light page; the .deepdrft-theme-dark block below reproduces today's dark-glass charcoal exactly so dark mode is visually unchanged. Surface keeps the glassmorphic translucency (paired with backdrop-blur in the consuming rules). Light surface: near-page-surface white at 82% so the backdrop blur still shows through; text/border are navy-based for legibility on the light glass. */ --deepdrft-panel-surface: rgba(250, 250, 248, 0.82); --deepdrft-panel-text: var(--deepdrft-navy); --deepdrft-panel-text-muted: var(--deepdrft-muted); --deepdrft-panel-border: var(--deepdrft-border); /* Row/hover wash on the panel surface — a navy tint on light, a white tint on dark (below). */ --deepdrft-panel-row-hover: color-mix(in srgb, var(--deepdrft-navy) 8%, transparent); /* Wireframe font stack */ --deepdrft-font-display: "Cormorant Garamond", Georgia, serif; --deepdrft-font-mono: "Geist Mono", monospace; --deepdrft-font-body: "DM Sans", sans-serif; /* Legacy palette aliases - mapped onto wireframe tokens. Existing utility classes (.deepdrft-card-*, .deepdrft-chip-*, .deepdrft-text-*) still reference these names; they will be retired in Phase 0.3/0.4 when Home.razor is rewritten. Until then, alias to the closest wireframe colour. */ --deepdrft-primary: var(--deepdrft-navy); --deepdrft-secondary: var(--deepdrft-green); --deepdrft-tertiary: var(--deepdrft-green-accent); --deepdrft-quaternary: var(--deepdrft-muted); --deepdrft-quinary: var(--deepdrft-green-light); --deepdrft-senary: var(--deepdrft-navy-mid); /* Surfaces */ --deepdrft-surface: var(--deepdrft-white); --deepdrft-background: var(--deepdrft-white); --deepdrft-surface-alpha: rgba(250, 250, 248, 0.88); /* Theme-aware aliases */ --theme-primary: var(--deepdrft-primary); --theme-secondary: var(--deepdrft-secondary); --theme-tertiary: var(--deepdrft-tertiary); --theme-quaternary: var(--deepdrft-quaternary); --theme-quinary: var(--deepdrft-quinary); --theme-senary: var(--deepdrft-senary); --theme-surface: var(--deepdrft-surface); --theme-surface-soft: var(--deepdrft-muted); /* Gradient colors */ --gradient-base: var(--deepdrft-white); --gradient-accent: var(--deepdrft-navy); --gradient-warm: var(--deepdrft-green); --gradient-light: var(--deepdrft-green-accent); /* Theme-aware page-surface family (Phase 18). The "neutral page surface" concept: sections that were hardcoded to --deepdrft-white because the site was light-only. Light values reproduce today's look exactly; the .deepdrft-theme-dark block below inverts them onto the navy ground so neutral sections dissolve into one dark field. */ --deepdrft-page-surface: var(--deepdrft-white); --deepdrft-page-text: var(--deepdrft-navy); --deepdrft-page-text-muted: var(--deepdrft-muted); /* Play-chip family (Phase 18). PlayStateIcon's chip is shared across release heroes, Cut track rows, and the player bar. Light keeps the current soft-grey chip + glyph; dark turns the chip moss-green with a navy glyph. The -soft variant is the player-bar override (same green, much less opaque). */ --deepdrft-play-chip: var(--deepdrft-soft); --deepdrft-play-glyph: var(--deepdrft-navy); --deepdrft-play-chip-soft: var(--deepdrft-soft); /* Popover surface (Phase 18). Default MudBlazor popovers (selects/menus/tooltips/share body) bind this. Light uses a very subtle navy wash (4%) — near the page background but just perceptibly off-white so the popover reads as an elevated surface. Dark uses a bluer navy (colour-mix of navy-mid + green-accent at 20%), defined once in --deepdrft-popover-surface-dark below and referenced by both the .deepdrft-theme-dark wrapper block and the body.deepdrft-theme-dark block so portaled popover content (which portals to , outside the wrapper div) is also reached. The bespoke glass panels (visualizer/queue/privacy) do NOT bind this — they have their own theme-aware --deepdrft-panel-* family (dark glass in dark theme, light glass in light). */ --deepdrft-popover-surface-dark: color-mix(in srgb, var(--deepdrft-navy-mid) 80%, var(--deepdrft-green-accent) 20%); --deepdrft-popover-surface: color-mix(in srgb, var(--deepdrft-navy) 4%, var(--deepdrft-white)); /* Fixed-nav height — single source of truth shared by the frosted-glass nav (DeepDrftMenu.razor.css pins .dd-nav to this) and the main-content clearance (.dd-main-content padding-top in deepdrft-styles.css). The nav is position:fixed so content scrolls under its backdrop blur; this keeps the clearance in lockstep with the bar so content never overlaps. Mobile (<600px) override below. */ --deepdrft-nav-height: 88px; /* Legacy font aliases retired in Phase 0.1 — all consumers now use --deepdrft-font-*. Palette aliases (--deepdrft-primary, --theme-*, etc.) remain; they still have consumers and are scheduled for retirement in Phase 0.3/0.4. */ } /* Mobile fixed-nav height — matches the <600px breakpoint in DeepDrftMenu.razor.css (tighter horizontal padding + smaller bar). Cascades to .dd-nav and .dd-main-content. */ @media (max-width: 599px) { :root { --deepdrft-nav-height: 72px; } } /* Dark theme - wireframe palette (navy ground / green-accent / off-white). Mirrors the light palette's vocabulary on a dark ground. Same alias structure as :root so utility classes (.deepdrft-chip-*, .deepdrft-border-*, .deepdrft-text-*) resolve coherently across themes. */ .deepdrft-theme-dark { /* Legacy palette aliases - mapped onto wireframe tokens. On dark, green-accent becomes the primary interactive colour and off-white becomes the secondary emphasis. */ --deepdrft-primary: var(--deepdrft-green-accent); --deepdrft-secondary: var(--deepdrft-white); --deepdrft-tertiary: var(--deepdrft-green); --deepdrft-quaternary: var(--deepdrft-muted); --deepdrft-quinary: var(--deepdrft-green-light); --deepdrft-senary: var(--deepdrft-navy-mid); /* Surfaces - navy ground, navy-mid elevated */ --deepdrft-surface: var(--deepdrft-navy-mid); --deepdrft-background: var(--deepdrft-navy); --deepdrft-surface-alpha: rgba(13, 27, 42, 0.92); /* Theme-aware aliases */ --theme-primary: var(--deepdrft-primary); --theme-secondary: var(--deepdrft-secondary); --theme-tertiary: var(--deepdrft-tertiary); --theme-quaternary: var(--deepdrft-quaternary); --theme-quinary: var(--deepdrft-quinary); --theme-senary: var(--deepdrft-senary); --theme-surface: var(--deepdrft-white); --theme-surface-soft: var(--deepdrft-muted); /* Gradient colors */ --gradient-base: var(--deepdrft-navy); --gradient-accent: var(--deepdrft-green-accent); --gradient-warm: var(--deepdrft-green); --gradient-light: var(--deepdrft-green-light); /* Theme-aware page-surface family (Phase 18) — inverted onto the true page ground. Binds --mud-palette-background (#0D1B2A) so neutral sections (Home hero-left, medium grid, footer, About light sections) dissolve into the site background as one continuous dark field rather than reading as raised panels (#112338 navy is card-elevation, not the page ground). */ --deepdrft-page-surface: var(--mud-palette-background); --deepdrft-page-text: var(--deepdrft-white); /* Lift muted text toward white so eyebrows/sub-text stay legible on the dark ground. */ --deepdrft-page-text-muted: color-mix(in srgb, var(--deepdrft-muted) 70%, var(--deepdrft-white)); /* Play-chip family (Phase 18) — moss-green chip, navy glyph (green-on-green on the player bar; navy-on-green on solid chips). The -soft variant is the player-bar override: same green, much less opaque (translucent wash over the navy dock). */ --deepdrft-play-chip: var(--deepdrft-green-accent); --deepdrft-play-glyph: var(--deepdrft-navy); --deepdrft-play-chip-soft: color-mix(in srgb, var(--deepdrft-green-accent) 30%, transparent); /* Popover surface (Phase 18) — within .deepdrft-theme-dark wrapper this value applies to non-portaled elements only (drawers, inline menus). Portaled MudBlazor popovers live at level; the body.deepdrft-theme-dark block below uses the same source token. */ --deepdrft-popover-surface: var(--deepdrft-popover-surface-dark); /* Glass-panel family (dark) — reproduces today's dark-glass chrome EXACTLY. Surface is the opaque charcoal ground the panels used directly before tokenisation; text is off-white; border is the thin light-on-dark hairline (NowPlayingCard spirit); row hover is the prior white 6% wash. Dark mode must look unchanged. */ --deepdrft-panel-surface: var(--deepdrft-panel-ground); --deepdrft-panel-text: var(--deepdrft-white); --deepdrft-panel-text-muted: color-mix(in srgb, var(--deepdrft-white) 60%, transparent); --deepdrft-panel-border: var(--deepdrft-border-light); --deepdrft-panel-row-hover: color-mix(in srgb, var(--deepdrft-white) 6%, transparent); } /* Portal-scope dark popover surface. MudBlazor popovers (selects, menus, share body) portal to , placing them outside the .deepdrft-theme-dark wrapper div. MainLayout.razor syncs deepdrft-theme-dark onto via JS after each render, so this selector reaches portaled content. Resolved from --deepdrft-popover-surface-dark (defined in :root above) — bluer navy (navy-mid + 20% green-accent tint) rather than the pure charcoal #162437. */ body.deepdrft-theme-dark { --deepdrft-popover-surface: var(--deepdrft-popover-surface-dark); /* The bespoke glass panels (queue / visualizer / privacy) are MudOverlay panels that portal to , outside the .deepdrft-theme-dark wrapper div — same portal scope as popovers. Re-declare the dark glass-panel family here so the panels resolve the dark (charcoal) values; without this they would fall through to the light :root values while the page is in dark mode. */ --deepdrft-panel-surface: var(--deepdrft-panel-ground); --deepdrft-panel-text: var(--deepdrft-white); --deepdrft-panel-text-muted: color-mix(in srgb, var(--deepdrft-white) 60%, transparent); --deepdrft-panel-border: var(--deepdrft-border-light); --deepdrft-panel-row-hover: color-mix(in srgb, var(--deepdrft-white) 6%, transparent); }