/* ============================================================================
   Vehicly Design System
   ----------------------------------------------------------------------------
   Single source of truth for design tokens, typography, components, and
   interaction patterns. Import AFTER app.css on every page.
   ============================================================================ */

/* -- 0. Global Reset -------------------------------------------------------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* -- 0b. Font Imports ------------------------------------------------------- */
/* Fonts loaded via <link> in each HTML page (Inter).
   @import inside CSS breaks due to semicolons in Google Fonts variable-axis URLs. */

/* -- 1. Design Tokens ------------------------------------------------------- */

:root {
    /* -- Font Families -- */
    --vh-font-display: 'Inter', system-ui, -apple-system, sans-serif;
    --vh-font-body:    'Inter', system-ui, -apple-system, sans-serif;

    /* -- Primary Palette (Honey Yellow) -- */
    --vh-primary:        #F2C94C;
    --vh-primary-rgb:    242, 201, 76;
    --vh-primary-hover:  #E5B93A;
    --vh-primary-deep:   #D4A72E;
    --vh-primary-soft:   rgba(242, 201, 76, .08);
    --vh-primary-active: rgba(242, 201, 76, .15);
    --vh-primary-border: rgba(242, 201, 76, .30);
    --vh-primary-light:  rgba(242, 201, 76, .12);
    --vh-primary-dark:   #C49A22;

    /* Text on primary (dark on yellow for contrast) */
    --vh-on-primary:     #1a1a1a;

    /* -- Secondary -- */
    --vh-secondary:        #44403c;
    --vh-secondary-hover:  #57534e;
    --vh-secondary-soft:   rgba(68, 64, 60, .06);

    /* -- Neutral Text (warm stone tones) -- */
    --vh-text:           #1c1917;
    --vh-text-secondary: #57534e;
    --vh-text-tertiary:  #a8a29e;
    --vh-text-muted:     #6b6560;

    /* -- Surfaces (warm off-white) -- */
    --vh-bg:             #faf9f7;
    --vh-surface:        #ffffff;
    --vh-highlight:      #fffcf0;
    --vh-border:         #e7e5e4;

    /* -- Semantic: Error -- */
    --vh-error:          #dc2626;
    --vh-error-rgb:      220, 38, 38;
    --vh-error-bg:       #fef2f2;
    --vh-error-border:   #fecaca;

    /* -- Semantic: Success -- */
    --vh-success:        #16a34a;
    --vh-success-rgb:    22, 163, 74;
    --vh-success-bg:     #f0fdf4;
    --vh-success-border: #bbf7d0;

    /* -- Semantic: Info -- */
    --vh-info:           #3b82f6;
    --vh-info-rgb:       59, 130, 246;
    --vh-info-bg:        #eff6ff;
    --vh-info-border:    #bfdbfe;

    /* -- Semantic: Warning -- */
    --vh-warning:        #f59e0b;
    --vh-warning-rgb:    245, 158, 11;
    --vh-warning-bg:     #fffbeb;
    --vh-warning-border: #fde68a;

    /* -- Border Radius Scale (soft & premium) -- */
    --radius-xs:    8px;
    --radius-sm:    10px;
    --radius-md:    12px;
    --radius-lg:    18px;
    --radius-xl:    22px;
    --radius-2xl:   28px;
    --radius-pill:  9999px;
    --radius-full:  50%;

    /* -- Shadow Scale (warm golden tint) -- */
    --shadow-none:     none;
    --shadow-xs:       0 1px 2px rgba(178, 150, 90, .04);
    --shadow-sm:       0 1px 3px rgba(178, 150, 90, .06), 0 1px 2px rgba(178, 150, 90, .04);
    --shadow-md:       0 4px 6px -1px rgba(178, 150, 90, .07), 0 2px 4px -2px rgba(178, 150, 90, .05);
    --shadow-lg:       0 10px 15px -3px rgba(178, 150, 90, .08), 0 4px 6px -4px rgba(178, 150, 90, .04);
    --shadow-xl:       0 20px 25px -5px rgba(178, 150, 90, .08), 0 8px 10px -6px rgba(178, 150, 90, .04);
    --shadow-2xl:      0 25px 50px -12px rgba(178, 150, 90, .18);
    --shadow-modal:    0 24px 48px -12px rgba(178, 150, 90, .2);
    --shadow-focus:    0 0 0 3px rgba(242, 201, 76, .3);
    --shadow-error:    0 0 0 3px rgba(220, 38, 38, .12);
    --shadow-success:  0 0 0 3px rgba(var(--vh-success-rgb), .12);

    /* -- Transition Timing -- */
    --ease:            cubic-bezier(.4, 0, .2, 1);
    --ease-spring:     cubic-bezier(.34, 1.56, .64, 1);
    --ease-out-expo:   cubic-bezier(.22, 1, .36, 1);
    --duration-micro:  .1s;
    --duration-fast:   .15s;
    --duration-base:   .25s;
    --duration-medium: .3s;
    --duration-slow:   .4s;
    --duration-enter:  .5s;

    /* -- Transition Shorthands -- */
    --transition-fast:   var(--duration-fast) var(--ease);
    --transition-normal: var(--duration-medium) var(--ease);
    --transition-slow:   var(--duration-enter) var(--ease);

    /* -- Spacing Scale (4px base) -- */
    --space-0:  0;          /*  0px */
    --space-px: 1px;        /*  1px */
    --space-0-5: 0.125rem;  /*  2px */
    --space-1:  0.25rem;    /*  4px */
    --space-1-5: 0.375rem;  /*  6px */
    --space-2:  0.5rem;     /*  8px */
    --space-2-5: 0.625rem;  /* 10px */
    --space-3:  0.75rem;    /* 12px */
    --space-3-5: 0.875rem;  /* 14px */
    --space-4:  1rem;       /* 16px */
    --space-5:  1.25rem;    /* 20px */
    --space-6:  1.5rem;     /* 24px */
    --space-7:  1.75rem;    /* 28px */
    --space-8:  2rem;       /* 32px */
    --space-9:  2.25rem;    /* 36px */
    --space-10: 2.5rem;     /* 40px */
    --space-12: 3rem;       /* 48px */
    --space-14: 3.5rem;     /* 56px */
    --space-16: 4rem;       /* 64px */
    --space-20: 5rem;       /* 80px */
    --space-24: 6rem;       /* 96px */

    /* -- Z-Index Layers -- */
    --z-base:       1;
    --z-dropdown:   1300;
    --z-sticky:     1200;
    --z-sidebar:    1199;
    --z-overlay:    5000;
    --z-toast:      6000;
    --z-tooltip:    7000;
    --z-scroll-top: 9999;
    --z-consent:    10000;
    --z-badge:      10002;
    --z-skip:       99999;

    /* -- Container Widths -- */
    --container-full:    1400px;
    --container-header:  1280px;
    --container-wide:    1200px;
    --container-section: 1000px;
    --container-content: 820px;
    --container-narrow:  720px;
    --container-form:    680px;

    /* -- Typography Scale -- */
    --text-display:   clamp(2.25rem, 4.5vw + 1rem, 3.5rem);
    --text-headline:  1.65rem;
    --text-subhead:   1.15rem;
    --text-body:      0.95rem;
    --text-body-sm:   0.9rem;
    --text-card:      0.85rem;
    --text-label:     0.78rem;
    --text-caption:   0.75rem;
    --text-micro:     0.65rem;
    --text-overline:  0.72rem;

    /* -- Line Heights -- */
    --leading-tight:   1.3;
    --leading-normal:  1.6;
    --leading-relaxed: 1.8;

    /* -- Font Weight Scale -- */
    --weight-normal:  400;
    --weight-medium:  500;
    --weight-semi:    600;
    --weight-bold:    700;
    --weight-extra:   800;

    /* -- Shorthand Aliases -- */
    --honey:           var(--vh-primary);
    --honey-dark:      var(--vh-primary-hover);
    --honey-darker:    var(--vh-primary-hover);
    --honey-deeper:    var(--vh-primary-deep);
    --honey-deep:      var(--vh-primary-deep);
    --honey-soft:      var(--vh-primary-soft);
    --honey-border:    var(--vh-primary-border);
    --text:            var(--vh-text);
    --text-2:          var(--vh-text-secondary);
    --text-secondary:  var(--vh-text-secondary);
    --text-3:          var(--vh-text-tertiary);
    --text-tertiary:   var(--vh-text-tertiary);
    --text-4:          var(--vh-text-tertiary);
    --border:          var(--vh-border);
    --bg:              var(--vh-bg);
    --bg-alt:          var(--vh-bg);
    --bg-highlight:    var(--vh-highlight);
    --surface:         var(--vh-surface);
    --error:           var(--vh-error);
    --error-bg:        var(--vh-error-bg);
    --error-border:    var(--vh-error-border);
    --success:         var(--vh-success);
    --success-bg:      var(--vh-success-bg);
    --success-border:  var(--vh-success-border);
    --radius:          var(--radius-md);
    --warning:         var(--vh-warning);
    --warning-bg:      var(--vh-warning-bg);
    --warning-border:  var(--vh-warning-border);

    /* -- Verdict / Status Colors -- */
    --good:            #059669;
    --good-bg:         #ecfdf5;
    --good-border:     #a7f3d0;
    --fair:            var(--vh-warning);
    --fair-bg:         #fffbeb;
    --fair-border:     #fde68a;
    --bad:             #dc2626;
    --bad-bg:          #fef2f2;
    --bad-border:      #fecaca;
}


