/* 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 <body>, 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
       <body> 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 <body>, placing them outside the .deepdrft-theme-dark wrapper div. MainLayout.razor syncs
   deepdrft-theme-dark onto <body> 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
       <body>, 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);
}
