/* Snailbird design tokens — shared palette layer (ULTRAVIOLET).
   Consumed by both SnailbirdPublic (public site, dark-first + light toggle) and the CMS
   host (light only). Page-specific styling lives in the consuming host's own stylesheet
   (e.g. SnailbirdPublic/wwwroot/styles/snailbird-styles.css).
   NAMING DEBT: the source tokens are colour-named (-navy, -green-accent, -white) but now hold
   violet, magenta and violet-white. Names kept to avoid a 471-site rename in the same change. */

/* Begonia — the house display face, self-hosted. The font file is supplied by Daniel; no licence
   terms are asserted here. Shipped as .otf because no woff2 encoder is available in this toolchain
   (no python/fonttools, no woff2_compress) — a 22 KB face, so the uncompressed-format debt is small,
   but converting to woff2 is still the right follow-up. Served from the RCL's static assets, so the
   url() is relative to THIS stylesheet's own directory and survives asset fingerprinting. */
@font-face {
    font-family: "Begonia";
    src: url("../fonts/begonia.regular.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Light theme — "white-out": violet-white ground, violet-black ink, magenta/violet accents.
   Both faces declare the FULL source-token set: unlike the previous skin, ULTRAVIOLET's light
   and dark faces are not the same two brand constants swapping roles — the saturated accents
   (#E44298 / #1FC9DC) are unreadable on a light ground and need text-legal substitutes. */
:root {
    /* Source tokens — light face */
    --snailbird-navy: #150C24;
    --snailbird-navy-mid: #241539;
    --snailbird-green: #2A0E4E;
    --snailbird-green-light: #7A2BD9;
    --snailbird-green-accent: #B3007E;
    --snailbird-green-interactive: #5B2BD9;
    --snailbird-muted: #6B5F8F;
    --snailbird-soft: #E4DEF2;
    --snailbird-white: #F4F1FA;
    /* Magenta at FILL strength — large CTA surfaces (buttons), never type. Split from
       --snailbird-green-accent because a fill dark enough to read calm on the dark ground takes
       DARK ink below AA (they lose contrast together), so this pairs with --snailbird-white ink
       in both faces. Light reuses the accent, so the light face is unchanged. Small accent chips
       (--snailbird-play-chip) are not fills in this sense and stay on the accent. */
    --snailbird-accent-fill: var(--snailbird-green-accent);
    /* Violet for FOREGROUND marks — eyebrow labels, the footer wordmark, rail numerals, SVG
       strokes. --snailbird-green is a background wash (1.61:1 on the dark ground) and must never
       be bound as a colour/stroke; this is the face-legible violet for those roles. */
    --snailbird-violet-text: var(--snailbird-green);
    /* Crimson "hot" register — live / now-playing / clip. Large text and chrome only in dark
       (4.6:1 on the ground); in LIGHT it is fill-only: #F0003C on #F4F1FA is ~4.0:1 and fails
       body text. The light value is an open question the artwork cannot answer (it is dark-only),
       so light reuses the dark hex and the fill-only restriction is the guard. */
    --snailbird-hot: #F0003C;
    /* Signal green — RESERVED for surfaces that render audio data (seeker played fill, spectrum
       bars, level meter). Never chrome, links, buttons, or type. The dark value #2BE37E is 1.5:1
       on the light ground, hence a separate darker light value at 4.8:1. */
    --snailbird-signal: #0F7A45;
    --snailbird-border: rgba(21, 12, 36, 0.10);
    --snailbird-border-green: rgba(42, 14, 78, 0.20);
    /* Thin light-on-dark border, NowPlayingCard spirit. Face-neutral: it is only ever drawn on a
       dark surface, so it stays ink-on-dark in both themes. One token instead of scattering the
       rgba literal NowPlayingCard uses inline. */
    --snailbird-border-light: rgba(237, 233, 247, 0.14);
    /* Modal scrim base colour (RGB triple for use in rgba()) — the true page ground.
       Tokenised here so the scrim rule in snailbird-styles.css has no hardcoded literals.
       Tracks PaletteDark.Background (#06040D), which is now one step BELOW --snailbird-navy
       (#0A0614, card elevation) — so this is deliberately not the navy value. A triple cannot
       be derived from a colour token, so update this literal alongside Background. */
    --snailbird-scrim-rgb: 6, 4, 13;
    /* Modal scrim opacity — the SINGLE point of truth for the visualizer-controls overlay tint.
       Mild so the panel reads as modal without a blackout. Change here once. */
    --snailbird-modal-scrim-alpha: 0.15;
    /* Panel ground — the deep violet beneath the glass panels. Face-neutral: the panels are
       dark glass in dark mode only. Source token; consumed by the theme-aware
       --snailbird-panel-surface dark value below. */
    --snailbird-panel-ground: #191226;

    /* Glass-panel family — the bespoke overlay panels (queue / visualizer control deck / privacy).
       Light values make these panels a light translucent glass with dark text; the dark blocks
       below swap in the deep-violet glass. Surface keeps the glassmorphic translucency (paired
       with backdrop-blur in the consuming rules) — near-page-surface at 82% so the blur shows
       through; text/border are ink-based for legibility on the light glass. */
    --snailbird-panel-surface: color-mix(in srgb, var(--snailbird-white) 82%, transparent);
    --snailbird-panel-text: var(--snailbird-navy);
    --snailbird-panel-text-muted: var(--snailbird-muted);
    --snailbird-panel-border: var(--snailbird-border);
    /* Row/hover wash on the panel surface — an ink tint on light, a paper tint on dark (below). */
    --snailbird-panel-row-hover: color-mix(in srgb, var(--snailbird-navy) 8%, transparent);

    /* Font stack. -house is the Snailbird HOUSE display face (hub, Lab, Studio, nav brand);
       -display stays Unbounded and belongs to the 0xSEGFAULT music side, including its masthead.
       Both are display-only — body prose is -body in every section. Begonia falls back to the
       display face rather than a generic so a failed font load still reads as display type. */
    --snailbird-font-house: "Begonia", "Unbounded", "Arial Black", sans-serif;
    --snailbird-font-display: "Unbounded", "Arial Black", sans-serif;
    --snailbird-font-mono: "JetBrains Mono", monospace;
    --snailbird-font-body: "Sora", sans-serif;

    /* Legacy palette aliases - mapped onto the source tokens.
       Existing utility classes (.snailbird-card-*, .snailbird-chip-*, .snailbird-text-*)
       still reference these names; they will be retired when Home.razor is rewritten.
       Until then, alias to the closest source colour. */
    --snailbird-primary: var(--snailbird-navy);
    --snailbird-secondary: var(--snailbird-green);
    --snailbird-tertiary: var(--snailbird-green-accent);
    --snailbird-quaternary: var(--snailbird-muted);
    --snailbird-quinary: var(--snailbird-green-light);
    --snailbird-senary: var(--snailbird-navy-mid);

    /* Surfaces */
    --snailbird-surface: var(--snailbird-white);
    --snailbird-background: var(--snailbird-white);

    /* Theme-aware aliases */
    --theme-primary: var(--snailbird-primary);
    --theme-secondary: var(--snailbird-secondary);
    --theme-tertiary: var(--snailbird-tertiary);
    --theme-quaternary: var(--snailbird-quaternary);
    --theme-quinary: var(--snailbird-quinary);
    --theme-senary: var(--snailbird-senary);
    --theme-surface: var(--snailbird-surface);
    --theme-surface-soft: var(--snailbird-muted);

    /* Gradient colors */
    --gradient-base: var(--snailbird-white);
    --gradient-accent: var(--snailbird-navy);
    --gradient-warm: var(--snailbird-green);
    --gradient-light: var(--snailbird-green-accent);

    /* Spectrum ramp — the reference artwork's vertical crimson→magenta→violet→cyan→green band,
       named once and aliased onto the existing anchors so it introduces no new hexes. Distinct
       from the --gradient-* slots above, which are a 2–6% section-WASH vocabulary and cannot
       carry a saturated ramp.
       Two rules govern where it may go:
         1. It is a SURFACE treatment, never a page ground — no block of running text may sit on
            it, because a single ink value cannot hold a fixed contrast ratio across the ramp.
         2. Stop 5 is --snailbird-signal, which is otherwise reserved to audio-data surfaces.
            Inside this ramp the green is a gradient stop, not a standalone signal colour.
       The stop percentages are proportioned to the artwork's own bands.
       Re-declared verbatim in the dark block below: a var() in a custom property is substituted
       against the declaring element's cascade, so aliases declared only here would inherit the
       LIGHT anchor values into dark. */
    --snailbird-spectrum-1: var(--snailbird-hot);
    --snailbird-spectrum-2: var(--snailbird-green-accent);
    --snailbird-spectrum-3: var(--snailbird-green-light);
    --snailbird-spectrum-4: var(--snailbird-green-interactive);
    --snailbird-spectrum-5: var(--snailbird-signal);
    --snailbird-spectrum-vertical: linear-gradient(to bottom,
        var(--snailbird-spectrum-1) 0%,
        var(--snailbird-spectrum-2) 6%,
        var(--snailbird-spectrum-3) 25%,
        var(--snailbird-spectrum-4) 60%,
        var(--snailbird-spectrum-5) 80%,
        var(--snailbird-navy) 96%);
    /* Same ramp turned 90° for section rules, which run across the page rather than down it.
       Ends at the ramp's own green rather than the ground: a hairline has no room to fade out. */
    --snailbird-spectrum-horizontal: linear-gradient(to right,
        var(--snailbird-spectrum-1) 0%,
        var(--snailbird-spectrum-2) 6%,
        var(--snailbird-spectrum-3) 25%,
        var(--snailbird-spectrum-4) 60%,
        var(--snailbird-spectrum-5) 100%);

    /* Link-ramp family — a dedicated four-stop chromatic ramp for the hub's link tiles
       (Home.razor HueStyle). Distinct from --snailbird-spectrum-1..5: that family is shared
       with the visualizer/seeker/meter surfaces, so changing its hues is a design decision,
       not a fix. Dark face (below) maps 1:1 onto --snailbird-spectrum-1..4 — pixel-identical
       to the shipped ramp. Light re-proportions across the hues this face actually has:
       --snailbird-spectrum-3/4 land on nearly the same violet here (#7A2BD9 / #5B2BD9), so
       stop 3 is an interpolated intermediate instead of aliasing spectrum-3, giving four
       visibly distinct stops instead of three-that-look-like-one. */
    --snailbird-linkramp-1: var(--snailbird-hot);
    --snailbird-linkramp-2: var(--snailbird-green-accent);
    --snailbird-linkramp-3: color-mix(in oklab, var(--snailbird-green-accent), var(--snailbird-green-light));
    --snailbird-linkramp-4: var(--snailbird-green-light);

    /* Theme-aware page-surface family. The "neutral page surface" concept:
       sections that were hardcoded to --snailbird-white because the site was light-only.
       The dark block below inverts them onto the violet-black ground so neutral sections
       dissolve into one dark field. */
    --snailbird-page-surface: var(--snailbird-white);
    --snailbird-page-text: var(--snailbird-navy);
    --snailbird-page-text-muted: var(--snailbird-muted);

    /* Play-chip family. PlayStateIcon's chip is shared across release heroes, Cut track rows,
       and the player bar. Light keeps a soft violet-grey chip + ink glyph; dark turns the chip
       magenta with a violet-black glyph. The -soft variant is the player-bar override (same
       accent, much less opaque). */
    --snailbird-play-chip: var(--snailbird-soft);
    --snailbird-play-glyph: var(--snailbird-navy);
    --snailbird-play-chip-soft: var(--snailbird-soft);

    /* Popover surface. Default MudBlazor popovers (selects/menus/tooltips/share body) bind this.
       Light uses a very subtle ink wash (4%) — near the page background but just perceptibly off
       so the popover reads as an elevated surface. Dark uses --snailbird-popover-surface-dark,
       defined here and referenced by both the .snailbird-theme-dark wrapper block and the
       body.snailbird-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 --snailbird-panel-* family. */
    --snailbird-popover-surface-dark: #23193A;
    --snailbird-popover-surface: color-mix(in srgb, var(--snailbird-navy) 4%, var(--snailbird-white));

    /* Fixed-nav height — single source of truth shared by the frosted-glass nav
       (SnailbirdMenu.razor.css pins .sb-nav to this) and the main-content clearance
       (.sb-main-content padding-top in snailbird-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. */
    --snailbird-nav-height: 88px;
}

/* Mobile fixed-nav height — matches the <600px breakpoint in SnailbirdMenu.razor.css
   (tighter horizontal padding + smaller bar). Cascades to .sb-nav and .sb-main-content. */
@media (max-width: 599px) {
    :root {
        --snailbird-nav-height: 72px;
    }
}

/* Source tokens — dark face (the PRIMARY face). Declared for both the wrapper div and body:
   MudOverlay panels and MudBlazor popovers portal to body, outside the wrapper, and would
   otherwise resolve the light-face source values while the page is in dark mode. */
.snailbird-theme-dark,
body.snailbird-theme-dark {
    --snailbird-navy: #0A0614;
    /* The binding contrast floor for the accents is this CARD surface, not the page ground —
       it is the lightest thing they sit on, so a value that clears 4.5:1 on #06040D can still
       fail here. Checking against the ground alone will let an accent through that fails AA. */
    --snailbird-navy-mid: #1C132C;
    --snailbird-green: #3E2565;
    --snailbird-green-light: #A471FF;
    --snailbird-green-accent: #E44298;
    --snailbird-green-interactive: #1FC9DC;
    --snailbird-muted: #9B8FBF;
    --snailbird-soft: #1E1533;
    --snailbird-white: #EDE9F7;
    /* Fill leg of the accent, one L step below the text leg. See the :root declaration. */
    --snailbird-accent-fill: #C01579;
    --snailbird-violet-text: var(--snailbird-green-light);
    --snailbird-hot: #F0003C;
    --snailbird-signal: #2BE37E;
    /* Ink-based on dark: the light-face value (ink at 10% on a light ground) is invisible here. */
    --snailbird-border: rgba(237, 233, 247, 0.10);
    --snailbird-border-green: rgba(228, 66, 152, 0.20);

    /* Spectrum ramp, re-declared against the dark anchors. See the :root block for the rules
       governing where this may be applied. */
    --snailbird-spectrum-1: var(--snailbird-hot);
    --snailbird-spectrum-2: var(--snailbird-green-accent);
    --snailbird-spectrum-3: var(--snailbird-green-light);
    --snailbird-spectrum-4: var(--snailbird-green-interactive);
    --snailbird-spectrum-5: var(--snailbird-signal);
    --snailbird-spectrum-vertical: linear-gradient(to bottom,
        var(--snailbird-spectrum-1) 0%,
        var(--snailbird-spectrum-2) 6%,
        var(--snailbird-spectrum-3) 25%,
        var(--snailbird-spectrum-4) 60%,
        var(--snailbird-spectrum-5) 80%,
        var(--snailbird-navy) 96%);
    --snailbird-spectrum-horizontal: linear-gradient(to right,
        var(--snailbird-spectrum-1) 0%,
        var(--snailbird-spectrum-2) 6%,
        var(--snailbird-spectrum-3) 25%,
        var(--snailbird-spectrum-4) 60%,
        var(--snailbird-spectrum-5) 100%);

    /* Link-ramp family, dark face — 1:1 onto the spectrum ramp (pixel-identical to the shipped
       ramp). See the :root declaration above for the light-face rationale. */
    --snailbird-linkramp-1: var(--snailbird-spectrum-1);
    --snailbird-linkramp-2: var(--snailbird-spectrum-2);
    --snailbird-linkramp-3: var(--snailbird-spectrum-3);
    --snailbird-linkramp-4: var(--snailbird-spectrum-4);
}

/* Dark theme — violet-black ground / magenta accent / violet-white ink.
   Mirrors the light palette's vocabulary on a dark ground. Same alias structure as :root so
   utility classes (.snailbird-chip-*, .snailbird-border-*, .snailbird-text-*) resolve
   coherently across themes. */
.snailbird-theme-dark {
    /* Legacy palette aliases - mapped onto the source tokens.
       On dark, green-accent (magenta) becomes the primary interactive colour and
       the violet-white ink becomes the secondary emphasis. */
    --snailbird-primary: var(--snailbird-green-accent);
    --snailbird-secondary: var(--snailbird-white);
    --snailbird-tertiary: var(--snailbird-green);
    --snailbird-quaternary: var(--snailbird-muted);
    --snailbird-quinary: var(--snailbird-green-light);
    --snailbird-senary: var(--snailbird-navy-mid);

    /* Surfaces - violet-black ground, violet-mid elevated */
    --snailbird-surface: var(--snailbird-navy-mid);
    --snailbird-background: var(--snailbird-navy);

    /* Theme-aware aliases */
    --theme-primary: var(--snailbird-primary);
    --theme-secondary: var(--snailbird-secondary);
    --theme-tertiary: var(--snailbird-tertiary);
    --theme-quaternary: var(--snailbird-quaternary);
    --theme-quinary: var(--snailbird-quinary);
    --theme-senary: var(--snailbird-senary);
    --theme-surface: var(--snailbird-white);
    --theme-surface-soft: var(--snailbird-muted);

    /* Gradient colors */
    --gradient-base: var(--snailbird-navy);
    --gradient-accent: var(--snailbird-green-accent);
    --gradient-warm: var(--snailbird-green);
    --gradient-light: var(--snailbird-green-light);

    /* Page-surface family — inverted onto the true page ground. Binds --mud-palette-background
       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
       (--snailbird-navy-mid is card-elevation, not the page ground). */
    --snailbird-page-surface: var(--mud-palette-background);
    --snailbird-page-text: var(--snailbird-white);
    /* Lift muted text toward the ink so eyebrows/sub-text stay legible on the dark ground. */
    --snailbird-page-text-muted: color-mix(in srgb, var(--snailbird-muted) 70%, var(--snailbird-white));

    /* Play-chip family — magenta chip, violet-black glyph. The -soft variant is the player-bar
       override: same accent, much less opaque (translucent wash over the dark dock). */
    --snailbird-play-chip: var(--snailbird-green-accent);
    --snailbird-play-glyph: var(--snailbird-navy);
    --snailbird-play-chip-soft: color-mix(in srgb, var(--snailbird-green-accent) 30%, transparent);

    /* Popover surface — within the .snailbird-theme-dark wrapper this value applies to
       non-portaled elements only (drawers, inline menus). Portaled MudBlazor popovers live at
       body level; the body.snailbird-theme-dark block below uses the same source token. */
    --snailbird-popover-surface: var(--snailbird-popover-surface-dark);

    /* Glass-panel family (dark) — deep-violet glass, violet-white ink, the thin light-on-dark
       hairline (NowPlayingCard spirit), and a paper-tint row hover. */
    --snailbird-panel-surface: var(--snailbird-panel-ground);
    --snailbird-panel-text: var(--snailbird-white);
    --snailbird-panel-text-muted: color-mix(in srgb, var(--snailbird-white) 60%, transparent);
    --snailbird-panel-border: var(--snailbird-border-light);
    --snailbird-panel-row-hover: color-mix(in srgb, var(--snailbird-white) 6%, transparent);
}

/* Portal-scope dark surfaces. MudBlazor popovers (selects, menus, share body) and the bespoke
   MudOverlay glass panels (queue / visualizer / privacy) portal to body, placing them outside
   the .snailbird-theme-dark wrapper div. MainLayout.razor syncs snailbird-theme-dark onto body
   via JS after each render, so this selector reaches portaled content; without it these
   surfaces would fall through to the light :root values while the page is in dark mode. */
body.snailbird-theme-dark {
    --snailbird-popover-surface: var(--snailbird-popover-surface-dark);

    --snailbird-panel-surface: var(--snailbird-panel-ground);
    --snailbird-panel-text: var(--snailbird-white);
    --snailbird-panel-text-muted: color-mix(in srgb, var(--snailbird-white) 60%, transparent);
    --snailbird-panel-border: var(--snailbird-border-light);
    --snailbird-panel-row-hover: color-mix(in srgb, var(--snailbird-white) 6%, transparent);
}