/*
 * VanHack Redesign product skin
 *
 * This file is intentionally an additive skin over the existing LeptonX,
 * Bootstrap/Blazorise and --vh-* contracts. Every selector is gated by
 * html[data-vh-design="redesign"], so the Classic rendering remains isolated
 * as a staff-only regression/reference option.
 *
 * Canonical direction: #0675CE primary, Tailwind Slate neutrals, Instrument
 * Sans UI copy, restrained Playfair Display headings, 6px controls, 8px cards
 * and quiet shadows. No rule changes layout structure or application behavior.
 */

html[data-vh-design="redesign"] {
    color-scheme: light;

    /* Redesign source palette. */
    --vh-rd-primary: #0675ce;
    --vh-rd-primary-hover: #0566b4;
    --vh-rd-primary-active: #044f8d;
    --vh-rd-primary-light: #7cc4fa;
    --vh-rd-primary-lighter: #a7d8fb;
    --vh-rd-primary-pale: #dbeafe;
    --vh-rd-primary-tint: #eff6ff;
    --vh-rd-primary-glow: #e0f2fe;
    --vh-rd-primary-soft: rgb(6 117 206 / 0.1);
    --vh-rd-primary-ring: rgb(6 117 206 / 0.22);
    --vh-rd-slate-50: #f8fafc;
    --vh-rd-slate-100: #f1f5f9;
    --vh-rd-slate-200: #e2e8f0;
    --vh-rd-slate-300: #cbd5e1;
    --vh-rd-slate-400: #94a3b8;
    --vh-rd-slate-500: #64748b;
    --vh-rd-slate-600: #475569;
    --vh-rd-slate-700: #334155;
    --vh-rd-slate-800: #1e293b;
    --vh-rd-slate-900: #0f172a;
    --vh-rd-slate-950: #020617;
    --vh-rd-danger: #dc2626;
    --vh-rd-danger-hover: #b91c1c;
    --vh-rd-danger-active: #991b1b;
    --vh-rd-danger-light: #fca5a5;
    --vh-rd-success: #16a34a;
    --vh-rd-success-hover: #15803d;
    --vh-rd-success-active: #166534;
    --vh-rd-success-light: #86efac;
    --vh-rd-warning: #d97706;
    --vh-rd-warning-hover: #b45309;
    --vh-rd-warning-light: #fbbf24;

    /* Type, geometry and elevation. */
    --vh-rd-font-body: 'Instrument Sans', 'Inter', sans-serif;
    --vh-rd-font-display: 'Playfair Display', Georgia, serif;
    --vh-rd-radius-control: 6px;
    --vh-rd-radius-card: 8px;
    --vh-rd-radius-pill: 999px;
    --vh-rd-shadow-surface: none;
    --vh-rd-shadow-xs: 0 1px 2px rgb(15 23 42 / 0.05);
    --vh-rd-shadow-sm: 0 1px 3px rgb(15 23 42 / 0.08), 0 1px 2px rgb(15 23 42 / 0.04);
    --vh-rd-shadow-md: 0 4px 12px -2px rgb(15 23 42 / 0.1), 0 2px 5px -2px rgb(15 23 42 / 0.06);
    --vh-rd-shadow-lg: 0 14px 30px -12px rgb(15 23 42 / 0.2), 0 4px 8px -4px rgb(15 23 42 / 0.08);
    --vh-auth-signup-bg: var(--vh-rd-slate-900);
    --vh-auth-signup-hover-bg: var(--vh-rd-slate-800);
    --vh-auth-signup-text: var(--vh-on-primary);

    /* Existing VanHack token compatibility. */
    --vh-primary: var(--vh-rd-primary);
    --vh-primary-rgb: 6 117 206;
    --vh-primary-hover: var(--vh-rd-primary-hover);
    --vh-primary-hover-rgb: 5 102 180;
    --vh-primary-hover-rgb-csv: 5, 102, 180;
    --vh-primary-active: var(--vh-rd-primary-active);
    --vh-primary-active-rgb: 4 79 141;
    --vh-primary-soft: var(--vh-rd-primary-soft);
    --vh-secondary: var(--vh-rd-slate-100);
    --vh-secondary-hover: var(--vh-rd-slate-200);
    --vh-secondary-active: var(--vh-rd-slate-300);
    --vh-secondary-soft: var(--vh-rd-slate-100);
    --vh-on-secondary: var(--vh-rd-slate-900);
    --vh-confirm: var(--vh-rd-primary);
    --vh-confirm-hover: var(--vh-rd-primary-hover);
    --vh-confirm-text: var(--vh-on-primary);
    --vh-orange-400: var(--vh-rd-primary);
    --vh-danger: var(--vh-rd-danger);
    --vh-danger-rgb: 220 38 38;
    --vh-danger-hover: var(--vh-rd-danger-hover);
    --vh-danger-active: var(--vh-rd-danger-active);
    --vh-success: var(--vh-rd-success);
    --vh-success-rgb: 22 163 74;
    --vh-success-hover: var(--vh-rd-success-hover);
    --vh-success-active: var(--vh-rd-success-active);
    --vh-warning: var(--vh-rd-warning);
    --vh-warning-rgb: 217 119 6;
    --vh-warning-hover: var(--vh-rd-warning-hover);

    --vh-black-10: var(--vh-rd-slate-50);
    --vh-black-20: var(--vh-rd-slate-100);
    --vh-black-30: var(--vh-rd-slate-200);
    --vh-black-40: var(--vh-rd-slate-300);
    --vh-black-50: var(--vh-rd-slate-500);
    --vh-black-60: var(--vh-rd-slate-600);
    --vh-black-70: var(--vh-rd-slate-700);
    --vh-black-80: var(--vh-rd-slate-800);
    --vh-black-90: var(--vh-rd-slate-900);
    --vh-black-100: var(--vh-rd-slate-950);
    --vh-gray-10: var(--vh-rd-slate-50);
    --vh-gray-20: var(--vh-rd-slate-100);
    --vh-gray-30: var(--vh-rd-slate-200);
    --vh-gray-40: var(--vh-rd-slate-300);
    --vh-gray-50: var(--vh-rd-slate-500);
    --vh-gray-60: var(--vh-rd-slate-600);
    --vh-gray-70: var(--vh-rd-slate-700);
    --vh-gray-80: var(--vh-rd-slate-800);
    --vh-gray-90: var(--vh-rd-slate-900);
    --vh-gray-100: var(--vh-rd-slate-950);
    --vh-tailwind-gray-200: var(--vh-rd-slate-200);
    --vh-tailwind-gray-300: var(--vh-rd-slate-300);
    --vh-tailwind-gray-500: var(--vh-rd-slate-500);
    --vh-tailwind-gray-600: var(--vh-rd-slate-600);

    /* Compatibility aliases that came from page-local colors. Keep feature
       identity/status ramps fixed, but fold text, line and soft-surface values
       into the Redesign semantic palette. */
    --vh-raw-0f62fe: var(--vh-rd-primary);
    --vh-raw-155a9e: var(--vh-rd-primary-active);
    --vh-raw-167542: var(--vh-rd-success);
    --vh-raw-1b6dc1: var(--vh-rd-primary);
    --vh-raw-1b8f5a: var(--vh-rd-success);
    --vh-raw-1f2937: var(--vh-rd-slate-900);
    --vh-raw-2563eb: var(--vh-rd-primary);
    --vh-raw-26374d: var(--vh-rd-slate-800);
    --vh-raw-405067: var(--vh-rd-slate-600);
    --vh-raw-41505d: var(--vh-rd-slate-600);
    --vh-raw-5d7189: var(--vh-rd-slate-500);
    --vh-raw-7a5200: var(--vh-amber-700);
    --vh-raw-9a5b00: var(--vh-amber-700);
    --vh-raw-9aa3b2: var(--vh-rd-slate-400);
    --vh-raw-9fc7e8: var(--vh-rd-slate-300);
    --vh-raw-a87811: var(--vh-rd-warning);
    --vh-raw-b9d4f0: var(--vh-primary-pale);
    --vh-raw-cde0f5: var(--vh-primary-pale);
    --vh-raw-cfe0f3: var(--vh-primary-pale);
    --vh-raw-d6dde3: var(--vh-rd-slate-200);
    --vh-raw-d8dde2: var(--vh-rd-slate-300);
    --vh-raw-d9e1ec: var(--vh-rd-slate-200);
    --vh-raw-e5e7eb: var(--vh-rd-slate-200);
    --vh-raw-e8ecf2: var(--vh-rd-slate-200);
    --vh-raw-e8f1fb: var(--vh-blue-tint);
    --vh-raw-e9eef3: var(--vh-rd-slate-100);
    --vh-raw-e9f8ef: var(--vh-success-soft);
    --vh-raw-eef1f6: var(--vh-rd-slate-100);
    --vh-raw-f4f7fe: var(--vh-rd-slate-50);
    --vh-raw-f7f9fc: var(--vh-rd-slate-50);
    --vh-raw-fff4e5: rgb(217 119 6 / 0.1);
    --vh-raw-fff8e8: rgb(217 119 6 / 0.08);

    --vh-text-heading: var(--vh-rd-slate-900);
    --vh-text-body: var(--vh-rd-slate-700);
    --vh-text-muted: var(--vh-rd-slate-500);
    --vh-text-placeholder: var(--vh-rd-slate-400);
    --vh-ink: var(--vh-rd-slate-900);
    --vh-body: var(--vh-rd-slate-700);
    --vh-muted: var(--vh-rd-slate-500);
    --vh-line: var(--vh-rd-slate-200);
    --vh-line-strong: var(--vh-rd-slate-300);
    --vh-surface: var(--vh-color-white);
    --vh-surface-soft: var(--vh-rd-slate-50);
    --vh-blue-tint: var(--vh-rd-primary-tint);
    --vh-blue-deep: var(--vh-rd-primary);
    --vh-primary-pale: var(--vh-rd-primary-pale);
    --vh-profile-neutral-start: var(--vh-rd-slate-300);
    --vh-profile-neutral-end: var(--vh-rd-slate-400);
    --vh-profile-copy: var(--vh-rd-slate-700);
    --vh-profile-copy-muted: var(--vh-rd-slate-600);
    --vh-profile-separator: var(--vh-rd-slate-300);
    --vh-profile-icon-muted: var(--vh-rd-slate-300);
    --vh-profile-meta-muted: var(--vh-rd-slate-400);
    --vh-profile-line: var(--vh-rd-slate-200);
    --vh-profile-soft: var(--vh-rd-slate-100);
    --vh-profile-hover: var(--vh-rd-slate-50);
    --vh-profile-list-hover: var(--vh-rd-slate-100);
    --vh-profile-ring-track: var(--vh-rd-slate-200);
    --vh-profile-page-surface: var(--vh-rd-slate-50);
    --vh-profile-hero-surface: var(--vh-color-white);
    --vh-profile-hero-glow-a: var(--vh-rd-primary-glow);
    --vh-profile-hero-glow-b: var(--vh-rd-primary-tint);
    --vh-profile-blue-hover: var(--vh-rd-primary-soft);
    --vh-skeleton-base: var(--vh-rd-slate-200);
    --vh-skeleton-shine: var(--vh-rd-slate-50);
    --vh-loader-surface: var(--vh-rd-slate-100);
    --vh-input-border: var(--vh-rd-slate-200);
    --vh-input-focus: var(--vh-rd-primary);
    --vh-input-error: var(--vh-rd-danger);
    --vh-input-disabled-bg: var(--vh-rd-slate-100);
    --vh-disabled-bg: var(--vh-rd-slate-100);
    --vh-disabled-text: var(--vh-rd-slate-400);
    --vh-success-soft: rgb(22 163 74 / 0.1);
    --vh-error-soft: rgb(220 38 38 / 0.1);
    --vh-error-ink: var(--vh-rd-danger);

    --vh-font-primary: var(--vh-rd-font-body);
    --vh-font-secondary: var(--vh-rd-font-body);
    /* Keep the compatibility heading token neutral: semantic h1/h2 receive
       Playfair below, while compact headings (including h3) stay Instrument. */
    --vh-font-heading: var(--vh-rd-font-body);
    --vh-input-radius: var(--vh-rd-radius-control);
    --vh-radius-sm: var(--vh-rd-radius-control);
    --vh-radius: var(--vh-rd-radius-control);
    --vh-radius-md: var(--vh-rd-radius-control);
    --vh-radius-lg: var(--vh-rd-radius-card);
    --vh-radius-card: var(--vh-rd-radius-card);
    --vh-radius-card-sm: var(--vh-rd-radius-card);
    --vh-radius-chip: var(--vh-rd-radius-card);
    --vh-radius-pill: var(--vh-rd-radius-pill);
    --vh-shadow-surface: var(--vh-rd-shadow-surface);
    --vh-shadow-surface-hover: var(--vh-rd-shadow-surface);
    --vh-shadow-card: var(--vh-shadow-surface);
    --vh-shadow-pop: var(--vh-rd-shadow-md);
    --vh-shadow-modal: var(--vh-rd-shadow-lg);
    --vh-shadow-cobalt: var(--vh-shadow-surface);
    --vh-shadow-cobalt-lift: var(--vh-shadow-surface-hover);
    --vh-gradient-primary: var(--vh-rd-primary);

    /* LeptonX and Bootstrap consume these directly. */
    --lpx-primary: var(--vh-rd-primary);
    --lpx-primary-rgb: 6, 117, 206;
    --lpx-brand: var(--vh-rd-primary);
    --lpx-brand-rgb: 6, 117, 206;
    --lpx-brand-text: var(--vh-color-white);
    --lpx-radius: var(--vh-rd-radius-control);
    --lpx-content-bg: var(--vh-rd-slate-50);
    --lpx-content-bg-rgb: 248, 250, 252;
    --lpx-content-text: var(--vh-rd-slate-600);
    --lpx-content-text-rgb: 71, 85, 105;
    --lpx-navbar-color: var(--vh-color-white);
    --lpx-navbar-color-rgb: 255, 255, 255;
    --lpx-navbar-text-color: var(--vh-rd-slate-600);
    --lpx-navbar-text-color-rgb: 71, 85, 105;
    --lpx-navbar-active-text-color: var(--vh-rd-primary);
    --lpx-navbar-active-text-color-rgb: 6, 117, 206;
    --lpx-navbar-active-bg-color: var(--vh-rd-primary-soft);
    --lpx-card-bg: var(--vh-color-white);
    --lpx-card-title-text-color: var(--vh-rd-slate-900);
    --lpx-border-color: var(--vh-rd-slate-200);
    --lpx-shadow: var(--vh-rd-shadow-xs);

    --bs-primary: var(--vh-rd-primary);
    --bs-primary-rgb: 6, 117, 206;
    --bs-body-font-family: var(--vh-rd-font-body);
    --bs-body-color: var(--vh-rd-slate-700);
    --bs-body-color-rgb: 51, 65, 85;
    --bs-body-bg: var(--vh-rd-slate-50);
    --bs-body-bg-rgb: 248, 250, 252;
    --bs-secondary-color: var(--vh-rd-slate-500);
    --bs-secondary-color-rgb: 100, 116, 139;
    --bs-tertiary-bg: var(--vh-rd-slate-100);
    --bs-border-color: var(--vh-rd-slate-200);
    --bs-border-radius: var(--vh-rd-radius-control);
    --bs-border-radius-sm: var(--vh-rd-radius-control);
    --bs-border-radius-lg: var(--vh-rd-radius-card);
    --bs-focus-ring-color: var(--vh-rd-primary-ring);
    --bs-link-color: var(--vh-rd-primary);
    --bs-link-hover-color: var(--vh-rd-primary-hover);
}

