:root {
    /* ==========================================================================
       1. COLOR PRIMITIVES (PALETTE LAYERS)
       ========================================================================== */

    /* --- A. LIGHT THEME PALETTE --- */
    /* Accent (Indigo) */
    --vfw-palette-light-accent-primary: #4F46E5;
    --vfw-palette-light-accent-primary-dark: #271FA9;
    --vfw-palette-light-accent-highlight-weak: rgba(79, 70, 229, 0.06); /* 6% */
    --vfw-palette-light-accent-highlight-strong: rgba(79, 70, 229, 0.30); /* 30% */

    /* Neutrals */
    --vfw-palette-light-neutral-1000: #030217;
    --vfw-palette-light-neutral-900: #100F2A;
    --vfw-palette-light-neutral-800: #1E1F3B;
    --vfw-palette-light-neutral-700: #333455;
    --vfw-palette-light-neutral-600: #474869;
    --vfw-palette-light-neutral-500: #64698B;
    --vfw-palette-light-neutral-400: #9498BB;
    --vfw-palette-light-neutral-300: #CBCEE1;
    --vfw-palette-light-neutral-200: #EBEBF5;
    --vfw-palette-light-neutral-100: #F8F8FC;
    --vfw-palette-light-neutral-0: #FFFFFF;

    /* Transparent Neutrals (Neutral %) */
    --vfw-palette-light-neutral-pct-900: rgba(3, 2, 31, 0.95); /* #03021F 95% */
    --vfw-palette-light-neutral-pct-800: rgba(2, 3, 35, 0.89); /* #020323 89% */
    --vfw-palette-light-neutral-pct-700: rgba(0, 1, 43, 0.80); /* #00012B 80% */
    --vfw-palette-light-neutral-pct-600: rgba(3, 8, 50, 0.73); /* #030832 73% */
    --vfw-palette-light-neutral-pct-500: rgba(1, 9, 65, 0.61); /* #010941 61% */
    --vfw-palette-light-neutral-pct-400: rgba(0, 10, 86, 0.42); /* #000A56 42% */
    --vfw-palette-light-neutral-pct-300: rgba(7, 22, 112, 0.21); /* #071670 21% */
    --vfw-palette-light-neutral-pct-200: rgba(22, 13, 130, 0.12); /* #160D82 12% */
    --vfw-palette-light-neutral-pct-100: rgba(22, 22, 155, 0.06); /* #16169B 6% */

    /* Feedback - Info (Blue) */
    --vfw-palette-light-info-950: #082F49;
    --vfw-palette-light-info-800: #075985;
    --vfw-palette-light-info-600: #0284C7;
    --vfw-palette-light-info-300: #38BDF8;
    --vfw-palette-light-info-200: #BAE6FD;
    --vfw-palette-light-info-100: #F0F9FF;

    /* Feedback - Success (Green) */
    --vfw-palette-light-success-950: #1C2C02;
    --vfw-palette-light-success-800: #3D5F06;
    --vfw-palette-light-success-600: #5F9605;
    --vfw-palette-light-success-300: #96D334;
    --vfw-palette-light-success-200: #D6F3A7;
    --vfw-palette-light-success-100: #F7FDED;

    /* Feedback - Warning (Orange) */
    --vfw-palette-light-warning-950: #431407;
    --vfw-palette-light-warning-800: #9A3412;
    --vfw-palette-light-warning-600: #EA580C;
    --vfw-palette-light-warning-300: #FB923C;
    --vfw-palette-light-warning-200: #FED7AA;
    --vfw-palette-light-warning-100: #FFF4E5;

    /* Feedback - Danger/Error (Red-Pink) */
    --vfw-palette-light-error-950: #4C0519;
    --vfw-palette-light-error-800: #9F1239;
    --vfw-palette-light-error-600: #E91A47;
    --vfw-palette-light-error-300: #FB7185;
    --vfw-palette-light-error-200: #FECDD3;
    --vfw-palette-light-error-100: #FFF0F1;

    /* --- B. DARK THEME PALETTE --- */
    /* Accent (Lavender) */
    --vfw-palette-dark-accent-primary: #8C97FF;
    --vfw-palette-dark-accent-primary-dark: #5766FF;
    --vfw-palette-dark-accent-highlight-weak: rgba(140, 151, 255, 0.24); /* 24% */
    --vfw-palette-dark-accent-highlight-strong: rgba(140, 151, 255, 0.40); /* 40% */

    /* Neutrals (Inverted) */
    --vfw-palette-dark-neutral-1000: #FFFFFF;
    --vfw-palette-dark-neutral-900: #F8F8FC;
    --vfw-palette-dark-neutral-800: #EBEBF5;
    --vfw-palette-dark-neutral-700: #CBCEE1;
    --vfw-palette-dark-neutral-600: #9498BB;
    --vfw-palette-dark-neutral-500: #64698B;
    --vfw-palette-dark-neutral-400: #474869;
    --vfw-palette-dark-neutral-300: #333455;
    --vfw-palette-dark-neutral-200: #1E1F3B;
    --vfw-palette-dark-neutral-100: #100F2A;
    --vfw-palette-dark-neutral-0: #030217;

    /* Transparent Neutrals (Neutral % - Opacities of #FFFFFF) */
    --vfw-palette-dark-neutral-pct-900: rgba(255, 255, 255, 0.95);
    --vfw-palette-dark-neutral-pct-800: rgba(255, 255, 255, 0.89);
    --vfw-palette-dark-neutral-pct-700: rgba(255, 255, 255, 0.80);
    --vfw-palette-dark-neutral-pct-600: rgba(255, 255, 255, 0.73);
    --vfw-palette-dark-neutral-pct-500: rgba(255, 255, 255, 0.61);
    --vfw-palette-dark-neutral-pct-400: rgba(255, 255, 255, 0.42);
    --vfw-palette-dark-neutral-pct-300: rgba(255, 255, 255, 0.21);
    --vfw-palette-dark-neutral-pct-200: rgba(255, 255, 255, 0.12);
    --vfw-palette-dark-neutral-pct-100: rgba(255, 255, 255, 0.06);

    /* Feedback - Info (Inverted Blue) */
    --vfw-palette-dark-info-950: #E0F2FE;
    --vfw-palette-dark-info-800: #88D4FC;
    --vfw-palette-dark-info-600: #38BDF8;
    --vfw-palette-dark-info-300: #0284C7;
    --vfw-palette-dark-info-200: #075985;
    --vfw-palette-dark-info-100: #082F49;
    --vfw-palette-dark-info-pct-20: rgba(2, 132, 199, 0.20);
    --vfw-palette-dark-info-pct-30: rgba(2, 132, 199, 0.30);

    /* Feedback - Success (Inverted Green) */
    --vfw-palette-dark-success-950: #F7FDED;
    --vfw-palette-dark-success-800: #C0ED78;
    --vfw-palette-dark-success-600: #96D334;
    --vfw-palette-dark-success-300: #5F9605;
    --vfw-palette-dark-success-200: #3D5F06;
    --vfw-palette-dark-success-100: #1C2C02;
    --vfw-palette-dark-success-pct-20: rgba(95, 150, 5, 0.20);
    --vfw-palette-dark-success-pct-30: rgba(95, 150, 5, 0.30);

    /* Feedback - Warning (Inverted Orange) */
    --vfw-palette-dark-warning-950: #FFEDD5;
    --vfw-palette-dark-warning-800: #FDBF77;
    --vfw-palette-dark-warning-600: #FB923C;
    --vfw-palette-dark-warning-300: #EA580C;
    --vfw-palette-dark-warning-200: #9A3412;
    --vfw-palette-dark-warning-100: #431407;
    --vfw-palette-dark-warning-pct-20: rgba(234, 88, 12, 0.20);
    --vfw-palette-dark-warning-pct-30: rgba(234, 88, 12, 0.30);

    /* Feedback - Danger/Error (Inverted Red-Pink) */
    --vfw-palette-dark-error-950: #FFE4E6;
    --vfw-palette-dark-error-800: #FD9BA7;
    --vfw-palette-dark-error-600: #FB7185;
    --vfw-palette-dark-error-300: #E11D48;
    --vfw-palette-dark-error-200: #9F1239;
    --vfw-palette-dark-error-100: #4C0519;
    --vfw-palette-dark-error-pct-20: rgba(225, 29, 72, 0.20);
    --vfw-palette-dark-error-pct-30: rgba(225, 29, 72, 0.30);

    /* ==========================================================================
       2. SEMANTIC THEME VARIABLES (DEFAULT / LIGHT THEME)
       ========================================================================== */
    --vfw-color-background: var(--vfw-palette-light-neutral-0);
    --vfw-color-surface: var(--vfw-palette-light-neutral-100);
    --vfw-color-border: var(--vfw-palette-light-neutral-200);
    --vfw-color-text: var(--vfw-palette-light-neutral-1000);
    --vfw-color-text-muted: var(--vfw-palette-light-neutral-500);

    /* Primary Accent */
    --vfw-color-primary: var(--vfw-palette-light-accent-primary);
    --vfw-color-primary-hover: var(--vfw-palette-light-accent-primary-dark);
    --vfw-color-primary-light: var(--vfw-palette-light-accent-highlight-weak);
    --vfw-color-primary-focus: var(--vfw-palette-light-accent-highlight-strong);
    --vfw-color-text-on-primary: var(--vfw-palette-light-neutral-0);

    /* Status Colors */
    --vfw-color-info: var(--vfw-palette-light-info-600);
    --vfw-color-info-bg: var(--vfw-palette-light-info-100);
    --vfw-color-info-border: var(--vfw-palette-light-info-200);
    --vfw-color-info-text: var(--vfw-palette-light-info-800);
    --vfw-color-info-contrast: var(--vfw-palette-light-neutral-0);

    --vfw-color-success: var(--vfw-palette-light-success-600);
    --vfw-color-success-bg: var(--vfw-palette-light-success-100);
    --vfw-color-success-border: var(--vfw-palette-light-success-200);
    --vfw-color-success-text: var(--vfw-palette-light-success-800);
    --vfw-color-success-contrast: var(--vfw-palette-light-neutral-0);

    --vfw-color-warning: var(--vfw-palette-light-warning-600);
    --vfw-color-warning-bg: var(--vfw-palette-light-warning-100);
    --vfw-color-warning-border: var(--vfw-palette-light-warning-200);
    --vfw-color-warning-text: var(--vfw-palette-light-warning-800);
    --vfw-color-warning-contrast: var(--vfw-palette-light-neutral-0);

    --vfw-color-error: var(--vfw-palette-light-error-600);
    --vfw-color-error-bg: var(--vfw-palette-light-error-100);
    --vfw-color-error-border: var(--vfw-palette-light-error-200);
    --vfw-color-error-text: var(--vfw-palette-light-error-800);
    --vfw-color-error-contrast: var(--vfw-palette-light-neutral-0);

    --vfw-navbar-bg: rgba(255, 255, 255, 0.85);

    /* ==========================================================================
       3. SYSTEM TOKENS (TYPOGRAPHY, SPACING, LAYOUT)
       ========================================================================== */
    /* Typography */
    --vfw-font-family: 'Inter', system-ui, -apple-system, sans-serif;
    --vfw-font-size-sm: 0.875rem; /* 14px */
    --vfw-font-size-md: 1rem; /* 16px */
    --vfw-font-size-lg: 1.25rem; /* 20px */
    --vfw-font-size-xl: 1.5rem; /* 24px */
    --vfw-font-size-2xl: 2.25rem; /* 36px */
    --vfw-font-weight-normal: 400;
    --vfw-font-weight-bold: 700;

    /* Base Font Sizes (Figma Flow system) */
    --vfw-font-size-h1: 2.5rem;
    --vfw-font-size-h2: 2rem;
    --vfw-font-size-h3: 1.5rem;
    --vfw-font-size-h4: 1.25rem;
    --vfw-font-size-h5: 1.125rem;
    --vfw-font-size-h6: 1rem;
    --vfw-font-size-body: 1rem;
    --vfw-font-size-body-sm: 0.875rem;
    --vfw-font-size-body-tiny: 0.75rem;

    /* Spacing */
    --vfw-space-xs: 0.25rem;
    --vfw-space-sm: 0.5rem;
    --vfw-space-md: 1rem;
    --vfw-space-lg: 1.5rem;
    --vfw-space-xl: 2rem;
    --vfw-space-2xl: 3rem;

    /* Layout */
    --vfw-container-max: 1200px;
    --vfw-container-padding: 1.5rem;
    --vfw-border-radius: 6px; /* Flow's rounded corners */
    --vfw-transition-fast: 0.15s ease;
    --vfw-transition-normal: 0.3s ease;

    /* Effects (FLOW V.4.0 Shadows & Borders) */
    --vfw-shadow-color: rgba(3, 2, 23, 0.12);
    --vfw-shadow-bottom-sm: 0 2px 8px var(--vfw-shadow-color);
    --vfw-shadow-bottom-lg: 0 10px 24px var(--vfw-shadow-color);
    --vfw-shadow-bottom-xl: 0 20px 48px var(--vfw-shadow-color);
    --vfw-shadow-top-sm: 0 -2px 8px var(--vfw-shadow-color);
    --vfw-shadow-top-lg: 0 -10px 24px var(--vfw-shadow-color);
    --vfw-shadow-top-xl: 0 -20px 48px var(--vfw-shadow-color);
    --vfw-shadow-right-sm: 2px 0 8px var(--vfw-shadow-color);
    --vfw-shadow-right-lg: 10px 0 24px var(--vfw-shadow-color);
    --vfw-shadow-right-xl: 20px 0 48px var(--vfw-shadow-color);
    --vfw-shadow-left-sm: -2px 0 8px var(--vfw-shadow-color);
    --vfw-shadow-left-lg: -10px 0 24px var(--vfw-shadow-color);
    --vfw-shadow-left-xl: -20px 0 48px var(--vfw-shadow-color);
    --vfw-border-active: 2px solid var(--vfw-color-text);
    --vfw-border-active-shadow: 3px 3px 0 0 var(--vfw-color-text);

    /* Z-Index */
    --vfw-z-base: 1;
    --vfw-z-overlay: 100;
    --vfw-z-modal: 200;
    --vfw-z-tooltip: 300;
    --vfw-z-toast: 400;
    --vfw-z-test-controls: 1000;
}