/* -- 1b. Global Base Styles ------------------------------------------------- */

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--vh-font-body, 'Inter', system-ui, -apple-system, sans-serif);
    color: var(--vh-text, #1c1917);
    background: var(--vh-bg, #faf9f7);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--vh-font-display, var(--vh-font-body, 'Inter', system-ui, sans-serif));
    color: var(--vh-text, #1c1917);
}

/* -- 1b-ii. Global Scrollbar ------------------------------------------------ */
/* WebKit (Chrome, Safari, Edge) */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--vh-bg, #faf9f7);
}

::-webkit-scrollbar-thumb {
    background: var(--vh-border, #e7e5e4);
    border-radius: var(--radius-pill, 9999px);
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--vh-text-tertiary, #a8a29e);
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* Firefox -- apply only to html to avoid forcing thin scrollbar on everything */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--vh-border, #e7e5e4) transparent;
}

/* Dark-section scrollbar override (use on dark backgrounds) */
.vh-dark-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .05);
}

.vh-dark-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .18);
    border: 2px solid transparent;
    background-clip: content-box;
}

.vh-dark-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, .32);
    border: 2px solid transparent;
    background-clip: content-box;
}

.vh-dark-scroll {
    scrollbar-color: rgba(255, 255, 255, .18) transparent;
}

/* -- 1b-iii. Selection Highlight -------------------------------------------- */