html[data-vh-design="redesign"][data-vh-color="dark"],
html[data-vh-design="redesign"][data-vh-color="dark"] body {
    color-scheme: dark;
    --vh-text-heading: var(--vh-rd-slate-50);
    --vh-text-body: var(--vh-rd-slate-300);
    --vh-text-muted: var(--vh-rd-slate-400);
    --vh-text-placeholder: var(--vh-rd-slate-500);
    --vh-selection-text: var(--vh-rd-primary-lighter);
    --vh-ink: var(--vh-rd-slate-50);
    --vh-body: var(--vh-rd-slate-300);
    --vh-muted: var(--vh-rd-slate-400);
    --vh-line: var(--vh-rd-slate-800);
    --vh-line-strong: var(--vh-rd-slate-700);
    --vh-surface: var(--vh-rd-slate-900);
    --vh-surface-soft: var(--vh-rd-slate-800);
    --vh-blue-tint: rgb(6 117 206 / 0.16);
    --vh-blue-deep: var(--vh-rd-primary-light);
    --vh-primary-pale: rgb(6 117 206 / 0.25);
    --vh-input-border: var(--vh-rd-slate-700);
    --vh-input-disabled-bg: var(--vh-rd-slate-800);
    --vh-disabled-bg: var(--vh-rd-slate-800);
    --vh-disabled-text: var(--vh-rd-slate-500);
    --vh-secondary: var(--vh-rd-slate-800);
    --vh-secondary-hover: var(--vh-rd-slate-700);
    --vh-secondary-active: var(--vh-rd-slate-600);
    --vh-secondary-soft: var(--vh-rd-slate-800);
    --vh-on-secondary: var(--vh-rd-slate-100);
    --vh-confirm: var(--vh-rd-primary);
    --vh-confirm-hover: var(--vh-rd-primary-hover);
    --vh-confirm-text: var(--vh-on-primary);
    --vh-orange-400: var(--vh-rd-primary);
    --vh-auth-signup-bg: var(--vh-rd-slate-100);
    --vh-auth-signup-hover-bg: var(--vh-color-white);
    --vh-auth-signup-text: var(--vh-rd-slate-900);

    --vh-black-10: var(--vh-rd-slate-900);
    --vh-black-20: var(--vh-rd-slate-800);
    --vh-black-30: var(--vh-rd-slate-700);
    --vh-black-40: var(--vh-rd-slate-600);
    --vh-black-50: var(--vh-rd-slate-400);
    --vh-black-60: var(--vh-rd-slate-300);
    --vh-black-70: var(--vh-rd-slate-200);
    --vh-black-80: var(--vh-rd-slate-100);
    --vh-black-90: var(--vh-rd-slate-50);
    --vh-black-100: var(--vh-color-white);
    --vh-gray-10: var(--vh-rd-slate-900);
    --vh-gray-20: var(--vh-rd-slate-800);
    --vh-gray-30: var(--vh-rd-slate-700);
    --vh-gray-40: var(--vh-rd-slate-600);
    --vh-gray-50: var(--vh-rd-slate-400);
    --vh-gray-60: var(--vh-rd-slate-300);
    --vh-gray-70: var(--vh-rd-slate-200);
    --vh-gray-80: var(--vh-rd-slate-100);
    --vh-gray-90: var(--vh-rd-slate-50);
    --vh-gray-100: var(--vh-color-white);
    --vh-tailwind-gray-200: var(--vh-rd-slate-800);
    --vh-tailwind-gray-300: var(--vh-rd-slate-600);
    --vh-tailwind-gray-500: var(--vh-rd-slate-400);
    --vh-tailwind-gray-600: var(--vh-rd-slate-300);
    --vh-raw-0f62fe: var(--vh-rd-primary-light);
    --vh-raw-155a9e: var(--vh-rd-primary-light);
    --vh-raw-167542: var(--vh-rd-success-light);
    --vh-raw-1b6dc1: var(--vh-rd-primary-light);
    --vh-raw-1b8f5a: var(--vh-rd-success-light);
    --vh-raw-1f2937: var(--vh-rd-slate-50);
    --vh-raw-2563eb: var(--vh-rd-primary-light);
    --vh-raw-26374d: var(--vh-rd-slate-100);
    --vh-raw-405067: var(--vh-rd-slate-300);
    --vh-raw-41505d: var(--vh-rd-slate-300);
    --vh-raw-5d7189: var(--vh-rd-slate-400);
    --vh-raw-7a5200: var(--vh-rd-warning-light);
    --vh-raw-9a5b00: var(--vh-rd-warning-light);
    --vh-raw-9aa3b2: var(--vh-rd-slate-500);
    --vh-raw-9fc7e8: var(--vh-rd-slate-600);
    --vh-raw-a87811: var(--vh-rd-warning-light);
    --vh-raw-b9d4f0: rgb(6 117 206 / 0.24);
    --vh-raw-cde0f5: rgb(6 117 206 / 0.22);
    --vh-raw-cfe0f3: rgb(6 117 206 / 0.22);
    --vh-raw-d6dde3: var(--vh-rd-slate-700);
    --vh-raw-d8dde2: var(--vh-rd-slate-600);
    --vh-raw-d9e1ec: var(--vh-rd-slate-700);
    --vh-raw-e5e7eb: var(--vh-rd-slate-700);
    --vh-raw-e8ecf2: var(--vh-rd-slate-700);
    --vh-raw-e8f1fb: rgb(6 117 206 / 0.18);
    --vh-raw-e9eef3: var(--vh-rd-slate-800);
    --vh-raw-e9f8ef: rgb(22 163 74 / 0.16);
    --vh-raw-ede9fe: rgb(109 73 203 / 0.2);
    --vh-raw-eef1f6: var(--vh-rd-slate-800);
    --vh-raw-f4d58a: rgb(217 119 6 / 0.35);
    --vh-raw-f4f7fe: var(--vh-rd-slate-900);
    --vh-raw-f7f9fc: var(--vh-rd-slate-900);
    --vh-raw-fff4e5: rgb(217 119 6 / 0.16);
    --vh-raw-fff8e8: rgb(217 119 6 / 0.12);
    --vh-profile-neutral-start: var(--vh-rd-slate-600);
    --vh-profile-neutral-end: var(--vh-rd-slate-500);
    --vh-profile-copy: var(--vh-rd-slate-300);
    --vh-profile-copy-muted: var(--vh-rd-slate-400);
    --vh-profile-separator: var(--vh-rd-slate-600);
    --vh-profile-icon-muted: var(--vh-rd-slate-600);
    --vh-profile-meta-muted: var(--vh-rd-slate-500);
    --vh-profile-line: var(--vh-rd-slate-800);
    --vh-profile-soft: var(--vh-rd-slate-800);
    --vh-profile-hover: var(--vh-rd-slate-800);
    --vh-profile-list-hover: var(--vh-rd-slate-800);
    --vh-profile-ring-track: var(--vh-rd-slate-700);
    --vh-profile-page-surface: var(--vh-rd-slate-950);
    --vh-profile-hero-surface: var(--vh-rd-slate-900);
    --vh-profile-hero-glow-a: rgb(6 117 206 / 0.18);
    --vh-profile-hero-glow-b: rgb(6 117 206 / 0.1);
    --vh-profile-blue-hover: rgb(6 117 206 / 0.2);
    --vh-skeleton-base: var(--vh-rd-slate-800);
    --vh-skeleton-shine: var(--vh-rd-slate-700);
    --vh-loader-surface: var(--vh-rd-slate-950);
    --vh-success-soft: rgb(22 163 74 / 0.16);
    --vh-error-soft: rgb(220 38 38 / 0.16);
    --vh-error-ink: var(--vh-rd-danger-light);
    --vh-accent-staff-soft: rgb(109 73 203 / 0.2);

    --vh-shadow-surface: none;
    --vh-shadow-surface-hover: none;
    --vh-shadow-card: var(--vh-shadow-surface);
    --vh-shadow-pop: 0 8px 20px rgb(0 0 0 / 0.38);
    --vh-shadow-modal: 0 18px 40px rgb(0 0 0 / 0.48);
    --vh-shadow-cobalt: var(--vh-shadow-surface);
    --vh-shadow-cobalt-lift: var(--vh-shadow-surface-hover);

    --lpx-content-bg: var(--vh-rd-slate-950);
    --lpx-content-bg-rgb: 2, 6, 23;
    --lpx-content-text: var(--vh-rd-slate-300);
    --lpx-content-text-rgb: 203, 213, 225;
    --lpx-navbar-color: var(--vh-rd-slate-900);
    --lpx-navbar-color-rgb: 15, 23, 42;
    --lpx-navbar-text-color: var(--vh-rd-slate-400);
    --lpx-navbar-text-color-rgb: 148, 163, 184;
    --lpx-navbar-active-text-color: var(--vh-rd-primary-light);
    --lpx-navbar-active-text-color-rgb: 124, 196, 250;
    --lpx-navbar-active-bg-color: rgb(6 117 206 / 0.18);
    --lpx-card-bg: var(--vh-rd-slate-900);
    --lpx-card-title-text-color: var(--vh-rd-slate-50);
    --lpx-border-color: var(--vh-rd-slate-800);
    --lpx-shadow: 0 1px 2px rgb(0 0 0 / 0.3);

    --bs-body-color: var(--vh-rd-slate-200);
    --bs-body-color-rgb: 226, 232, 240;
    --bs-body-bg: var(--vh-rd-slate-950);
    --bs-body-bg-rgb: 2, 6, 23;
    --bs-secondary-color: var(--vh-rd-slate-400);
    --bs-secondary-color-rgb: 148, 163, 184;
    --bs-tertiary-bg: var(--vh-rd-slate-800);
    --bs-border-color: var(--vh-rd-slate-800);
    --bs-link-color: var(--vh-rd-primary-light);
    --bs-link-hover-color: var(--vh-rd-primary-lighter);
}