/* Responsive type scale — shrink heading sizes on small viewports */
@media (max-width: 768px) {
    :root {
        --vfw-font-size-h1: 1.75rem;
        --vfw-font-size-h2: 1.5rem;
        --vfw-font-size-h3: 1.35rem;
        --vfw-font-size-h4: 1.2rem;
        --vfw-font-size-h5: 1.05rem;
        --vfw-font-size-h6: 0.95rem;
    }
}

/* ==========================================================================
   4. THEME CLASS & MEDIA OVERRIDES
   ========================================================================== */

/* Light Theme Class Override */
.vfw-theme-light {
    --vfw-color-background: var(--vfw-palette-light-neutral-0);
    --vfw-color-surface: var(--vfw-palette-light-neutral-100);
    --vfw-color-border: var(--vfw-palette-light-neutral-200);
    --vfw-color-text: var(--vfw-palette-light-neutral-1000);
    --vfw-color-text-muted: var(--vfw-palette-light-neutral-500);

    --vfw-color-primary: var(--vfw-palette-light-accent-primary);
    --vfw-color-primary-hover: var(--vfw-palette-light-accent-primary-dark);
    --vfw-color-primary-light: var(--vfw-palette-light-accent-highlight-weak);
    --vfw-color-primary-focus: var(--vfw-palette-light-accent-highlight-strong);
    --vfw-color-text-on-primary: var(--vfw-palette-light-neutral-0);

    --vfw-color-info: var(--vfw-palette-light-info-600);
    --vfw-color-info-bg: var(--vfw-palette-light-info-100);
    --vfw-color-info-border: var(--vfw-palette-light-info-200);
    --vfw-color-info-text: var(--vfw-palette-light-info-800);
    --vfw-color-info-contrast: var(--vfw-palette-light-neutral-0);

    --vfw-color-success: var(--vfw-palette-light-success-600);
    --vfw-color-success-bg: var(--vfw-palette-light-success-100);
    --vfw-color-success-border: var(--vfw-palette-light-success-200);
    --vfw-color-success-text: var(--vfw-palette-light-success-800);
    --vfw-color-success-contrast: var(--vfw-palette-light-neutral-0);

    --vfw-color-warning: var(--vfw-palette-light-warning-600);
    --vfw-color-warning-bg: var(--vfw-palette-light-warning-100);
    --vfw-color-warning-border: var(--vfw-palette-light-warning-200);
    --vfw-color-warning-text: var(--vfw-palette-light-warning-800);
    --vfw-color-warning-contrast: var(--vfw-palette-light-neutral-0);

    --vfw-color-error: var(--vfw-palette-light-error-600);
    --vfw-color-error-bg: var(--vfw-palette-light-error-100);
    --vfw-color-error-border: var(--vfw-palette-light-error-200);
    --vfw-color-error-text: var(--vfw-palette-light-error-800);
    --vfw-color-error-contrast: var(--vfw-palette-light-neutral-0);

    --vfw-navbar-bg: rgba(255, 255, 255, 0.85);
    --vfw-shadow-color: rgba(3, 2, 23, 0.12);
}

