/* BuzzBanter's own generic theme - not tied to any organization's brand. survey.css (loaded
   first, always) already parameterizes every color/font/radius/shadow it uses through the --vs-*
   custom properties below, so this file only needs to redefine those properties' VALUES to a
   different palette - no structural CSS is duplicated or overridden here. Electric cyan-teal
   primary on a clean neutral surface (dark navy in dark mode), a cool violet secondary accent
   instead of the previous warm/heritage gold, and Space Grotesk for headings instead of a
   traditional serif - a deliberately vendor-neutral, tech-forward look. This is the app's only
   UI - loaded unconditionally by Views/Shared/_Layout.cshtml. */
:root {
    --vs-primary: #0e7c90;
    --vs-primary-light: #29b6c9;
    --vs-primary-dark: #0a5866;
    --vs-primary-contrast: #ffffff;
    --vs-accent: #7c6fe0;
    --vs-gold: #7c6fe0;
    --vs-gold-rgb: 124, 111, 224;
    --vs-bg: #f7f9fa;
    --vs-bg-rgb: 247, 249, 250;
    --vs-bg-alt: #eef3f4;
    --vs-surface: rgba(255, 255, 255, 0.96);
    --vs-surface-solid: #ffffff;
    --vs-ink-rgb: 15, 43, 51;
    --vs-border: rgba(var(--vs-ink-rgb), 0.09);
    --vs-border-strong: rgba(var(--vs-ink-rgb), 0.15);
    --vs-text: #0f2b33;
    --vs-text-muted: #55707a;
    --vs-success: #7fa35e;
    --vs-success-rgb: 127, 163, 94;
    --vs-danger: #b5482f;
    --vs-neutral: #91acb2;
    --vs-radius: 16px;
    --vs-shadow: 0 18px 45px rgba(14, 124, 144, 0.14);
    --vs-font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;

    --vs-primary-rgb: 14, 124, 144;
    --vs-primary-light-rgb: 41, 182, 201;
    --vs-bronze-rgb: 124, 111, 224;
    --vs-glow-primary: 0 0 0 1px rgba(var(--vs-primary-rgb), 0.2), 0 0 24px rgba(var(--vs-primary-rgb), 0.22);

    --vs-glow-1-rgb: 14, 124, 144;
    --vs-glow-2-rgb: 124, 111, 224;

    --vs-hero-grad-start: #e4f2f4;
    --vs-hero-grad-end: #f5f9fa;
    --vs-hero-shadow: 0 24px 60px rgba(14, 124, 144, 0.12);

    --vs-eyebrow-bg: #ece9fb;
    --vs-eyebrow-text: #4c3fa8;
    --vs-eyebrow-border-rgb: 124, 111, 224;

    --vs-badge-positive-bg: rgba(127, 163, 94, 0.16);
    --vs-badge-positive-text: #4c6c2c;
    --vs-badge-negative-bg: rgba(181, 72, 47, 0.14);
    --vs-badge-negative-text: #8a3c28;
    --vs-badge-neutral-bg: rgba(var(--vs-ink-rgb), 0.07);
    --vs-badge-neutral-text: #3a4a5c;
}