::selection {
    background: rgba(242, 201, 76, .25);
    color: var(--vh-text, #1c1917);
}

/* -- 1b-iv. Placeholder Styling --------------------------------------------- */

::placeholder {
    color: var(--vh-text-tertiary, #a8a29e);
    opacity: 1;
    transition: opacity var(--duration-base, .25s) var(--ease, cubic-bezier(.4,0,.2,1));
}

::-webkit-input-placeholder {
    color: var(--vh-text-tertiary, #a8a29e);
}

input:focus::placeholder,
textarea:focus::placeholder {
    opacity: 0.4;
}

/* -- 1c. Interactive Element Transitions ------------------------------------ */

a,
button,
input,
select,
textarea,
[role="button"] {
    transition:
        color var(--duration-fast, .15s) var(--ease, cubic-bezier(.4,0,.2,1)),
        background var(--duration-fast, .15s) var(--ease, cubic-bezier(.4,0,.2,1)),
        border-color var(--duration-fast, .15s) var(--ease, cubic-bezier(.4,0,.2,1)),
        box-shadow var(--duration-fast, .15s) var(--ease, cubic-bezier(.4,0,.2,1)),
        transform var(--duration-fast, .15s) var(--ease, cubic-bezier(.4,0,.2,1)),
        opacity var(--duration-fast, .15s) var(--ease, cubic-bezier(.4,0,.2,1));
}

/* -- 1d. Consistent Button Hover States ------------------------------------- */
/* Scoped to design-system buttons only to avoid interfering with page-specific buttons */

.vh-btn:not(:disabled):active,
.vh-btn-base:not(:disabled):active {
    transform: translateY(0) scale(0.98);
    transition-duration: var(--duration-micro, .1s);
}

/* -- 1e. Consistent Input Focus Glow ---------------------------------------- */

input:focus,
select:focus,
textarea:focus,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    border-color: var(--vh-primary, #F2C94C);
    box-shadow: 0 0 0 3px rgba(242, 201, 76, .2), 0 0 0 1px var(--vh-primary, #F2C94C);
    outline: none;
}

/* -- 1f. Glassmorphism Card Base -------------------------------------------- */
/* isolation: isolate creates a stacking context so backdrop-filter doesn't
   bleed through nested elements.  will-change hints the compositor.          */

.vh-glass {
    position: relative;
    isolation: isolate;
    background: rgba(255, 255, 255, .7);
    -webkit-backdrop-filter: blur(16px) saturate(1.6);
    backdrop-filter: blur(16px) saturate(1.6);
    border: 1px solid rgba(255, 255, 255, .25);
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(178,150,90,.07)), inset 0 1px 0 rgba(255, 255, 255, .4);
    will-change: backdrop-filter;
}

.vh-glass-dark {
    position: relative;
    isolation: isolate;
    background: rgba(28, 25, 23, .6);
    -webkit-backdrop-filter: blur(16px) saturate(1.6);
    backdrop-filter: blur(16px) saturate(1.6);
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(178,150,90,.08)), inset 0 1px 0 rgba(255, 255, 255, .05);
    color: rgba(255, 255, 255, .9);
    will-change: backdrop-filter;
}

.vh-glass-subtle {
    position: relative;
    isolation: isolate;
    background: rgba(255, 255, 255, .4);
    -webkit-backdrop-filter: blur(8px) saturate(1.2);
    backdrop-filter: blur(8px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, .15);
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(178,150,90,.04));
    will-change: backdrop-filter;
}

.vh-glass-card {
    position: relative;
    isolation: isolate;
    background: rgba(255, 255, 255, .55);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    backdrop-filter: blur(12px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: var(--radius-lg, 18px);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(178,150,90,.06)), inset 0 1px 0 rgba(255, 255, 255, .3);
    will-change: backdrop-filter;
    transition:
        transform var(--duration-base, .25s) var(--ease, cubic-bezier(.4,0,.2,1)),
        box-shadow var(--duration-base, .25s) var(--ease, cubic-bezier(.4,0,.2,1)),
        border-color var(--duration-base, .25s) var(--ease, cubic-bezier(.4,0,.2,1)),
        background var(--duration-base, .25s) var(--ease, cubic-bezier(.4,0,.2,1));
}

.vh-glass-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(178,150,90,.08)), inset 0 1px 0 rgba(255, 255, 255, .4);
    border-color: var(--vh-primary-border, rgba(242,201,76,.30));
    background: rgba(255, 255, 255, .65);
}

/* Glassmorphism fallback for browsers without backdrop-filter */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .vh-glass          { background: rgba(255, 255, 255, .92); }
    .vh-glass-dark     { background: rgba(28, 25, 23, .92); }
    .vh-glass-subtle   { background: rgba(255, 255, 255, .85); }
    .vh-glass-card     { background: rgba(255, 255, 255, .88); }
    .vh-glass-card:hover { background: rgba(255, 255, 255, .94); }
}


/* -- 2. Typography ---------------------------------------------------------- */