/* Dark Theme (Automatic prefers-color-scheme) */
@media (prefers-color-scheme: dark) {
    :root {
        --vfw-color-background: var(--vfw-palette-dark-neutral-0);
        --vfw-color-surface: var(--vfw-palette-dark-neutral-100);
        --vfw-color-border: var(--vfw-palette-dark-neutral-200);
        --vfw-color-text: var(--vfw-palette-dark-neutral-1000);
        --vfw-color-text-muted: var(--vfw-palette-dark-neutral-600); /* intentionally one step lighter than light's -500 for legibility on the dark surface */

        --vfw-color-primary: var(--vfw-palette-dark-accent-primary);
        --vfw-color-primary-hover: var(--vfw-palette-dark-accent-primary-dark);
        --vfw-color-primary-light: var(--vfw-palette-dark-accent-highlight-weak);
        --vfw-color-primary-focus: var(--vfw-palette-dark-accent-highlight-strong);
        --vfw-color-text-on-primary: var(--vfw-palette-dark-neutral-0);

        --vfw-color-info: var(--vfw-palette-dark-info-600);
        --vfw-color-info-bg: var(--vfw-palette-dark-info-100);
        --vfw-color-info-border: var(--vfw-palette-dark-info-200);
        --vfw-color-info-text: var(--vfw-palette-dark-info-800);
        --vfw-color-info-contrast: var(--vfw-palette-dark-neutral-0);

        --vfw-color-success: var(--vfw-palette-dark-success-600);
        --vfw-color-success-bg: var(--vfw-palette-dark-success-100);
        --vfw-color-success-border: var(--vfw-palette-dark-success-200);
        --vfw-color-success-text: var(--vfw-palette-dark-success-800);
        --vfw-color-success-contrast: var(--vfw-palette-dark-neutral-0);

        --vfw-color-warning: var(--vfw-palette-dark-warning-600);
        --vfw-color-warning-bg: var(--vfw-palette-dark-warning-100);
        --vfw-color-warning-border: var(--vfw-palette-dark-warning-200);
        --vfw-color-warning-text: var(--vfw-palette-dark-warning-800);
        --vfw-color-warning-contrast: var(--vfw-palette-dark-neutral-0);

        --vfw-color-error: var(--vfw-palette-dark-error-600);
        --vfw-color-error-bg: var(--vfw-palette-dark-error-100);
        --vfw-color-error-border: var(--vfw-palette-dark-error-200);
        --vfw-color-error-text: var(--vfw-palette-dark-error-800);
        --vfw-color-error-contrast: var(--vfw-palette-dark-neutral-0);

        --vfw-navbar-bg: rgba(3, 2, 23, 0.85);
        --vfw-shadow-color: rgba(0, 0, 0, 0.50);
    }
}