:root[data-theme="dark"] {
    --vs-primary: #4fb6c9;
    --vs-primary-light: #7fd0de;
    --vs-primary-dark: #2f8698;
    --vs-primary-contrast: #052227;
    --vs-accent: #a89cf2;
    --vs-gold: #a89cf2;
    --vs-gold-rgb: 168, 156, 242;
    --vs-bg: #0a1e24;
    --vs-bg-rgb: 10, 30, 36;
    --vs-bg-alt: #0d2329;
    --vs-surface: rgba(17, 41, 47, 0.85);
    --vs-surface-solid: #11292f;
    --vs-ink-rgb: 234, 243, 244;
    --vs-text: #eaf3f4;
    --vs-text-muted: #91acb2;
    --vs-success: #a3cf72;
    --vs-success-rgb: 163, 207, 114;
    --vs-danger: #e0836a;
    --vs-neutral: #6f8f97;
    --vs-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);

    --vs-primary-rgb: 79, 182, 201;
    --vs-primary-light-rgb: 127, 208, 222;
    --vs-bronze-rgb: 168, 156, 242;
    --vs-glow-primary: 0 0 0 1px rgba(var(--vs-primary-rgb), 0.3), 0 0 24px rgba(var(--vs-primary-rgb), 0.3);

    --vs-glow-1-rgb: 79, 182, 201;
    --vs-glow-2-rgb: 168, 156, 242;

    --vs-hero-grad-start: #102830;
    --vs-hero-grad-end: #0a1e24;
    --vs-hero-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);

    --vs-eyebrow-bg: #211d3d;
    --vs-eyebrow-text: #cdc4f7;
    --vs-eyebrow-border-rgb: 168, 156, 242;

    --vs-badge-positive-bg: rgba(163, 207, 114, 0.22);
    --vs-badge-positive-text: #cdeeb0;
    --vs-badge-negative-bg: rgba(224, 131, 106, 0.22);
    --vs-badge-negative-text: #f4c4b0;
    --vs-badge-neutral-bg: rgba(var(--vs-ink-rgb), 0.12);
    --vs-badge-neutral-text: #d3e6e8;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --vs-primary: #4fb6c9;
        --vs-primary-light: #7fd0de;
        --vs-primary-dark: #2f8698;
        --vs-primary-contrast: #052227;
        --vs-accent: #a89cf2;
        --vs-gold: #a89cf2;
        --vs-gold-rgb: 168, 156, 242;
        --vs-bg: #0a1e24;
        --vs-bg-rgb: 10, 30, 36;
        --vs-bg-alt: #0d2329;
        --vs-surface: rgba(17, 41, 47, 0.85);
        --vs-surface-solid: #11292f;
        --vs-ink-rgb: 234, 243, 244;
        --vs-text: #eaf3f4;
        --vs-text-muted: #91acb2;
        --vs-success: #a3cf72;
        --vs-success-rgb: 163, 207, 114;
        --vs-danger: #e0836a;
        --vs-neutral: #6f8f97;
        --vs-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);

        --vs-primary-rgb: 79, 182, 201;
        --vs-primary-light-rgb: 127, 208, 222;
        --vs-bronze-rgb: 168, 156, 242;
        --vs-glow-primary: 0 0 0 1px rgba(var(--vs-primary-rgb), 0.3), 0 0 24px rgba(var(--vs-primary-rgb), 0.3);

        --vs-glow-1-rgb: 79, 182, 201;
        --vs-glow-2-rgb: 168, 156, 242;

        --vs-hero-grad-start: #102830;
        --vs-hero-grad-end: #0a1e24;
        --vs-hero-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);

        --vs-eyebrow-bg: #211d3d;
        --vs-eyebrow-text: #cdc4f7;
        --vs-eyebrow-border-rgb: 168, 156, 242;

        --vs-badge-positive-bg: rgba(163, 207, 114, 0.22);
        --vs-badge-positive-text: #cdeeb0;
        --vs-badge-negative-bg: rgba(224, 131, 106, 0.22);
        --vs-badge-negative-text: #f4c4b0;
        --vs-badge-neutral-bg: rgba(var(--vs-ink-rgb), 0.12);
        --vs-badge-neutral-text: #d3e6e8;
    }
}

/* ---------- Nav chrome: generic text wordmark (no logo image/file) ---------- */

.app-brand-wordmark {
    gap: 0.55rem;
    font-family: var(--vs-font-display);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--vs-text);
    letter-spacing: -0.01em;
}

.app-brand-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--vs-primary-light), var(--vs-primary));
    box-shadow: 0 0 10px rgba(var(--vs-primary-rgb), 0.6);
    flex-shrink: 0;
}

/* ---------- Accessibility toolbar (text-size control is Dct-only; the theme toggle button also
   renders in Classic, restyled here to match) ---------- */
.a11y-toolbar { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }

.a11y-btn {
    appearance: none;
    border: 1px solid var(--vs-border);
    background: transparent;
    color: var(--vs-text);
    font: inherit;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}
.a11y-btn.icon-btn {
    width: 2.2rem;
    height: 2.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0;
    font-size: 1.1rem;
}
.a11y-btn:hover { background: var(--vs-bg-alt); transform: translateY(-1px); }

/* Deliberately more prominent than the theme toggle (its own border/label) since this is the
   control a low-vision visitor most needs to be able to find at a glance - same reasoning as
   DVSSurveyDemo's identical toolbar. */
.text-size-control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 2px solid var(--vs-primary);
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    background: var(--vs-surface-solid);
}
.text-size-icon { color: var(--vs-text-muted); line-height: 1; }
.text-size-icon-small { font-size: 0.7rem; }
.text-size-icon-large { font-size: 1.2rem; font-weight: 700; color: var(--vs-text); }
.text-size-control input[type="range"] {
    width: 72px;
    accent-color: var(--vs-primary);
    cursor: pointer;
}
.text-size-output {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--vs-primary);
    min-width: 4.2em;
}

/* html's own font-size drives every rem-based measurement in survey.css, but most of that file's
   sizing is in px (it predates this text-size control), so a rem-scale alone would only resize a
   minority of the page's text. `zoom` uniformly scales the whole page (text AND spacing) the same
   way a real browser zoom would, matching what the slider promises regardless of px/rem mix -
   Chromium and Safari support it; Firefox doesn't implement `zoom` and simply ignores it, so the
   slider is a graceful no-op there rather than a broken one. */
html { --font-scale: 1; }
html[data-text-size="large"] { --font-scale: 1.15; }
html[data-text-size="xlarge"] { --font-scale: 1.3; }

/* Plain surface color - the actual ambient glow/motion layer is .vs-ambient-bg
   (wwwroot/css/futuristic.css), a fixed low-opacity drifting gradient with no photography, kept
   as the single source of "ambient background" rather than layering a second one here. */
body {
    zoom: var(--font-scale);
    background-color: var(--vs-bg);
}