/* Typography: Playfair is intentionally reserved for semantic headings whose
 * default scale is above 18px. Controls and compact/card headings stay in the
 * highly legible Instrument Sans family. */
html[data-vh-design="redesign"] body,
html[data-vh-design="redesign"] button,
html[data-vh-design="redesign"] input,
html[data-vh-design="redesign"] select,
html[data-vh-design="redesign"] textarea,
html[data-vh-design="redesign"] .lpx-heading,
html[data-vh-design="redesign"] .lpx-topbar,
html[data-vh-design="redesign"] .lpx-mobile-navbar,
html[data-vh-design="redesign"] .lpx-mobile-menu {
    font-family: var(--vh-rd-font-body);
}

html[data-vh-design="redesign"] body :is(h1, h2, .h1, .h2, [class*="display-"]) {
    /* Component-isolated page selectors often set a font shorthand. This
       adapter must win so semantic display headings actually preview the
       Redesign type hierarchy without editing feature layouts. */
    font-family: var(--vh-rd-font-display) !important;
    letter-spacing: -0.018em;
}

html[data-vh-design="redesign"] body :is(h3, h4, h5, h6, .h3, .h4, .h5, .h6, label, legend, .btn, .badge, .card-title, .modal-title) {
    font-family: var(--vh-rd-font-body);
    letter-spacing: normal;
}