/* Dark Theme Class Override */
.vfw-theme-dark {
    --vfw-color-background: var(--vfw-palette-dark-neutral-0);
    --vfw-color-surface: var(--vfw-palette-dark-neutral-100);
    --vfw-color-border: var(--vfw-palette-dark-neutral-200);
    --vfw-color-text: var(--vfw-palette-dark-neutral-1000);
    --vfw-color-text-muted: var(--vfw-palette-dark-neutral-600); /* intentionally one step lighter than light's -500 for legibility on the dark surface */

    --vfw-color-primary: var(--vfw-palette-dark-accent-primary);
    --vfw-color-primary-hover: var(--vfw-palette-dark-accent-primary-dark);
    --vfw-color-primary-light: var(--vfw-palette-dark-accent-highlight-weak);
    --vfw-color-primary-focus: var(--vfw-palette-dark-accent-highlight-strong);
    --vfw-color-text-on-primary: var(--vfw-palette-dark-neutral-0);

    --vfw-color-info: var(--vfw-palette-dark-info-600);
    --vfw-color-info-bg: var(--vfw-palette-dark-info-100);
    --vfw-color-info-border: var(--vfw-palette-dark-info-200);
    --vfw-color-info-text: var(--vfw-palette-dark-info-800);
    --vfw-color-info-contrast: var(--vfw-palette-dark-neutral-0);

    --vfw-color-success: var(--vfw-palette-dark-success-600);
    --vfw-color-success-bg: var(--vfw-palette-dark-success-100);
    --vfw-color-success-border: var(--vfw-palette-dark-success-200);
    --vfw-color-success-text: var(--vfw-palette-dark-success-800);
    --vfw-color-success-contrast: var(--vfw-palette-dark-neutral-0);

    --vfw-color-warning: var(--vfw-palette-dark-warning-600);
    --vfw-color-warning-bg: var(--vfw-palette-dark-warning-100);
    --vfw-color-warning-border: var(--vfw-palette-dark-warning-200);
    --vfw-color-warning-text: var(--vfw-palette-dark-warning-800);
    --vfw-color-warning-contrast: var(--vfw-palette-dark-neutral-0);

    --vfw-color-error: var(--vfw-palette-dark-error-600);
    --vfw-color-error-bg: var(--vfw-palette-dark-error-100);
    --vfw-color-error-border: var(--vfw-palette-dark-error-200);
    --vfw-color-error-text: var(--vfw-palette-dark-error-800);
    --vfw-color-error-contrast: var(--vfw-palette-dark-neutral-0);

    --vfw-navbar-bg: rgba(3, 2, 23, 0.85);
    --vfw-shadow-color: rgba(0, 0, 0, 0.50);
}
/* @audited cfw style=6364ab58b49d memsec=6364ab58b49d design=100f936360fb */