.vh-display {
    font-family: var(--vh-font-display);
    font-size: var(--text-display);
    font-weight: var(--weight-bold);
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.vh-headline {
    font-family: var(--vh-font-display);
    font-size: var(--text-headline);
    font-weight: var(--weight-bold);
    letter-spacing: -0.02em;
    line-height: var(--leading-tight);
}

.vh-subhead {
    font-size: var(--text-subhead);
    font-weight: var(--weight-semi);
    line-height: var(--leading-tight);
}

.vh-body {
    font-size: var(--text-body);
    font-weight: var(--weight-normal);
    line-height: var(--leading-normal);
}

.vh-body-sm {
    font-size: var(--text-body-sm);
    font-weight: var(--weight-normal);
    line-height: var(--leading-normal);
}

.vh-label {
    font-size: var(--text-label);
    font-weight: var(--weight-semi);
    line-height: var(--leading-tight);
}

.vh-caption {
    font-size: var(--text-caption);
    font-weight: var(--weight-normal);
    color: var(--vh-text-secondary);
}

.vh-micro {
    font-size: var(--text-micro);
    font-weight: var(--weight-medium);
    color: var(--vh-text-tertiary);
}


/* -- 3. Buttons ------------------------------------------------------------- */

.vh-btn,
.vh-btn-base {
    border: none;
    outline: none;
    cursor: pointer;
    font-family: var(--vh-font-body);
    font-size: var(--text-card, 0.85rem);
    font-weight: var(--weight-bold);
    padding: 0.6rem 1.25rem;
    border-radius: var(--radius-md);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    transition:
        background var(--duration-base, .25s) var(--ease, cubic-bezier(.4,0,.2,1)),
        color var(--duration-base, .25s) var(--ease, cubic-bezier(.4,0,.2,1)),
        box-shadow var(--duration-base, .25s) var(--ease, cubic-bezier(.4,0,.2,1)),
        transform var(--duration-base, .25s) var(--ease, cubic-bezier(.4,0,.2,1)),
        border-color var(--duration-base, .25s) var(--ease, cubic-bezier(.4,0,.2,1)),
        opacity var(--duration-base, .25s) var(--ease, cubic-bezier(.4,0,.2,1));
}

/* Size variants */
.vh-btn-sm { padding: 0.5rem 1rem;    font-size: var(--text-label); }
.vh-btn-md { padding: 0.6rem 1.25rem; font-size: var(--text-card);  }
.vh-btn-lg { padding: 0.75rem 1.5rem; font-size: var(--text-body);  }
.vh-btn-xl { padding: 0.875rem 2rem;  font-size: 1.05rem;           }

/* Color variants */
.vh-btn-primary {
    background: var(--vh-primary, #F2C94C);
    color: var(--vh-on-primary, #1a1a1a);
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, .15);
}

.vh-btn-primary:hover {
    background: var(--vh-primary-hover, #E5B93A);
    box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .15);
    transform: translateY(-1px);
}

.vh-btn-primary:focus-visible {
    background: var(--vh-primary-hover, #E5B93A);
    box-shadow: var(--shadow-lg), var(--shadow-focus, 0 0 0 3px rgba(242,201,76,.3));
    transform: translateY(-1px);
    outline: none;
}

.vh-btn-primary:active {
    background: var(--vh-primary-deep, #D4A72E);
    transform: translateY(0) scale(0.98);
    box-shadow: var(--shadow-sm);
    transition-duration: var(--duration-micro, .1s);
}

.vh-btn-ghost {
    background: var(--vh-surface, #ffffff);
    color: var(--vh-text, #1c1917);
    box-shadow: inset 0 0 0 1.5px var(--vh-border, #e7e5e4);
}

.vh-btn-ghost:hover {
    background: var(--vh-highlight, #fffcf0);
    box-shadow: inset 0 0 0 1.5px var(--vh-primary-border, rgba(242,201,76,.30));
    transform: translateY(-1px);
}

.vh-btn-ghost:focus-visible {
    background: var(--vh-highlight, #fffcf0);
    box-shadow: inset 0 0 0 1.5px var(--vh-primary-border, rgba(242,201,76,.30)), var(--shadow-focus, 0 0 0 3px rgba(242,201,76,.3));
    outline: none;
}

.vh-btn-ghost:active {
    transform: translateY(0) scale(0.98);
    transition-duration: var(--duration-micro, .1s);
}

.vh-btn-text {
    background: none;
    color: var(--vh-text-secondary, #57534e);
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.vh-btn-text:hover {
    color: var(--vh-primary, #F2C94C);
    background: var(--vh-primary-soft, rgba(242,201,76,.08));
}

.vh-btn-text:focus-visible {
    color: var(--vh-primary, #F2C94C);
    box-shadow: var(--shadow-focus, 0 0 0 3px rgba(242,201,76,.3));
    outline: none;
}

.vh-btn-text:active {
    transform: scale(0.98);
    transition-duration: var(--duration-micro, .1s);
}

/* Disabled state for all buttons */
.vh-btn:disabled,
.vh-btn[disabled],
.vh-btn[aria-disabled="true"],
.vh-btn-base:disabled,
.vh-btn-base[disabled],
.vh-btn-base[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    transform: none !important;
    box-shadow: none !important;
    filter: grayscale(0.2);
}


/* -- 4. Cards --------------------------------------------------------------- */

.vh-card {
    background: var(--vh-surface, #ffffff);
    border: 1px solid var(--vh-border, #e7e5e4);
    border-radius: var(--radius-lg, 18px);
    padding: var(--space-6, 1.5rem) var(--space-7, 1.75rem);
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(178,150,90,.04));
    transition:
        box-shadow var(--duration-base, .25s) var(--ease, cubic-bezier(.4,0,.2,1)),
        border-color var(--duration-base, .25s) var(--ease, cubic-bezier(.4,0,.2,1)),
        transform var(--duration-base, .25s) var(--ease, cubic-bezier(.4,0,.2,1));
}

.vh-card:hover {
    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(178,150,90,.08));
    border-color: var(--vh-primary-border, rgba(242,201,76,.30));
    transform: translateY(-2px);
}

.vh-card-compact {
    border-radius: var(--radius-md);
    padding: var(--space-5) var(--space-6);
}

.vh-card-large {
    border-radius: var(--radius-xl);
    padding: var(--space-10);
}

.vh-card-hero {
    border-radius: var(--radius-2xl);
    padding: var(--space-12);
}

.vh-card-static {
    background: var(--vh-surface, #ffffff);
    border: 1px solid var(--vh-border, #e7e5e4);
    border-radius: var(--radius-lg, 18px);
    padding: var(--space-6, 1.5rem) var(--space-7, 1.75rem);
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(178,150,90,.04));
}

/* Opt-out class: prevents hover lift on any card element */
.vh-card-static:hover {
    transform: none;
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(178,150,90,.04));
}


/* -- 5. Form Fields --------------------------------------------------------- */

.vh-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1.5px solid var(--vh-border, #e7e5e4);
    border-radius: var(--radius-md, 12px);
    background: var(--vh-surface, #ffffff);
    font-family: var(--vh-font-body);
    font-size: var(--text-card);
    font-weight: var(--weight-normal);
    color: var(--vh-text, #1c1917);
    line-height: var(--leading-tight);
    outline: none;
    transition:
        border-color var(--duration-fast, .15s) var(--ease, cubic-bezier(.4,0,.2,1)),
        box-shadow var(--duration-fast, .15s) var(--ease, cubic-bezier(.4,0,.2,1)),
        background var(--duration-fast, .15s) var(--ease, cubic-bezier(.4,0,.2,1));
}

.vh-input::placeholder {
    color: var(--vh-text-tertiary, #a8a29e);
}

.vh-input:focus {
    border-color: var(--vh-primary, #F2C94C);
    box-shadow: var(--shadow-focus, 0 0 0 3px rgba(242,201,76,.3));
}

.vh-input:hover:not(:focus):not(:disabled) {
    border-color: var(--vh-primary-border, rgba(242,201,76,.30));
}

/* Input invalid (native HTML5 validation) */
.vh-input:invalid:not(:focus):not(:placeholder-shown) {
    border-color: var(--vh-error, #dc2626);
    box-shadow: var(--shadow-error, 0 0 0 3px rgba(220,38,38,.12));
}

/* Input disabled state */
.vh-input:disabled,
.vh-input[disabled],
.vh-input[aria-disabled="true"] {
    background: var(--vh-bg, #faf9f7);
    opacity: 0.55;
    cursor: not-allowed;
}

/* Input states */
.vh-input-error {
    border-color: var(--vh-error, #dc2626) !important;
    box-shadow: var(--shadow-error, 0 0 0 3px rgba(220,38,38,.12)) !important;
}

.vh-input-success {
    border-color: var(--vh-success, #16a34a) !important;
    box-shadow: var(--shadow-success, 0 0 0 3px rgba(22,163,74,.12)) !important;
}

/* Textarea */
.vh-textarea {
    min-height: 120px;
    resize: vertical;
}

/* Select */
.vh-select {
    appearance: none;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 6l3.5 4 3.5-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
}

/* Form label */
.vh-form-label {
    display: block;
    font-size: var(--text-label);
    font-weight: var(--weight-semi);
    color: var(--vh-text, #1c1917);
    margin-bottom: var(--space-2);
}

/* Form helper & error */
.vh-form-helper {
    font-size: var(--text-caption);
    color: var(--vh-text-secondary);
    margin-top: var(--space-1);
}

.vh-form-error {
    font-size: var(--text-caption);
    color: var(--vh-error, #dc2626);
    margin-top: var(--space-1);
}


/* -- 7. Container Widths ---------------------------------------------------- */

/* Default container -- maps to --container-wide (1200px), the most common page width */
.vh-container {
    width: 100%;
    max-width: var(--container-wide, 1200px);
    margin-inline: auto;
    padding-inline: var(--space-8, 2rem);
}

.vh-container-full    { width: 100%; max-width: var(--container-full, 1400px);    margin-inline: auto; padding-inline: var(--space-10, 2.5rem); }
.vh-container-wide    { width: 100%; max-width: var(--container-wide, 1200px);    margin-inline: auto; padding-inline: var(--space-10, 2.5rem); }
.vh-container-section { width: 100%; max-width: var(--container-section, 1000px); margin-inline: auto; padding-inline: var(--space-8, 2rem);   }
.vh-container-content { width: 100%; max-width: var(--container-content, 820px);  margin-inline: auto; padding-inline: var(--space-7, 1.75rem); }
.vh-container-narrow  { width: 100%; max-width: var(--container-narrow, 720px);   margin-inline: auto; padding-inline: var(--space-6, 1.5rem);  }
.vh-container-form    { width: 100%; max-width: var(--container-form, 680px);     margin-inline: auto; padding-inline: var(--space-6, 1.5rem);  }

/* Page-level vertical padding */
.vh-page-body   { padding-bottom: var(--space-20); }
.vh-page-offset { padding-top: calc(72px + 2.5rem); padding-bottom: 4rem; }

@media (max-width: 768px) {
    .vh-container,
    .vh-container-full,
    .vh-container-wide,
    .vh-container-section,
    .vh-container-content,
    .vh-container-narrow,
    .vh-container-form    { padding-inline: var(--space-5, 1.25rem); }
    .vh-page-body         { padding-bottom: var(--space-12, 3rem); }
    .vh-page-offset       { padding-top: calc(64px + 2rem); padding-bottom: var(--space-12, 3rem); }
}

@media (max-width: 640px) {
    .vh-container-full { padding-inline: var(--space-4, 1rem); }
}


/* -- 9. Section Spacing ----------------------------------------------------- */

.vh-section    { padding: var(--space-20) 0; }
.vh-section-sm { padding: var(--space-12) 0; }
.vh-section-lg { padding: 6rem 0; }


/* -- 10. Animation Helpers -------------------------------------------------- */
/* vh-fadeUp and vh-fadeIn are defined in animations.css (canonical source) */

.vh-animate-in {
    animation: vh-fadeUp var(--duration-enter, .5s) var(--ease, cubic-bezier(.4,0,.2,1)) both;
}


/* -- 11. Toast / Alert ------------------------------------------------------ */

.vh-toast {
    position: fixed;
    bottom: var(--space-8);
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-lg);
    font-size: var(--text-card);
    font-weight: var(--weight-semi);
    box-shadow: var(--shadow-2xl);
    z-index: var(--z-scroll-top);
    opacity: 0;
    pointer-events: none;
    transition:
        opacity var(--duration-base, .25s) var(--ease, cubic-bezier(.4,0,.2,1)),
        transform var(--duration-base, .25s) var(--ease, cubic-bezier(.4,0,.2,1));
}

.vh-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.vh-toast-success {
    background: var(--vh-text, #1c1917);
    color: #fff;
}

.vh-toast-error {
    background: var(--vh-error, #dc2626);
    color: #fff;
}


/* -- 12. Dropdown Menus ----------------------------------------------------- */

.vh-dropdown-wrap {
    position: relative;
}

.vh-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.45rem 1rem 0.45rem 0.45rem;
    background: var(--vh-surface, #ffffff);
    border: 1.5px solid var(--vh-border, #e7e5e4);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-family: var(--vh-font-body);
    font-size: var(--text-body-sm);
    font-weight: var(--weight-medium);
    color: var(--vh-text, #1c1917);
    transition:
        border-color var(--duration-fast, .15s) var(--ease, cubic-bezier(.4,0,.2,1)),
        box-shadow var(--duration-fast, .15s) var(--ease, cubic-bezier(.4,0,.2,1));
}

.vh-dropdown-trigger:hover {
    border-color: var(--vh-primary-border, rgba(242,201,76,.30));
    box-shadow: var(--shadow-md);
}

.vh-dropdown-trigger:focus-visible {
    border-color: var(--vh-primary, #F2C94C);
    box-shadow: var(--shadow-focus, 0 0 0 3px rgba(242,201,76,.3));
    outline: none;
}

.vh-dropdown-panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 200px;
    background: var(--vh-surface, #ffffff);
    border: 1px solid var(--vh-border, #e7e5e4);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: 0.5rem;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition:
        opacity var(--duration-fast, .15s) var(--ease, cubic-bezier(.4,0,.2,1)),
        transform var(--duration-fast, .15s) var(--ease, cubic-bezier(.4,0,.2,1));
    z-index: var(--z-dropdown);
}

.vh-dropdown-wrap.open .vh-dropdown-panel {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.vh-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.65rem 0.85rem;
    border-radius: var(--radius-sm);
    border: none;
    background: none;
    cursor: pointer;
    font-family: var(--vh-font-body);
    font-size: var(--text-card);
    font-weight: var(--weight-medium);
    color: var(--vh-text, #1c1917);
    text-decoration: none;
    transition: background var(--duration-micro, .1s) var(--ease, cubic-bezier(.4,0,.2,1));
}

.vh-dropdown-item:hover {
    background: var(--vh-primary-soft);
    color: var(--vh-primary, #F2C94C);
}

.vh-dropdown-item svg {
    width: 18px;
    height: 18px;
    color: var(--vh-text-secondary);
    flex-shrink: 0;
}

.vh-dropdown-divider {
    height: 1px;
    background: var(--vh-border);
    margin: 0.35rem 0.5rem;
}

.vh-chevron {
    width: 16px;
    height: 16px;
    color: var(--vh-text-tertiary);
    transition: transform var(--duration-fast, .15s) var(--ease, cubic-bezier(.4,0,.2,1));
}

.vh-dropdown-wrap.open .vh-chevron {
    transform: rotate(180deg);
}


/* -- 13. Modals & Overlays -------------------------------------------------- */

.vh-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(26, 26, 26, .5);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-overlay);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-base, .25s) var(--ease, cubic-bezier(.4,0,.2,1));
}

.vh-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.vh-modal {
    background: var(--vh-surface, #ffffff);
    border-radius: var(--radius-2xl);
    max-width: 560px;
    width: 90%;
    padding: var(--space-10);
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-modal);
    transform: translateY(16px) scale(0.97);
    transition:
        transform var(--duration-base, .25s) var(--ease, cubic-bezier(.4,0,.2,1)),
        opacity var(--duration-base, .25s) var(--ease, cubic-bezier(.4,0,.2,1));
}

.vh-modal-overlay.active .vh-modal {
    transform: translateY(0) scale(1);
}

.vh-modal-header {
    margin-bottom: var(--space-6);
}

.vh-modal-title {
    font-size: var(--text-headline);
    font-weight: var(--weight-bold);
    color: var(--vh-text, #1c1917);
    margin-bottom: var(--space-2);
}

.vh-modal-desc {
    font-size: var(--text-body);
    color: var(--vh-text-secondary);
    line-height: var(--leading-normal);
}

.vh-modal-body {
    margin-bottom: var(--space-8);
}

.vh-modal-actions {
    display: flex;
    gap: var(--space-4);
    justify-content: flex-end;
}

.vh-modal-close {
    position: absolute;
    top: var(--space-6);
    right: var(--space-6);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--vh-text-tertiary, #a8a29e);
    border-radius: var(--radius-sm);
    transition:
        background var(--duration-fast, .15s) var(--ease, cubic-bezier(.4,0,.2,1)),
        color var(--duration-fast, .15s) var(--ease, cubic-bezier(.4,0,.2,1));
}

.vh-modal-close:hover {
    background: var(--vh-highlight, #fffcf0);
    color: var(--vh-text, #1c1917);
}

.vh-modal-close:focus-visible {
    box-shadow: var(--shadow-focus, 0 0 0 3px rgba(242,201,76,.3));
    outline: none;
}


/* -- 14. Loading & Spinners ------------------------------------------------- */

@keyframes vh-spin {
    to { transform: rotate(360deg); }
}

.vh-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--vh-border, #e7e5e4);
    border-top-color: var(--vh-primary, #F2C94C);
    border-radius: var(--radius-full);
    animation: vh-spin 0.7s linear infinite;
}

.vh-spinner-sm {
    width: 20px;
    height: 20px;
    border-width: 2px;
}

.vh-spinner-lg {
    width: 56px;
    height: 56px;
    border-width: 4px;
}

.vh-loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(250, 248, 244, .92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-5);
    z-index: var(--z-toast);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-base, .25s) var(--ease, cubic-bezier(.4,0,.2,1));
}

.vh-loading-overlay.on {
    opacity: 1;
    pointer-events: auto;
}

.vh-loading-text {
    font-size: var(--text-body);
    font-weight: var(--weight-semi);
    color: var(--vh-text, #1c1917);
}

.vh-loading-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) var(--space-8);
    color: var(--vh-text-secondary);
    gap: var(--space-3);
}

/* Skeleton shimmer */
@keyframes vh-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.vh-skeleton {
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, var(--vh-border) 25%, var(--vh-highlight) 50%, var(--vh-border) 75%);
    background-size: 200% 100%;
    animation: vh-shimmer 1.5s ease infinite;
    border-radius: var(--radius-sm);
}

.vh-skeleton-line {
    height: 14px;
    background: rgba(26, 26, 26, .05);
    border-radius: 6px;
    margin-bottom: 8px;
}

.vh-skeleton-line:last-child  { margin-bottom: 0; width: 60%; }
.vh-skeleton-line.short       { width: 60%; }
.vh-skeleton-line.medium      { width: 80%; }

.vh-skeleton-circle {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: rgba(26, 26, 26, .05);
}

.vh-skeleton-card {
    height: 120px;
    border-radius: var(--radius-lg);
}

.vh-shimmer {
    background: linear-gradient(110deg, var(--vh-bg) 0%, var(--vh-highlight) 40%, var(--vh-bg) 60%);
    background-size: 200% 100%;
    animation: vh-shimmer 1.5s ease-in-out infinite;
}

/* Progress bar */
.vh-progress-bar {
    width: 100%;
    height: 4px;
    background: var(--vh-border, #e7e5e4);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.vh-progress-fill {
    height: 100%;
    background: var(--vh-primary, #F2C94C);
    border-radius: var(--radius-pill);
    transition: width var(--duration-slow, .4s) var(--ease, cubic-bezier(.4,0,.2,1));
    box-shadow: 0 2px 8px rgba(242, 201, 76, .25);
}


/* -- 16. Tables ------------------------------------------------------------- */

.vh-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--vh-border, #e7e5e4);
    border-radius: var(--radius-lg);
}

.vh-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-card);
}

.vh-table th {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-weight: var(--weight-bold);
    font-size: var(--text-label);
    color: var(--vh-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--vh-bg, #faf9f7);
    border-bottom: 1px solid var(--vh-border, #e7e5e4);
}

.vh-table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--vh-border, #e7e5e4);
    color: var(--vh-text, #1c1917);
}

.vh-table tbody tr {
    transition: background var(--duration-micro, .1s) var(--ease, cubic-bezier(.4,0,.2,1));
}

.vh-table tbody tr:hover {
    background: var(--vh-primary-soft);
}

.vh-table tbody tr:last-child td {
    border-bottom: none;
}


/* -- 17. Tabs --------------------------------------------------------------- */

.vh-tabs {
    display: flex;
    gap: 0.5rem;
    border-bottom: 2px solid var(--vh-border, #e7e5e4);
    margin-bottom: var(--space-8);
}

.vh-tab {
    padding: 0.75rem 1.5rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    color: var(--vh-text-secondary, #57534e);
    cursor: pointer;
    font-family: var(--vh-font-body);
    font-size: var(--text-body);
    font-weight: var(--weight-semi);
    transition:
        color var(--duration-fast, .15s) var(--ease, cubic-bezier(.4,0,.2,1)),
        border-color var(--duration-fast, .15s) var(--ease, cubic-bezier(.4,0,.2,1));
}

.vh-tab:hover {
    color: var(--vh-text, #1c1917);
}

.vh-tab:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus, 0 0 0 3px rgba(242,201,76,.3));
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.vh-tab.active {
    color: var(--vh-primary, #F2C94C);
    border-bottom-color: var(--vh-primary, #F2C94C);
}

.vh-tab-content {
    display: none;
}

.vh-tab-content.active {
    display: block;
    animation: vh-fadeIn var(--duration-base, .25s) var(--ease, cubic-bezier(.4,0,.2,1));
}


/* -- 18. Toggle Switch ------------------------------------------------------ */

.vh-toggle {
    position: relative;
    width: 52px;
    height: 28px;
    background: var(--vh-border, #e7e5e4);
    border-radius: var(--radius-pill);
    border: none;
    cursor: pointer;
    transition: background var(--duration-base, .25s) var(--ease, cubic-bezier(.4,0,.2,1));
    flex-shrink: 0;
}

.vh-toggle::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    background: var(--vh-surface, #ffffff);
    border-radius: var(--radius-full);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
    transition: transform var(--duration-base, .25s) var(--ease, cubic-bezier(.4,0,.2,1));
}

.vh-toggle:focus-visible {
    box-shadow: var(--shadow-focus, 0 0 0 3px rgba(242,201,76,.3));
    outline: none;
}

.vh-toggle.active {
    background: var(--vh-primary, #F2C94C);
}

.vh-toggle.active::after {
    transform: translateX(24px);
}

.vh-toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4);
    background: var(--vh-bg, #faf9f7);
    border-radius: var(--radius-md);
}

.vh-toggle-label {
    font-size: var(--text-body);
    font-weight: var(--weight-medium);
}

/* Toggle switch (input-based variant) */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--vh-border, #e7e5e4);
    border-radius: 12px;
    cursor: pointer;
    transition: background var(--duration-base, .25s) var(--ease, cubic-bezier(.4,0,.2,1));
}

.toggle-slider::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 2px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
    transition: transform var(--duration-base, .25s) var(--ease, cubic-bezier(.4,0,.2,1));
}

.toggle-switch input:checked + .toggle-slider {
    background: var(--vh-primary, #F2C94C);
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(20px);
}

.toggle-switch input:focus-visible + .toggle-slider {
    box-shadow: var(--shadow-focus, 0 0 0 3px rgba(242,201,76,.3));
}


/* -- 26. Dividers ----------------------------------------------------------- */

.vh-divider {
    border: none;
    height: 1px;
    background: var(--vh-border, #e7e5e4);
    margin: var(--space-6) 0;
}

.vh-divider-sm { margin: var(--space-3) 0; }
.vh-divider-lg { margin: var(--space-10) 0; }


/* -- 27. Custom Scrollbar --------------------------------------------------- */

.vh-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--vh-border, #e7e5e4) transparent;
}

.vh-scroll::-webkit-scrollbar       { width: 6px; height: 6px; }
.vh-scroll::-webkit-scrollbar-track { background: transparent; }
.vh-scroll::-webkit-scrollbar-thumb { background: var(--vh-border, #e7e5e4); border-radius: var(--radius-pill, 9999px); }
.vh-scroll::-webkit-scrollbar-thumb:hover { background: var(--vh-text-tertiary, #a8a29e); }

.vh-scroll-hidden {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.vh-scroll-hidden::-webkit-scrollbar { display: none; }


/* -- 31. Global Focus-Visible Ring ------------------------------------------ */

*:focus-visible {
    outline: 2px solid var(--vh-primary, #F2C94C);
    outline-offset: 3px;
    border-radius: var(--radius-sm, 8px);
}

*:focus:not(:focus-visible) {
    outline: none;
}

/* Skip-to-content link */
.vh-skip-link {
    position: fixed;
    top: -100%;
    left: 1rem;
    z-index: var(--z-skip, 99999);
    padding: 0.75rem 1.5rem;
    background: var(--vh-primary, #F2C94C);
    color: var(--vh-on-primary, #1a1a1a);
    font-weight: var(--weight-bold, 700);
    font-size: var(--text-body, .95rem);
    border-radius: 0 0 var(--radius-md, 12px) var(--radius-md, 12px);
    text-decoration: none;
    transition: top var(--duration-fast, .15s) var(--ease, cubic-bezier(.4,0,.2,1));
}

.vh-skip-link:focus {
    top: 0;
}


/* -- 32. Safe Area Insets --------------------------------------------------- */

@supports (padding: env(safe-area-inset-bottom)) {
    .vh-safe-bottom { padding-bottom: calc(var(--space-8) + env(safe-area-inset-bottom)); }
    .vh-safe-top    { padding-top: calc(72px + env(safe-area-inset-top)); }
}


/* -- 33. Touch Targets ------------------------------------------------------ */

@media (pointer: coarse) {
    button, a, [role="button"], input[type="checkbox"], input[type="radio"], select {
        min-height: 44px;
        min-width: 44px;
    }

    .vh-touch-target {
        position: relative;
    }

    .vh-touch-target::after {
        content: '';
        position: absolute;
        inset: -6px;
    }
}


/* -- 34. Smooth Image Loading ----------------------------------------------- */

img {
    opacity: 1;
    transition: opacity 0.4s var(--ease, cubic-bezier(.4,0,.2,1));
}

img[loading="lazy"] {
    opacity: 0;
}

img[loading="lazy"].vh-loaded,
img.vh-loaded,
img[loading="lazy"][src]:not([src=""]) {
    opacity: 1;
}


/* -- 35. Scroll Indicator Fade ---------------------------------------------- */

.vh-scroll-hint {
    position: relative;
}

.vh-scroll-hint::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(transparent, var(--vh-bg, #faf9f7));
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--duration-medium, .3s) var(--ease, cubic-bezier(.4,0,.2,1));
}

.vh-scroll-hint.has-scroll::after {
    opacity: 1;
}


/* -- 36. Disabled States ---------------------------------------------------- */
/* Scoped to native form elements and .vh-disabled helper.
   Button-specific disabled rules live in section 3 (vh-btn). */

button:disabled,
input:disabled,
select:disabled,
textarea:disabled,
.vh-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(0.2);
    user-select: none;
    transition:
        opacity var(--duration-base, .25s) var(--ease, cubic-bezier(.4,0,.2,1)),
        filter var(--duration-base, .25s) var(--ease, cubic-bezier(.4,0,.2,1));
}

/* Disabled links should look inactive but remain in flow */
a[aria-disabled="true"],
a.vh-disabled {
    pointer-events: none;
    opacity: 0.45;
    text-decoration: none;
}


/* -- 37. Link Underline Offset Animation ------------------------------------ */

a:not([class]) {
    text-decoration-color: transparent;
    text-underline-offset: 2px;
    transition:
        color var(--duration-fast, .15s) var(--ease, cubic-bezier(.4,0,.2,1)),
        text-decoration-color var(--duration-base, .25s) var(--ease, cubic-bezier(.4,0,.2,1)),
        text-underline-offset var(--duration-base, .25s) var(--ease, cubic-bezier(.4,0,.2,1));
}

a:not([class]):hover {
    text-decoration: underline;
    text-decoration-color: var(--vh-primary, #F2C94C);
    text-underline-offset: 4px;
}


/* -- 38. Loading Indicator for Buttons -------------------------------------- */

.vh-loading {
    position: relative;
    pointer-events: none;
    color: transparent !important;
}

.vh-loading::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    top: 50%;
    left: 50%;
    margin: -9px 0 0 -9px;
    border: 2.5px solid var(--vh-border, #e7e5e4);
    border-top-color: var(--vh-primary, #F2C94C);
    border-radius: 50%;
    animation: vh-spin 0.5s linear infinite;
}


/* ============================================================================
   Responsive Breakpoints
   --  xl: 1280px  |  lg: 1024px  |  md: 768px  |  sm: 480px  |  xs: 360px
   ============================================================================ */

/* -- XL breakpoint (large desktops) ----------------------------------------- */
@media (max-width: 1280px) {
    .vh-container-full { padding-inline: var(--space-8, 2rem); }
}

/* -- LG breakpoint (tablets landscape / small desktops) --------------------- */
@media (max-width: 1024px) {
    .vh-section-lg { padding: 4rem 0; }
}

/* -- MD+ breakpoint (tablet / small laptop) --------------------------------- */
@media (max-width: 900px) {
    .vh-modal {
        width: 95%;
        padding: var(--space-7);
    }

    .vh-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .vh-tabs::-webkit-scrollbar { display: none; }
}

/* -- MD breakpoint (tablets portrait) --------------------------------------- */
@media (max-width: 768px) {
    :root {
        --space-10: 1.5rem;
        --space-12: 2rem;
        --space-16: 2.5rem;
        --space-20: 3rem;
        --text-display: clamp(1.75rem, 4vw + 0.75rem, 2.75rem);
        --text-headline: 1.4rem;
    }

    .vh-card         { padding: var(--space-5); }
    .vh-card-large   { padding: var(--space-7); }
    .vh-card-hero    { padding: var(--space-8); }
    .vh-btn           { min-height: 44px; }
    .vh-btn-xl       { padding: 0.85rem 1.5rem; font-size: var(--text-body); }
    .vh-modal        { padding: var(--space-6); border-radius: var(--radius-xl); }
    .vh-modal-title  { font-size: var(--text-subhead); }

    .vh-glass-card   { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
}

/* -- SM breakpoint (mobile landscape / large phones) ------------------------ */
@media (max-width: 480px) {
    :root {
        --text-headline: 1.25rem;
        --text-subhead: 1.05rem;
    }

    .vh-tabs          { gap: 0; }
    .vh-tab           { padding: 0.65rem 1rem; font-size: var(--text-card); }
    .vh-dropdown-panel { min-width: 180px; }
    .vh-modal-actions  { flex-direction: column; }

    .vh-btn-lg { padding: 0.65rem 1.25rem; font-size: var(--text-body-sm); }
    .vh-section { padding: var(--space-12) 0; }
}

/* -- XS breakpoint (small phones) ------------------------------------------- */
@media (max-width: 360px) {
    :root {
        --text-display: clamp(1.5rem, 3.5vw + 0.5rem, 2.25rem);
    }

    .vh-card         { padding: var(--space-4); }
}


/* ============================================================================
   Reduced Motion
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}