html[data-vh-design="redesign"] body :is(h3, .h3) {
    font-size: 1.125rem;
}

html[data-vh-design="redesign"] body {
    background: var(--lpx-content-bg);
    color: var(--vh-text-body);
    font-size: 0.9375rem;
    line-height: 1.5;
    text-rendering: optimizeLegibility;
}

html[data-vh-design="redesign"] :is(
    a,
    button:not(.vh-dd-btn),
    [tabindex]:not(input):not(select):not(textarea):not(.vh-dd-item)
):focus-visible {
    outline: 2px solid var(--vh-rd-primary);
    outline-offset: 2px;
}

/* LeptonX chrome: preserve the locked side-menu dimensions and layout while
 * repainting surfaces, borders and menu states. */
html[data-vh-design="redesign"] :is(.lpx-sidebar, .lpx-sidebar-container, .lpx-nav-menu) {
    background-color: var(--lpx-navbar-color);
}

html[data-vh-design="redesign"] .lpx-sidebar-container {
    border-right: 1px solid var(--lpx-border-color);
}

html[data-vh-design="redesign"] .lpx-content-container {
    background-color: var(--lpx-content-bg);
}

/* LeptonX reuses --lpx-shadow for both content chrome and floating menus.
 * Flatten only structural containers so dropdown/context-menu elevation stays intact. */
