/* 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. */ --deepdrft-panel-ground: #1a1c22; /* 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 is a soft desaturated-navy wash so they read as a calm light surface; dark uses the existing panel-ground charcoal. Bespoke dark-glass panels (visualizer/queue/privacy) do NOT bind this — they keep --deepdrft-panel-ground directly. */ --deepdrft-popover-surface: color-mix(in srgb, var(--deepdrft-navy) 8%, 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). Symptom #1 is a LIGHT-mode complaint and the acceptance bar requires dark popovers to stay unchanged, so dark binds the exact current MudBlazor dark Surface (#162437, DeepDrftPalettes.Dark.Surface) — NOT §3's suggested panel-ground (#1a1c22), which would have shifted dark popovers a shade. Pixel-identical dark; only light is retoned. */ --deepdrft-popover-surface: #162437; }