html[data-vh-design="redesign"] :is(.lpx-content-container, .lpx-topbar-container, .lpx-footbar-container),
html[data-vh-design="redesign"] #lpx-wrapper.hover-trigger .lpx-content-container {
    box-shadow: var(--vh-shadow-surface);
}

html[data-vh-design="redesign"] :is(.lpx-content-wrapper, .lpx-topbar-container .lpx-topbar, .lpx-footbar-container .lpx-footbar) {
    border-color: var(--lpx-border-color);
}

html[data-vh-design="redesign"] .lpx-topbar-container .lpx-topbar {
    border-radius: var(--vh-rd-radius-card) var(--vh-rd-radius-card) 0 0;
}

html[data-vh-design="redesign"] .lpx-footbar-container .lpx-footbar {
    border-radius: 0 0 var(--vh-rd-radius-card) var(--vh-rd-radius-card);
}

html[data-vh-design="redesign"] .lpx-nav-menu .lpx-menu-item-link {
    border-radius: var(--vh-rd-radius-control);
    margin: 2px 10px;
    padding-left: 12px;
    padding-right: 12px;
    width: calc(100% - 20px);
    transition: background-color 120ms ease, color 120ms ease;
}

html[data-vh-design="redesign"] .lpx-nav-menu .lpx-inner-menu-item .lpx-menu-item-link {
    padding-left: 48px;
}

html[data-vh-design="redesign"] .lpx-nav-menu .lpx-menu-item-link:hover {
    background: var(--lpx-navbar-active-bg-color);
    color: var(--lpx-navbar-active-text-color);
}

html[data-vh-design="redesign"] .lpx-nav-menu .lpx-menu-item-link:is(.selected, .expanded) {
    background: var(--vh-rd-primary);
    color: var(--vh-on-primary);
    box-shadow: var(--vh-shadow-surface);
}

html[data-vh-design="redesign"] .lpx-nav-menu .lpx-menu-item-link:is(.selected, .expanded) :is(.lpx-menu-item-icon, .dd-icon) {
    color: var(--vh-on-primary);
}

/* Anonymous acquisition actions belong to the navigation, but read as CTAs:
 * a quiet sign-in action followed by the primary signup action. */
html[data-vh-design="redesign"] .lpx-sidebar-container .lpx-nav:has(.lpx-menu-item-link.vh-anonymous-auth) {
    display: flex;
    flex-direction: column;
}

html[data-vh-design="redesign"] .lpx-sidebar-container .lpx-nav-menu:has(> .outer-menu-item > .lpx-menu-item-link.vh-anonymous-auth) {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    padding-bottom: 12px;
}

html[data-vh-design="redesign"] .lpx-nav-menu > .outer-menu-item:has(> .lpx-menu-item-link.vh-anonymous-signin) {
    padding-top: 24px;
    position: relative;
}

html[data-vh-design="redesign"] .lpx-sidebar-container .lpx-nav-menu > .outer-menu-item:has(> .lpx-menu-item-link.vh-anonymous-signin) {
    margin-top: auto;
}

html[data-vh-design="redesign"] .lpx-nav-menu > .outer-menu-item:has(> .lpx-menu-item-link.vh-anonymous-signin)::before {
    background: var(--vh-line);
    content: "";
    height: 1px;
    left: 16px;
    position: absolute;
    right: 16px;
    top: 11px;
}

html[data-vh-design="redesign"] .lpx-nav-menu .lpx-menu-item-link.vh-anonymous-auth {
    align-items: center;
    border: 1px solid var(--vh-primary);
    display: flex;
    font-weight: 700;
    justify-content: center;
    min-height: 40px;
    padding-left: 12px;
    padding-right: 12px;
}

html[data-vh-design="redesign"] .lpx-nav-menu .lpx-menu-item-link.vh-anonymous-signin {
    background: var(--vh-surface);
    border-color: var(--vh-line-strong);
    color: var(--vh-text-body);
}

html[data-vh-design="redesign"] .lpx-nav-menu .lpx-menu-item-link.vh-anonymous-signin:hover {
    background: var(--vh-surface-soft);
    border-color: var(--vh-text-muted);
    color: var(--vh-ink);
}

html[data-vh-design="redesign"] .lpx-nav-menu .lpx-menu-item-link.vh-anonymous-signup,
html[data-vh-design="redesign"] .lpx-nav-menu .lpx-menu-item-link.vh-anonymous-signup:is(.selected, .expanded) {
    background: var(--vh-auth-signup-bg);
    border-color: var(--vh-auth-signup-bg);
    color: var(--vh-auth-signup-text);
}

html[data-vh-design="redesign"] .lpx-nav-menu .lpx-menu-item-link.vh-anonymous-signup:hover {
    background: var(--vh-auth-signup-hover-bg);
    border-color: var(--vh-auth-signup-hover-bg);
    color: var(--vh-auth-signup-text);
}

html[data-vh-design="redesign"] .lpx-nav-menu .lpx-menu-item-link.vh-anonymous-auth :is(.lpx-menu-item-icon, .dd-icon) {
    color: inherit;
}

/* LeptonX adds a separate anonymous Login tab on mobile. The primary routes
 * drawer already contains our Sign in CTA, so remove only the native duplicate
 * and its list slot. */
html[data-vh-design="redesign"] .lpx-mobile-navbar-container .lpx-mobile-nav-tabs > li.lpx-mobile-nav-tab:has(> a.lpx-mobile-nav-item[href="account/login"]:not(.vh-anonymous-auth)) {
    display: none !important;
}

html[data-vh-design="redesign"] .lpx-menu-filter {
    background: var(--vh-surface-soft);
    border-color: var(--vh-line);
    border-radius: var(--vh-rd-radius-control);
}

html[data-vh-design="redesign"] .lpx-menu-filter .menu-filter-input {
    background: var(--vh-transparent);
    color: var(--vh-ink);
}

/* Bootstrap and Blazorise primitives. Bootstrap's native anchor rule already
 * consumes --bs-link-color; avoid a higher-specificity blanket anchor selector
 * because many page CTAs are links styled as buttons. */
html[data-vh-design="redesign"] body .btn {
    border-radius: var(--vh-rd-radius-control);
    font-family: var(--vh-rd-font-body);
    font-weight: 600;
    box-shadow: none;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

html[data-vh-design="redesign"] body .btn-primary {
    --bs-btn-bg: var(--vh-rd-primary);
    --bs-btn-border-color: var(--vh-rd-primary);
    --bs-btn-hover-bg: var(--vh-rd-primary-hover);
    --bs-btn-hover-border-color: var(--vh-rd-primary-hover);
    --bs-btn-active-bg: var(--vh-rd-primary-active);
    --bs-btn-active-border-color: var(--vh-rd-primary-active);
    --bs-btn-focus-shadow-rgb: 6, 117, 206;
}

html[data-vh-design="redesign"] body .btn-secondary {
    --bs-btn-color: var(--vh-rd-slate-700);
    --bs-btn-bg: var(--vh-rd-slate-100);
    --bs-btn-border-color: var(--vh-rd-slate-200);
    --bs-btn-hover-color: var(--vh-rd-slate-900);
    --bs-btn-hover-bg: var(--vh-rd-slate-200);
    --bs-btn-hover-border-color: var(--vh-rd-slate-300);
    --bs-btn-active-color: var(--vh-rd-slate-900);
    --bs-btn-active-bg: var(--vh-rd-slate-300);
    --bs-btn-active-border-color: var(--vh-rd-slate-300);
}

html[data-vh-design="redesign"][data-vh-color="dark"] body .btn-secondary {
    --bs-btn-color: var(--vh-rd-slate-200);
    --bs-btn-bg: var(--vh-rd-slate-800);
    --bs-btn-border-color: var(--vh-rd-slate-700);
    --bs-btn-hover-color: var(--vh-rd-slate-50);
    --bs-btn-hover-bg: var(--vh-rd-slate-700);
    --bs-btn-hover-border-color: var(--vh-rd-slate-600);
    --bs-btn-active-color: var(--vh-color-white);
    --bs-btn-active-bg: var(--vh-rd-slate-600);
    --bs-btn-active-border-color: var(--vh-rd-slate-600);
}

html[data-vh-design="redesign"] body .btn-outline-primary {
    --bs-btn-color: var(--vh-rd-primary);
    --bs-btn-border-color: var(--vh-rd-primary);
    --bs-btn-hover-bg: var(--vh-rd-primary);
    --bs-btn-hover-border-color: var(--vh-rd-primary);
    --bs-btn-active-bg: var(--vh-rd-primary-active);
    --bs-btn-active-border-color: var(--vh-rd-primary-active);
}

html[data-vh-design="redesign"] body :is(.vh-btn-secondary, .btn.vh-btn-secondary) {
    --bs-btn-color: var(--vh-rd-slate-700);
    --bs-btn-bg: var(--vh-rd-slate-100);
    --bs-btn-border-color: var(--vh-rd-slate-200);
    --bs-btn-hover-color: var(--vh-rd-slate-900);
    --bs-btn-hover-bg: var(--vh-rd-slate-200);
    --bs-btn-hover-border-color: var(--vh-rd-slate-300);
    --bs-btn-active-color: var(--vh-rd-slate-900);
    --bs-btn-active-bg: var(--vh-rd-slate-300);
    --bs-btn-active-border-color: var(--vh-rd-slate-300);
    background: var(--vh-rd-slate-100);
    border-color: var(--vh-rd-slate-200);
    color: var(--vh-rd-slate-700);
}

html[data-vh-design="redesign"] body :is(.vh-btn-secondary, .btn.vh-btn-secondary):hover {
    background: var(--vh-rd-slate-200);
    border-color: var(--vh-rd-slate-300);
    color: var(--vh-rd-slate-900);
}

html[data-vh-design="redesign"] body :is(.vh-btn-outline-secondary, .btn.vh-btn-outline-secondary) {
    --bs-btn-color: var(--vh-rd-slate-700);
    --bs-btn-border-color: var(--vh-rd-slate-300);
    --bs-btn-hover-color: var(--vh-rd-slate-900);
    --bs-btn-hover-bg: var(--vh-rd-slate-100);
    --bs-btn-hover-border-color: var(--vh-rd-slate-400);
    color: var(--vh-rd-slate-700);
    border-color: var(--vh-rd-slate-300);
}

html[data-vh-design="redesign"] body .vh-chip-secondary {
    background: var(--vh-rd-slate-100);
    border-color: var(--vh-rd-slate-300);
    color: var(--vh-rd-slate-700);
}

html[data-vh-design="redesign"][data-vh-color="dark"] body :is(.vh-btn-secondary, .btn.vh-btn-secondary) {
    --bs-btn-color: var(--vh-rd-slate-200);
    --bs-btn-bg: var(--vh-rd-slate-800);
    --bs-btn-border-color: var(--vh-rd-slate-700);
    --bs-btn-hover-color: var(--vh-rd-slate-50);
    --bs-btn-hover-bg: var(--vh-rd-slate-700);
    --bs-btn-hover-border-color: var(--vh-rd-slate-600);
    background: var(--vh-rd-slate-800);
    border-color: var(--vh-rd-slate-700);
    color: var(--vh-rd-slate-200);
}

html[data-vh-design="redesign"][data-vh-color="dark"] body :is(.vh-btn-secondary, .btn.vh-btn-secondary):hover {
    background: var(--vh-rd-slate-700);
    border-color: var(--vh-rd-slate-600);
    color: var(--vh-rd-slate-50);
}

html[data-vh-design="redesign"][data-vh-color="dark"] body :is(.vh-btn-outline-secondary, .btn.vh-btn-outline-secondary) {
    color: var(--vh-rd-slate-300);
    border-color: var(--vh-rd-slate-600);
}

html[data-vh-design="redesign"][data-vh-color="dark"] body .vh-chip-secondary {
    background: var(--vh-rd-slate-800);
    border-color: var(--vh-rd-slate-700);
    color: var(--vh-rd-slate-300);
}

html[data-vh-design="redesign"] body :is(.form-control, .form-select, .input-group-text) {
    background-color: var(--vh-surface) !important;
    border-color: var(--vh-input-border) !important;
    border-radius: var(--vh-rd-radius-control);
    color: var(--vh-ink);
    font-family: var(--vh-rd-font-body);
}

html[data-vh-design="redesign"] body :is(.form-control, .form-select)::placeholder {
    color: var(--vh-text-placeholder);
}

html[data-vh-design="redesign"] body :is(.form-control, .form-select):focus {
    border-color: var(--vh-rd-primary) !important;
    box-shadow: 0 0 0 3px var(--vh-rd-primary-ring) !important;
}

html[data-vh-design="redesign"] body :is(.form-control, .form-select):disabled,
html[data-vh-design="redesign"] body .form-control[readonly] {
    background: var(--vh-input-disabled-bg) !important;
    color: var(--vh-disabled-text);
}

html[data-vh-design="redesign"] body .input-group > :not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

html[data-vh-design="redesign"] body .input-group > :not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

html[data-vh-design="redesign"] body .form-check-input:checked {
    background-color: var(--vh-rd-primary) !important;
    border-color: var(--vh-rd-primary) !important;
}

html[data-vh-design="redesign"] body .form-check-input:focus {
    border-color: var(--vh-rd-primary);
    box-shadow: 0 0 0 3px var(--vh-rd-primary-ring);
}

html[data-vh-design="redesign"] body .card {
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-rd-radius-card);
    color: var(--vh-text-body);
    box-shadow: var(--vh-shadow-surface);
}

html[data-vh-design="redesign"] body :is(.modal-content, .offcanvas) {
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-rd-radius-card);
    color: var(--vh-text-body);
    box-shadow: var(--vh-shadow-modal);
}

html[data-vh-design="redesign"] body .toast {
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-rd-radius-card);
    color: var(--vh-text-body);
    box-shadow: var(--vh-shadow-pop);
}

html[data-vh-design="redesign"] body :is(.card-header, .card-footer, .modal-header, .modal-footer) {
    background: var(--vh-transparent);
    border-color: var(--vh-line);
}

html[data-vh-design="redesign"] body :is(.dropdown-menu, .popover) {
    background: var(--vh-surface);
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-rd-radius-card);
    box-shadow: var(--vh-shadow-pop);
    color: var(--vh-text-body);
}

html[data-vh-design="redesign"] body :is(.dropdown-item, .list-group-item) {
    color: var(--vh-text-body);
}

html[data-vh-design="redesign"] body .dropdown-item:is(:hover, :focus, .active),
html[data-vh-design="redesign"] body .list-group-item-action:is(:hover, :focus) {
    background: var(--vh-rd-primary-soft);
    color: var(--vh-rd-primary);
}

html[data-vh-design="redesign"] body .list-group-item {
    background: var(--vh-surface);
    border-color: var(--vh-line);
}

html[data-vh-design="redesign"] body :is(.badge, .vh-pill, .vh-pill-tonal) {
    border-radius: var(--vh-rd-radius-pill);
}

html[data-vh-design="redesign"] body .table {
    --bs-table-bg: var(--vh-transparent);
    --bs-table-color: var(--vh-text-body);
    --bs-table-border-color: var(--vh-line);
    --bs-table-hover-bg: var(--vh-rd-primary-soft);
    --bs-table-hover-color: var(--vh-ink);
}

html[data-vh-design="redesign"] body .table > thead > tr > th {
    color: var(--vh-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

html[data-vh-design="redesign"] body .nav-tabs {
    border-color: var(--vh-line);
    gap: 4px;
}

html[data-vh-design="redesign"] body .nav-tabs .nav-link {
    border-radius: var(--vh-rd-radius-control) var(--vh-rd-radius-control) 0 0;
    color: var(--vh-text-muted);
}

html[data-vh-design="redesign"] body .nav-tabs .nav-link:is(:hover, :focus, .active) {
    border-color: var(--vh-line) var(--vh-line) var(--vh-surface);
    color: var(--vh-rd-primary);
}

html[data-vh-design="redesign"] body .nav-tabs .nav-link.active {
    background: var(--vh-surface);
}

html[data-vh-design="redesign"] body .pagination {
    --bs-pagination-color: var(--vh-rd-primary);
    --bs-pagination-bg: var(--vh-surface);
    --bs-pagination-border-color: var(--vh-line);
    --bs-pagination-hover-color: var(--vh-rd-primary-hover);
    --bs-pagination-hover-bg: var(--vh-rd-primary-soft);
    --bs-pagination-hover-border-color: var(--vh-line-strong);
    --bs-pagination-focus-box-shadow: 0 0 0 3px var(--vh-rd-primary-ring);
    --bs-pagination-active-bg: var(--vh-rd-primary);
    --bs-pagination-active-border-color: var(--vh-rd-primary);
    --bs-pagination-disabled-bg: var(--vh-surface-soft);
    --bs-pagination-disabled-border-color: var(--vh-line);
}

html[data-vh-design="redesign"] body .page-link {
    border-radius: var(--vh-rd-radius-control);
    margin-inline: 2px;
}

html[data-vh-design="redesign"] body :is(.alert, .accordion-item, .accordion-button) {
    border-color: var(--vh-line);
    border-radius: var(--vh-rd-radius-card);
}

html[data-vh-design="redesign"] body .accordion-item,
html[data-vh-design="redesign"] body .accordion-button {
    background: var(--vh-surface);
    color: var(--vh-ink);
}

html[data-vh-design="redesign"] body .accordion-button:not(.collapsed) {
    background: var(--vh-rd-primary-soft);
    color: var(--vh-rd-primary);
    box-shadow: inset 0 -1px 0 var(--vh-line);
}

html[data-vh-design="redesign"] body .progress {
    background: var(--vh-rd-slate-200);
    border-radius: var(--vh-rd-radius-pill);
}

html[data-vh-design="redesign"][data-vh-color="dark"] body .progress {
    background: var(--vh-rd-slate-800);
}

html[data-vh-design="redesign"] body .progress-bar {
    background: var(--vh-rd-primary);
}

/* Existing shared VanHack primitives inherit the redesigned token geometry;
 * only tame the old lift/gradient signatures that conflict with the quieter
 * handoff language. */
html[data-vh-design="redesign"] body :is(.vh-card, .vh-row-card) {
    border-radius: var(--vh-rd-radius-card);
    box-shadow: var(--vh-shadow-surface);
}

html[data-vh-design="redesign"] body :is(.vh-card-lift, .vh-row-card) {
    transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

html[data-vh-design="redesign"] body .vh-card-lift:hover,
html[data-vh-design="redesign"] body .vh-row-card.clickable:hover {
    border-color: var(--vh-rd-slate-300);
    box-shadow: var(--vh-shadow-surface-hover);
    transform: none;
}

html[data-vh-design="redesign"] body .vh-btn-gradient {
    background: var(--vh-rd-primary);
    border-radius: var(--vh-rd-radius-control);
    box-shadow: none;
}

html[data-vh-design="redesign"] body .vh-btn-gradient:hover {
    background: var(--vh-rd-primary-hover);
    box-shadow: none;
    filter: none;
}

@media (prefers-reduced-motion: reduce) {
    html[data-vh-design="redesign"] *,
    html[data-vh-design="redesign"] *::before,
    html[data-vh-design="redesign"] *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}