/**
 * V+M Design System Tokens
 * CSS Custom Properties
 * Version: 3.2.0
 * Last Updated: 2025-09-28
 *
 * This file contains all design tokens as CSS custom properties
 * for use in V+M applications and components.
 *
 * v3.2.0 Notes:
 * - AI-first approach (tokens unchanged, usage simplified)
 * - Use with INDEX.md component registry
 * - No custom CSS allowed outside these tokens
 *
 * Token Features:
 * - Extended brand color scale (50-900)
 * - Complete semantic color variations
 * - Letter-spacing tokens
 * - Fluid typography support
 * - Negative spacing tokens
 * - Z-index scale
 * - Animation easings
 * - Interaction state tokens
 * - Border width tokens
 * - Component-specific tokens
 * - Automatic dark mode support
 */

:root {
  /* ============================================
     BRAND COLORS - Extended Scale
     ============================================ */
  --vm-color-brand-red-50: #FEF2F2;
  --vm-color-brand-red-100: #FEE2E2;
  --vm-color-brand-red-200: #FBBCBC;
  --vm-color-brand-red-300: #F87979;
  --vm-color-brand-red-400: #EF4444;
  --vm-color-brand-red-500: #C8102E;  /* Primary brand red */
  --vm-color-brand-red-600: #A00E25;
  --vm-color-brand-red-700: #7F0A1D;
  --vm-color-brand-red-800: #5C0714;
  --vm-color-brand-red-900: #3B040C;
  
  /* Legacy brand color names for backwards compatibility */
  --vm-color-brand-vm-red: var(--vm-color-brand-red-500);
  --vm-color-brand-vm-red-light: #E31E39;
  --vm-color-brand-vm-red-dark: var(--vm-color-brand-red-600);
  --vm-color-brand-vm-white: #FFFFFF;
  --vm-color-brand-vm-black: #1A1A1A;
  
  /* ============================================
     NEUTRAL COLORS
     ============================================ */
  --vm-color-neutral-gray-50: #F9F9F9;
  --vm-color-neutral-gray-100: #F3F4F6;
  --vm-color-neutral-gray-200: #E5E7EB;
  --vm-color-neutral-gray-300: #D1D5DB;
  --vm-color-neutral-gray-400: #9CA3AF;
  --vm-color-neutral-gray-500: #6B7280;
  --vm-color-neutral-gray-600: #4B5563;
  --vm-color-neutral-gray-700: #374151;
  --vm-color-neutral-gray-800: #4A5568; /* Further lightened for softer appearance */
  --vm-color-neutral-gray-900: #111827;
  
  /* ============================================
     SEMANTIC COLORS - Complete Variations
     ============================================ */
  /* Success */
  --vm-color-semantic-success-light: #D1FAE5;
  --vm-color-semantic-success: #059669;
  --vm-color-semantic-success-dark: #047857;
  
  /* Warning */
  --vm-color-semantic-warning-light: #FEF3C7;
  --vm-color-semantic-warning: #D97706;
  --vm-color-semantic-warning-dark: #B45309;
  
  /* Error */
  --vm-color-semantic-error-light: #FEE2E2;
  --vm-color-semantic-error: #DC2626;
  --vm-color-semantic-error-dark: #B91C1C;
  
  /* Info */
  --vm-color-semantic-info-light: #DBEAFE;
  --vm-color-semantic-info: #2563EB;
  --vm-color-semantic-info-dark: #1E40AF;
  --vm-color-semantic-info-text: #60A5FA; /* Light blue for text on dark backgrounds */
  
  /* ============================================
     SEMANTIC UI VARIABLES - Text, Surfaces, Borders
     These provide semantic meaning for UI elements
     ============================================ */
  /* Text hierarchy with WCAG AA compliant contrast */
  --vm-color-text-primary: var(--vm-color-brand-vm-black);     /* 17.40:1 on white */
  --vm-color-text-secondary: var(--vm-color-neutral-gray-600); /* 7.59:1 on white */
  --vm-color-text-tertiary: var(--vm-color-neutral-gray-500);  /* 4.83:1 on white */
  --vm-color-text-muted: var(--vm-color-neutral-gray-400);     /* 2.54:1 - decorative only */

  /* Surface colors for backgrounds and cards */
  --vm-color-surface-primary: var(--vm-color-brand-vm-white);
  --vm-color-surface-secondary: var(--vm-color-neutral-gray-50);
  --vm-color-surface-tertiary: var(--vm-color-neutral-gray-100);
  --vm-color-surface-elevated: var(--vm-color-brand-vm-white);

  /* Border colors for UI elements */
  --vm-color-border-primary: var(--vm-color-neutral-gray-200);
  --vm-color-border-secondary: var(--vm-color-neutral-gray-300);
  --vm-color-border-focus: var(--vm-color-brand-red-500);

  /* Background colors */
  --vm-color-background-primary: var(--vm-color-brand-vm-white);
  --vm-color-background-muted: var(--vm-color-neutral-gray-50);

  /* ============================================
     SHORTHAND ALIASES (For Backwards Compatibility)
     ============================================ */
  /* Brand color shortcuts */
  --vm-red: var(--vm-color-brand-red-500);
  --vm-red-light: var(--vm-color-brand-red-400);
  --vm-red-dark: var(--vm-color-brand-red-600);
  --vm-red-800: var(--vm-color-brand-red-800);
  --vm-red-900: var(--vm-color-brand-red-900);
  --vm-white: var(--vm-color-brand-white);
  --vm-black: var(--vm-color-brand-black);
  --vm-text-on-dark: #FFFFFF;

  /* Semantic color shortcuts */
  --success: var(--vm-color-semantic-success);
  --success-light: var(--vm-color-semantic-success-light);
  --success-dark: var(--vm-color-semantic-success-dark);
  --warning: var(--vm-color-semantic-warning);
  --warning-light: var(--vm-color-semantic-warning-light);
  --warning-dark: var(--vm-color-semantic-warning-dark);
  --error: var(--vm-color-semantic-error);
  --error-light: var(--vm-color-semantic-error-light);
  --error-dark: var(--vm-color-semantic-error-dark);
  --info: var(--vm-color-semantic-info);
  --info-light: var(--vm-color-semantic-info-light);
  --info-dark: var(--vm-color-semantic-info-dark);
  --info-text: var(--vm-color-semantic-info-text);

  /* Gray shortcuts */
  --vm-gray-50: var(--vm-color-neutral-gray-50);
  --vm-gray-100: var(--vm-color-neutral-gray-100);
  --vm-gray-200: var(--vm-color-neutral-gray-200);
  --vm-gray-300: var(--vm-color-neutral-gray-300);
  --vm-gray-400: var(--vm-color-neutral-gray-400);
  --vm-gray-500: var(--vm-color-neutral-gray-500);
  --vm-gray-600: var(--vm-color-neutral-gray-600);
  --vm-gray-700: var(--vm-color-neutral-gray-700);
  --vm-gray-800: var(--vm-color-neutral-gray-800);
  --vm-gray-900: var(--vm-color-neutral-gray-900);

  /* Common shortcuts */
  --radius-sm: var(--vm-border-radius-sm);
  --radius-md: var(--vm-border-radius-md);
  --radius-lg: var(--vm-border-radius-lg);
  --radius-xl: var(--vm-border-radius-xl);
  --radius-2xl: var(--vm-border-radius-2xl);
  --shadow-sm: var(--vm-shadow-sm);
  --shadow-md: var(--vm-shadow-md);
  --shadow-lg: var(--vm-shadow-lg);
  --shadow-xl: var(--vm-shadow-xl);
  --shadow-2xl: var(--vm-shadow-2xl);
  --text-shadow-sm: var(--vm-text-shadow-sm);  /* NEW v3.1.0 */
  --text-shadow-md: var(--vm-text-shadow-md);  /* NEW v3.1.0 */
  --text-shadow-lg: var(--vm-text-shadow-lg);  /* NEW v3.1.0 */
  --text-shadow-none: var(--vm-text-shadow-none);  /* NEW v3.1.0 */
  --transition-base: var(--vm-animation-transition-base);
  --transition-fast: var(--vm-animation-transition-fast);
  --transition-slow: var(--vm-animation-transition-slow);
  --font-display: var(--vm-typography-font-family-display);
  --space-xs: var(--vm-spacing-xs);
  --space-sm: var(--vm-spacing-sm);
  --space-md: var(--vm-spacing-md);
  --space-lg: var(--vm-spacing-lg);
  --space-xl: var(--vm-spacing-xl);
  --space-2xl: var(--vm-spacing-2xl);
  --space-3xl: var(--vm-spacing-3xl);
  --space-xxl: var(--vm-spacing-2xl); /* Common typo */
  --space-xxxl: var(--vm-spacing-3xl); /* Common typo */

  /* ============================================
     INTERACTION STATES - NEW
     ============================================ */
  --vm-state-hover-opacity: 0.9;
  --vm-state-active-opacity: 0.8;
  --vm-state-disabled-opacity: 0.5;
  --vm-state-hover-overlay: rgba(200, 16, 46, 0.1);
  --vm-state-active-overlay: rgba(200, 16, 46, 0.2);
  --vm-state-disabled-overlay: rgba(107, 114, 128, 0.5);
  --vm-state-focus-color: var(--vm-color-brand-red-500);
  --vm-state-focus-color-alt: var(--vm-color-semantic-info);
  
  /* ============================================
     TYPOGRAPHY - Font Families
     ============================================ */
  --vm-typography-font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --vm-typography-font-family-display: 'Bebas Neue', 'Arial Black', Arial, sans-serif;
  --vm-typography-font-family-mono: 'JetBrains Mono', Monaco, 'Consolas', monospace;
  
  /* ============================================
     TYPOGRAPHY - Font Sizes
     ============================================ */
  /* Static sizes */
  --vm-typography-font-size-xs: 0.75rem;    /* 12px */
  --vm-typography-font-size-sm: 0.875rem;   /* 14px */
  --vm-typography-font-size-base: 1rem;     /* 16px */
  --vm-typography-font-size-lg: 1.125rem;   /* 18px */
  --vm-typography-font-size-xl: 1.25rem;    /* 20px */
  --vm-typography-font-size-2xl: 1.5rem;    /* 24px */
  --vm-typography-font-size-3xl: 2rem;      /* 32px */
  --vm-typography-font-size-4xl: 2.5rem;    /* 40px */
  --vm-typography-font-size-5xl: 3rem;      /* 48px */
  
  /* Fluid responsive sizes - NEW */
  --vm-typography-font-size-base-fluid: clamp(0.875rem, 2vw, 1rem);
  --vm-typography-font-size-lg-fluid: clamp(1rem, 2.5vw, 1.125rem);
  --vm-typography-font-size-xl-fluid: clamp(1.125rem, 3vw, 1.25rem);
  --vm-typography-font-size-2xl-fluid: clamp(1.25rem, 3.5vw, 1.5rem);
  --vm-typography-font-size-3xl-fluid: clamp(1.75rem, 4vw, 2rem);
  --vm-typography-font-size-4xl-fluid: clamp(2rem, 5vw, 2.5rem);
  --vm-typography-font-size-5xl-fluid: clamp(2.5rem, 6vw, 3rem);
  
  /* ============================================
     TYPOGRAPHY - Font Weights
     ============================================ */
  --vm-typography-font-weight-normal: 400;
  --vm-typography-font-weight-medium: 500;
  --vm-typography-font-weight-semibold: 600;
  --vm-typography-font-weight-bold: 700;
  
  /* ============================================
     TYPOGRAPHY - Line Heights
     ============================================ */
  --vm-typography-line-height-tight: 1.1;
  --vm-typography-line-height-snug: 1.2;
  --vm-typography-line-height-normal: 1.3;
  --vm-typography-line-height-relaxed: 1.4;
  --vm-typography-line-height-loose: 1.5;
  --vm-typography-line-height-extra-loose: 1.6;
  
  /* ============================================
     TYPOGRAPHY - Letter Spacing - NEW
     ============================================ */
  --vm-typography-letter-spacing-tighter: -0.05em;
  --vm-typography-letter-spacing-tight: -0.025em;
  --vm-typography-letter-spacing-normal: 0;
  --vm-typography-letter-spacing-wide: 0.025em;
  --vm-typography-letter-spacing-wider: 0.05em;
  --vm-typography-letter-spacing-widest: 0.1em;
  
  /* ============================================
     SPACING - Positive Values
     ============================================ */
  --vm-spacing-xs: 0.25rem;     /* 4px */
  --vm-spacing-sm: 0.5rem;      /* 8px */
  --vm-spacing-md: 1rem;        /* 16px */
  --vm-spacing-lg: 1.5rem;      /* 24px */
  --vm-spacing-xl: 2rem;        /* 32px */
  --vm-spacing-2xl: 3rem;       /* 48px */
  --vm-spacing-3xl: 4rem;       /* 64px */
  --vm-spacing-4xl: 6rem;       /* 96px - NEW */
  --vm-spacing-5xl: 8rem;       /* 128px - NEW */
  
  /* ============================================
     SPACING - Negative Values - NEW
     ============================================ */
  --vm-spacing-negative-xs: -0.25rem;
  --vm-spacing-negative-sm: -0.5rem;
  --vm-spacing-negative-md: -1rem;
  --vm-spacing-negative-lg: -1.5rem;
  --vm-spacing-negative-xl: -2rem;
  --vm-spacing-negative-2xl: -3rem;
  --vm-spacing-negative-3xl: -4rem;
  
  /* ============================================
     BORDERS - Radius
     ============================================ */
  --vm-border-radius-none: 0;        /* NEW */
  --vm-border-radius-sm: 0.25rem;    /* 4px */
  --vm-border-radius-md: 0.375rem;   /* 6px */
  --vm-border-radius-lg: 0.5rem;     /* 8px */
  --vm-border-radius-xl: 0.75rem;    /* 12px */
  --vm-border-radius-2xl: 1rem;      /* 16px - NEW */
  --vm-border-radius-full: 9999px;   /* Full round - NEW */
  
  /* ============================================
     BORDERS - Width - NEW
     ============================================ */
  --vm-border-width-none: 0;
  --vm-border-width-thin: 1px;
  --vm-border-width-medium: 2px;
  --vm-border-width-thick: 4px;
  --vm-border-width-extra-thick: 8px;
  
  /* ============================================
     BOX SHADOWS
     ============================================ */
  --vm-box-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.03);  /* NEW */
  --vm-box-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --vm-box-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --vm-box-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --vm-box-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --vm-box-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);  /* NEW */
  --vm-box-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);  /* NEW */
  --vm-box-shadow-none: none;  /* NEW */

  /* ============================================
     TEXT SHADOW SCALE - NEW v3.1.0
     ============================================ */
  --vm-text-shadow-sm: 0 1px 2px color-mix(in srgb, var(--vm-black) 20%, transparent);
  --vm-text-shadow-md: 0 1px 3px color-mix(in srgb, var(--vm-black) 30%, transparent);
  --vm-text-shadow-lg: 0 2px 4px color-mix(in srgb, var(--vm-black) 40%, transparent);
  --vm-text-shadow-none: none;

  /* ============================================
     Z-INDEX SCALE - NEW
     ============================================ */
  --vm-z-index-deep: -999;
  --vm-z-index-default: 1;
  --vm-z-index-dropdown: 1000;
  --vm-z-index-sticky: 1020;
  --vm-z-index-fixed: 1030;
  --vm-z-index-modal-backdrop: 1040;
  --vm-z-index-modal: 1050;
  --vm-z-index-popover: 1060;
  --vm-z-index-tooltip: 1070;
  --vm-z-index-notification: 1080;
  --vm-z-index-top: 9999;
  
  /* ============================================
     ANIMATION - Durations
     ============================================ */
  --vm-animation-duration-instant: 0s;      /* NEW */
  --vm-animation-duration-fast: 0.15s;
  --vm-animation-duration-base: 0.2s;
  --vm-animation-duration-moderate: 0.25s;  /* NEW */
  --vm-animation-duration-slow: 0.3s;
  --vm-animation-duration-slower: 0.5s;     /* NEW */
  --vm-animation-duration-slowest: 1s;      /* NEW */
  
  /* ============================================
     ANIMATION - Easings
     ============================================ */
  --vm-animation-easing-linear: linear;  /* NEW */
  --vm-animation-easing-ease: ease;
  --vm-animation-easing-ease-in: ease-in;
  --vm-animation-easing-ease-out: ease-out;
  --vm-animation-easing-ease-in-out: ease-in-out;
  /* Advanced easings - NEW */
  --vm-animation-easing-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --vm-animation-easing-smooth-in: cubic-bezier(0.4, 0, 1, 1);
  --vm-animation-easing-smooth-out: cubic-bezier(0, 0, 0.2, 1);
  --vm-animation-easing-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --vm-animation-easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --vm-animation-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  
  /* ============================================
     LAYOUT - Containers
     ============================================ */
  --vm-layout-container-xs: 480px;   /* NEW */
  --vm-layout-container-sm: 640px;   /* NEW */
  --vm-layout-container-md: 768px;   /* NEW */
  --vm-layout-container-lg: 1024px;  /* NEW */
  --vm-layout-container-xl: 1280px;  /* NEW */
  --vm-layout-container-max-width: 1400px;
  --vm-layout-container-full: 100%;  /* NEW */
  
  /* ============================================
     LAYOUT - Breakpoints
     ============================================ */
  --vm-layout-breakpoint-xs: 480px;  /* NEW */
  --vm-layout-breakpoint-sm: 576px;
  --vm-layout-breakpoint-md: 768px;
  --vm-layout-breakpoint-lg: 992px;
  --vm-layout-breakpoint-xl: 1200px;
  --vm-layout-breakpoint-2xl: 1400px;  /* NEW */
  
  /* ============================================
     LAYOUT - Grid & Gaps - NEW
     ============================================ */
  --vm-layout-grid-columns: 12;
  --vm-layout-gap-xs: var(--vm-spacing-xs);
  --vm-layout-gap-sm: var(--vm-spacing-sm);
  --vm-layout-gap-md: var(--vm-spacing-md);
  --vm-layout-gap-lg: var(--vm-spacing-lg);
  --vm-layout-gap-xl: var(--vm-spacing-xl);
  
  /* ============================================
     COMPONENT - Buttons
     ============================================ */
  --vm-component-button-height-xs: 28px;  /* NEW */
  --vm-component-button-height-sm: 32px;
  --vm-component-button-height-md: 44px;
  --vm-component-button-height-lg: 48px;
  --vm-component-button-height-xl: 56px;
  /* Button paddings - NEW */
  --vm-component-button-padding-xs: 4px 8px;
  --vm-component-button-padding-sm: 6px 12px;
  --vm-component-button-padding-md: 10px 20px;
  --vm-component-button-padding-lg: 12px 24px;
  --vm-component-button-padding-xl: 16px 32px;
  
  /* ============================================
     COMPONENT - Forms/Inputs
     ============================================ */
  --vm-component-input-height-sm: 36px;  /* NEW */
  --vm-component-input-height: 44px;
  --vm-component-input-height-lg: 52px;  /* NEW */
  --vm-component-input-padding: 8px 16px;
  --vm-component-input-padding-sm: 6px 12px;  /* NEW */
  --vm-component-input-padding-lg: 12px 20px;  /* NEW */
  --vm-component-textarea-min-height: 100px;  /* NEW */
  --vm-component-checkbox-size: 20px;  /* NEW */
  --vm-component-radio-size: 20px;  /* NEW */
  --vm-component-switch-width: 44px;  /* NEW */
  --vm-component-switch-height: 24px;  /* NEW */
  
  /* ============================================
     COMPONENT - Cards - NEW
     ============================================ */
  --vm-component-card-padding-sm: 16px;
  --vm-component-card-padding-md: 24px;
  --vm-component-card-padding-lg: 32px;
  --vm-component-card-gap: 16px;
  
  /* ============================================
     COMPONENT - KPI Cards
     ============================================ */
  --vm-component-kpi-card-min-height: 160px;
  --vm-component-kpi-card-padding: 32px;
  
  /* ============================================
     COMPONENT - Tables
     ============================================ */
  --vm-component-table-cell-padding: 16px 24px;
  --vm-component-table-cell-padding-compact: 8px 16px;  /* NEW */
  --vm-component-table-header-height: 48px;
  --vm-component-table-row-height: 56px;  /* NEW */
  
  /* ============================================
     COMPONENT - Modals - NEW
     ============================================ */
  --vm-component-modal-width-sm: 400px;
  --vm-component-modal-width-md: 600px;
  --vm-component-modal-width-lg: 800px;
  --vm-component-modal-width-xl: 1200px;
  --vm-component-modal-padding: 24px;
  --vm-component-modal-radius: var(--vm-border-radius-xl);
  
  /* ============================================
     COMPONENT - Navigation - NEW
     ============================================ */
  --vm-component-nav-height: 64px;
  --vm-component-nav-height-mobile: 56px;
  --vm-component-sidebar-width: 280px;
  --vm-component-sidebar-width-collapsed: 64px;
  
  /* ============================================
     ACCESSIBILITY
     ============================================ */
  --vm-accessibility-focus-outline-color: var(--vm-color-brand-red-500);
  --vm-accessibility-focus-outline-width: 2px;
  --vm-accessibility-focus-outline-offset: 2px;
  --vm-accessibility-focus-outline-style: solid;  /* NEW */
  --vm-accessibility-touch-target-min-size: 44px;
  --vm-accessibility-contrast-min-ratio: 4.5;  /* NEW */
}

/**
 * ============================================
 * SEMANTIC COLOR ALIASES
 * ============================================
 */
:root {
  /* Primary Brand Colors (aliases) */
  --vm-red: var(--vm-color-brand-vm-red);
  --vm-red-light: var(--vm-color-brand-vm-red-light);
  --vm-red-dark: var(--vm-color-brand-vm-red-dark);
  --vm-white: var(--vm-color-brand-vm-white);
  --vm-black: var(--vm-color-brand-vm-black);
  
  /* Extended Red Scale (aliases) - NEW */
  --vm-red-50: var(--vm-color-brand-red-50);
  --vm-red-100: var(--vm-color-brand-red-100);
  --vm-red-200: var(--vm-color-brand-red-200);
  --vm-red-300: var(--vm-color-brand-red-300);
  --vm-red-400: var(--vm-color-brand-red-400);
  --vm-red-500: var(--vm-color-brand-red-500);
  --vm-red-600: var(--vm-color-brand-red-600);
  --vm-red-700: var(--vm-color-brand-red-700);
  --vm-red-800: var(--vm-color-brand-red-800);
  --vm-red-900: var(--vm-color-brand-red-900);
  
  /* Neutral Colors (aliases) */
  --vm-gray-50: var(--vm-color-neutral-gray-50);
  --vm-gray-100: var(--vm-color-neutral-gray-100);
  --vm-gray-200: var(--vm-color-neutral-gray-200);
  --vm-gray-300: var(--vm-color-neutral-gray-300);
  --vm-gray-400: var(--vm-color-neutral-gray-400);
  --vm-gray-500: var(--vm-color-neutral-gray-500);
  --vm-gray-600: var(--vm-color-neutral-gray-600);
  --vm-gray-700: var(--vm-color-neutral-gray-700);
  --vm-gray-800: var(--vm-color-neutral-gray-800);
  --vm-gray-900: var(--vm-color-neutral-gray-900);
  
  /* Status Colors (aliases) */
  --success: var(--vm-color-semantic-success);
  --success-light: var(--vm-color-semantic-success-light);
  --success-dark: var(--vm-color-semantic-success-dark);  /* NEW */
  --warning: var(--vm-color-semantic-warning);
  --warning-light: var(--vm-color-semantic-warning-light);
  --warning-dark: var(--vm-color-semantic-warning-dark);  /* NEW */
  --error: var(--vm-color-semantic-error);
  --error-light: var(--vm-color-semantic-error-light);
  --error-dark: var(--vm-color-semantic-error-dark);  /* NEW */
  --info: var(--vm-color-semantic-info);
  --info-light: var(--vm-color-semantic-info-light);
  --info-dark: var(--vm-color-semantic-info-dark);  /* NEW */
  --info-text: var(--vm-color-semantic-info-text);  /* NEW - for dark mode text */
  
  /* Typography Aliases */
  --font-primary: var(--vm-typography-font-family-primary);
  --font-display: var(--vm-typography-font-family-display);
  --font-mono: var(--vm-typography-font-family-mono);
  
  /* Spacing Aliases */
  --space-xs: var(--vm-spacing-xs);
  --space-sm: var(--vm-spacing-sm);
  --space-md: var(--vm-spacing-md);
  --space-lg: var(--vm-spacing-lg);
  --space-xl: var(--vm-spacing-xl);
  --space-2xl: var(--vm-spacing-2xl);
  --space-3xl: var(--vm-spacing-3xl);
  --space-4xl: var(--vm-spacing-4xl);  /* NEW */
  --space-5xl: var(--vm-spacing-5xl);  /* NEW */
  
  /* Border Radius Aliases */
  --radius-none: var(--vm-border-radius-none);  /* NEW */
  --radius-sm: var(--vm-border-radius-sm);
  --radius-md: var(--vm-border-radius-md);
  --radius-lg: var(--vm-border-radius-lg);
  --radius-xl: var(--vm-border-radius-xl);
  --radius-2xl: var(--vm-border-radius-2xl);  /* NEW */
  --radius-full: var(--vm-border-radius-full);  /* NEW */
  
  /* Shadow Aliases */
  --shadow-xs: var(--vm-box-shadow-xs);  /* NEW */
  --shadow-sm: var(--vm-box-shadow-sm);
  --shadow-md: var(--vm-box-shadow-md);
  --shadow-lg: var(--vm-box-shadow-lg);
  --shadow-xl: var(--vm-box-shadow-xl);
  --shadow-2xl: var(--vm-box-shadow-2xl);  /* NEW */
  --shadow-inner: var(--vm-box-shadow-inner);  /* NEW */
  --shadow-none: var(--vm-box-shadow-none);  /* NEW */
  
  /* Transition Aliases */
  --transition-instant: var(--vm-animation-duration-instant) var(--vm-animation-easing-smooth);  /* NEW */
  --transition-fast: var(--vm-animation-duration-fast) var(--vm-animation-easing-smooth);
  --transition-base: var(--vm-animation-duration-base) var(--vm-animation-easing-smooth);
  --transition-slow: var(--vm-animation-duration-slow) var(--vm-animation-easing-smooth);
  --transition-spring: var(--vm-animation-duration-moderate) var(--vm-animation-easing-spring);  /* NEW */

  /* ============================================
     COMPONENT - Form Field Variables (Light)
     ============================================ */
  --vm-form-field-bg: var(--vm-white);
  --vm-form-field-text: var(--vm-gray-900);
  --vm-form-field-placeholder: var(--vm-gray-400);
  --vm-form-field-border: var(--vm-gray-300);
  --vm-form-field-focus-ring: rgba(200, 16, 46, 0.1);

  /* Surfaces (light) */
  --vm-surface-page-bg: var(--vm-white);
  --vm-surface-card-bg: var(--vm-white);
  --vm-surface-card-border: var(--vm-gray-200);
  --vm-surface-muted-bg: var(--vm-gray-100);

  /* ============================================
     COMPONENT - Button Variant Variables (Light)
     ============================================ */
  /* Secondary */
  --vm-button-secondary-bg: #F8FAFC;            /* subtle contrast on white cards */
  --vm-button-secondary-text: var(--vm-gray-800);
  --vm-button-secondary-border: #D1D5DB;        /* gray-300 */
  --vm-button-secondary-bg-hover: #EEF2F7;      /* soft hover */
  --vm-button-secondary-text-hover: var(--vm-gray-900);
  --vm-button-secondary-border-hover: #9CA3AF;  /* gray-400 */

  /* Outline */
  --vm-button-outline-bg: transparent;
  --vm-button-outline-text: var(--vm-gray-800);
  --vm-button-outline-border: #D1D5DB;          /* gray-300 */
  --vm-button-outline-bg-hover: #F3F4F6;        /* gray-100 */
  --vm-button-outline-text-hover: var(--vm-gray-900);
  --vm-button-outline-border-hover: #9CA3AF;    /* gray-400 */

  /* Back-compat aliases used by app CSS */
  --btn-secondary-bg: var(--vm-button-secondary-bg);
  --btn-secondary-text: var(--vm-button-secondary-text);
  --btn-secondary-border: var(--vm-button-secondary-border);
  --btn-secondary-bg-hover: var(--vm-button-secondary-bg-hover);
  --btn-secondary-text-hover: var(--vm-button-secondary-text-hover);
  --btn-secondary-border-hover: var(--vm-button-secondary-border-hover);

  --btn-outline-bg: var(--vm-button-outline-bg);
  --btn-outline-text: var(--vm-button-outline-text);
  --btn-outline-border: var(--vm-button-outline-border);
  --btn-outline-bg-hover: var(--vm-button-outline-bg-hover);
  --btn-outline-text-hover: var(--vm-button-outline-text-hover);
  --btn-outline-border-hover: var(--vm-button-outline-border-hover);

  /* ============================================
     COMPONENT - Chart Surface (Light)
     ============================================ */
  --vm-chart-surface-bg: var(--vm-white);
  --vm-chart-surface-border: var(--vm-gray-200);
}

/**
 * ============================================
 * DARK MODE SUPPORT
 * ============================================
 */
@media (prefers-color-scheme: dark) {
  :root {
    /* Inverted neutrals */
    --vm-color-neutral-gray-50: #111827;
    --vm-color-neutral-gray-100: #1F2937;
    --vm-color-neutral-gray-200: #374151;
    --vm-color-neutral-gray-300: #4B5563;
    --vm-color-neutral-gray-400: #6B7280;
    --vm-color-neutral-gray-500: #9CA3AF;
    --vm-color-neutral-gray-600: #D1D5DB;
    --vm-color-neutral-gray-700: #E5E7EB;
    --vm-color-neutral-gray-800: #1F2937; /* Proper dark surface color */
    --vm-color-neutral-gray-900: #F9FAFB;
    
    /* Adjusted semantic colors for dark mode */
    --vm-color-semantic-success-light: #064E3B;
    --vm-color-semantic-warning-light: #78350F;
    --vm-color-semantic-error-light: #7F1D1D;
    --vm-color-semantic-info-light: #1E3A8A;
    
    /* Adjusted shadows for dark mode */
    --vm-box-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
    --vm-box-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
    --vm-box-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
    --vm-box-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
    
    /* Override brand colors for dark mode */
    --vm-color-brand-vm-white: #1F2937;  /* Cards should be dark gray */
    --vm-color-brand-vm-black: #F9FAFB;  /* Text should be light */
    
    /* Dark mode specific tokens */
    --vm-dark-surface-raised: #1F2937;
    --vm-dark-surface-overlay: rgba(255, 255, 255, 0.05);

    /* Semantic UI Variables - Dark Mode Overrides */
    --vm-color-text-primary: var(--vm-color-neutral-gray-900);   /* Light text on dark */
    --vm-color-text-secondary: var(--vm-color-neutral-gray-500); /* 5.39:1 contrast */
    --vm-color-text-tertiary: var(--vm-color-neutral-gray-500);  /* Fixed from gray-400 */
    --vm-color-text-muted: var(--vm-color-neutral-gray-400);

    --vm-color-surface-primary: var(--vm-color-neutral-gray-50); /* Dark background */
    --vm-color-surface-secondary: var(--vm-color-neutral-gray-100);
    --vm-color-surface-tertiary: var(--vm-color-neutral-gray-200);
    --vm-color-surface-elevated: var(--vm-color-neutral-gray-100);

    --vm-color-border-primary: var(--vm-color-neutral-gray-200);
    --vm-color-border-secondary: var(--vm-color-neutral-gray-300);
    --vm-color-border-focus: var(--vm-color-brand-red-300); /* Lighter red for dark mode */

    --vm-color-background-primary: var(--vm-color-neutral-gray-50);
    --vm-color-background-muted: var(--vm-color-neutral-gray-100);

    /* Surfaces (dark) */
    --vm-surface-page-bg: #111827;
    --vm-surface-card-bg: #1F2937;
    --vm-surface-card-border: #374151;
    --vm-surface-muted-bg: #111827;

    /* ============================================
       COMPONENT - Form Field Variables (Dark)
       ============================================ */
    --vm-form-field-bg: #1F2937; /* dark surface */
    --vm-form-field-text: #E5E7EB; /* gray-200 */
    --vm-form-field-placeholder: #9CA3AF; /* gray-400 */
    --vm-form-field-border: #4B5563; /* gray-600 */
    --vm-form-field-focus-ring: rgba(200, 16, 46, 0.22);

    /* ============================================
       COMPONENT - Button Variant Variables (Dark)
       ============================================ */
    /* Secondary (theme-aware) */
    --vm-button-secondary-bg: rgba(255, 255, 255, 0.08);
    --vm-button-secondary-text: #E5E7EB;             /* gray-200 */
    --vm-button-secondary-border: rgba(255, 255, 255, 0.18);
    --vm-button-secondary-bg-hover: rgba(255, 255, 255, 0.14);
    --vm-button-secondary-text-hover: #FFFFFF;
    --vm-button-secondary-border-hover: rgba(255, 255, 255, 0.30);

    /* Outline (theme-aware) */
    --vm-button-outline-bg: transparent;
    --vm-button-outline-text: #E5E7EB;               /* gray-200 */
    --vm-button-outline-border: rgba(255, 255, 255, 0.30);
    --vm-button-outline-bg-hover: rgba(255, 255, 255, 0.12);
    --vm-button-outline-text-hover: #FFFFFF;
    --vm-button-outline-border-hover: rgba(255, 255, 255, 0.45);

    /* Back-compat aliases */
    --btn-secondary-bg: var(--vm-button-secondary-bg);
    --btn-secondary-text: var(--vm-button-secondary-text);
    --btn-secondary-border: var(--vm-button-secondary-border);
    --btn-secondary-bg-hover: var(--vm-button-secondary-bg-hover);
    --btn-secondary-text-hover: var(--vm-button-secondary-text-hover);
    --btn-secondary-border-hover: var(--vm-button-secondary-border-hover);

    --btn-outline-bg: var(--vm-button-outline-bg);
    --btn-outline-text: var(--vm-button-outline-text);
    --btn-outline-border: var(--vm-button-outline-border);
    --btn-outline-bg-hover: var(--vm-button-outline-bg-hover);
    --btn-outline-text-hover: var(--vm-button-outline-text-hover);
    --btn-outline-border-hover: var(--vm-button-outline-border-hover);

    /* ============================================
       COMPONENT - Chart Surface (Dark)
       ============================================ */
    --vm-chart-surface-bg: #111827;
    --vm-chart-surface-border: #374151;

    /* ============================================
       SHORT-FORM ALIASES - Dark Mode Overrides (MISSING - CRITICAL FIX)
       ============================================ */
    /* Brand color shortcuts - REQUIRED for component compatibility */
    --vm-red: var(--vm-color-brand-red-500);     /* Keep same */
    --vm-red-light: var(--vm-color-brand-red-400); /* Keep same */
    --vm-red-dark: var(--vm-color-brand-red-600);  /* Keep same */
    --vm-red-800: var(--vm-color-brand-red-800);   /* Keep same */
    --vm-red-900: var(--vm-color-brand-red-900);   /* Keep same */
    --vm-white: #1F2937;  /* Dark card background */
    --vm-black: #F9FAFB;  /* Light text on dark */
    --vm-text-on-dark: #FFFFFF;  /* Always white text for dark backgrounds */

    /* Gray shortcuts - REQUIRED for component compatibility */
    --vm-gray-50: #111827;   /* Darkest background */
    --vm-gray-100: #1F2937;  /* Dark surface */
    --vm-gray-200: #374151;  /* Border color */
    --vm-gray-300: #4B5563;  /* Secondary border */
    --vm-gray-400: #6B7280;  /* Muted text */
    --vm-gray-500: #9CA3AF;  /* Secondary text */
    --vm-gray-600: #D1D5DB;  /* Primary text */
    --vm-gray-700: #E5E7EB;  /* Light text */
    --vm-gray-800: #F3F4F6;  /* Very light text */
    --vm-gray-900: #F9FAFB;  /* Lightest text */

    /* Semantic color shortcuts - REQUIRED for component compatibility */
    --success-light: #064E3B;
    --warning-light: #78350F;
    --error-light: #7F1D1D;
    --info-light: #1E3A8A;

    /* Layout shortcuts - Shadow overrides for dark mode */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);

    /* Header text - ALWAYS white on red banner (never changes in dark mode) */
    --vm-header-text-color: #FFFFFF;
    --vm-header-subtitle-color: rgba(255, 255, 255, 0.95);
  }
}

/**
 * ============================================
 * UNIFIED DARK MODE SUPPORT - Manual Toggle Compatibility
 * ============================================
 * This section ensures [data-theme="dark"] manual toggles work
 * identically to automatic @media (prefers-color-scheme: dark)
 */
[data-theme="dark"]:root {
  /* COMPLETE DUPLICATE of @media (prefers-color-scheme: dark) overrides */
  /* This ensures manual toggle matches automatic system exactly */

  /* Inverted neutrals */
  --vm-color-neutral-gray-50: #111827;
  --vm-color-neutral-gray-100: #1F2937;
  --vm-color-neutral-gray-200: #374151;
  --vm-color-neutral-gray-300: #4B5563;
  --vm-color-neutral-gray-400: #6B7280;
  --vm-color-neutral-gray-500: #9CA3AF;
  --vm-color-neutral-gray-600: #D1D5DB;
  --vm-color-neutral-gray-700: #E5E7EB;
  --vm-color-neutral-gray-800: #1F2937;
  --vm-color-neutral-gray-900: #F9FAFB;

  /* Adjusted semantic colors for dark mode */
  --vm-color-semantic-success-light: #064E3B;
  --vm-color-semantic-warning-light: #78350F;
  --vm-color-semantic-error-light: #7F1D1D;
  --vm-color-semantic-info-light: #1E3A8A;

  /* Adjusted shadows for dark mode */
  --vm-box-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  --vm-box-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
  --vm-box-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
  --vm-box-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5);

  /* Override brand colors for dark mode */
  --vm-color-brand-vm-white: #1F2937;
  --vm-color-brand-vm-black: #F9FAFB;

  /* Dark mode specific tokens */
  --vm-dark-surface-raised: #1F2937;
  --vm-dark-surface-overlay: rgba(255, 255, 255, 0.05);

  /* Semantic UI Variables - Dark Mode Overrides */
  --vm-color-text-primary: var(--vm-color-neutral-gray-900);
  --vm-color-text-secondary: var(--vm-color-neutral-gray-500);
  --vm-color-text-tertiary: var(--vm-color-neutral-gray-500);
  --vm-color-text-muted: var(--vm-color-neutral-gray-400);

  --vm-color-surface-primary: var(--vm-color-neutral-gray-50);
  --vm-color-surface-secondary: var(--vm-color-neutral-gray-100);
  --vm-color-surface-tertiary: var(--vm-color-neutral-gray-200);
  --vm-color-surface-elevated: var(--vm-color-neutral-gray-100);

  --vm-color-border-primary: var(--vm-color-neutral-gray-200);
  --vm-color-border-secondary: var(--vm-color-neutral-gray-300);
  --vm-color-border-focus: var(--vm-color-brand-red-300);

  --vm-color-background-primary: var(--vm-color-neutral-gray-50);
  --vm-color-background-muted: var(--vm-color-neutral-gray-100);

  /* Surfaces (dark) */
  --vm-surface-page-bg: #111827;
  --vm-surface-card-bg: #1F2937;
  --vm-surface-card-border: #374151;
  --vm-surface-muted-bg: #111827;

  /* Form Field Variables (Dark) */
  --vm-form-field-bg: #1F2937;
  --vm-form-field-text: #E5E7EB;
  --vm-form-field-placeholder: #9CA3AF;
  --vm-form-field-border: #4B5563;
  --vm-form-field-focus-ring: rgba(200, 16, 46, 0.22);

  /* Button Variant Variables (Dark) */
  --vm-button-secondary-bg: rgba(255, 255, 255, 0.08);
  --vm-button-secondary-text: #E5E7EB;
  --vm-button-secondary-border: rgba(255, 255, 255, 0.18);
  --vm-button-secondary-bg-hover: rgba(255, 255, 255, 0.14);
  --vm-button-secondary-text-hover: #FFFFFF;
  --vm-button-secondary-border-hover: rgba(255, 255, 255, 0.30);

  --vm-button-outline-bg: transparent;
  --vm-button-outline-text: #E5E7EB;
  --vm-button-outline-border: rgba(255, 255, 255, 0.30);
  --vm-button-outline-bg-hover: rgba(255, 255, 255, 0.12);
  --vm-button-outline-text-hover: #FFFFFF;
  --vm-button-outline-border-hover: rgba(255, 255, 255, 0.45);

  /* Back-compat aliases */
  --btn-secondary-bg: var(--vm-button-secondary-bg);
  --btn-secondary-text: var(--vm-button-secondary-text);
  --btn-secondary-border: var(--vm-button-secondary-border);
  --btn-secondary-bg-hover: var(--vm-button-secondary-bg-hover);
  --btn-secondary-text-hover: var(--vm-button-secondary-text-hover);
  --btn-secondary-border-hover: var(--vm-button-secondary-border-hover);

  --btn-outline-bg: var(--vm-button-outline-bg);
  --btn-outline-text: var(--vm-button-outline-text);
  --btn-outline-border: var(--vm-button-outline-border);
  --btn-outline-bg-hover: var(--vm-button-outline-bg-hover);
  --btn-outline-text-hover: var(--vm-button-outline-text-hover);
  --btn-outline-border-hover: var(--vm-button-outline-border-hover);

  /* SHORT-FORM ALIASES - CRITICAL for component compatibility */
  /* Brand color shortcuts */
  --vm-red: var(--vm-color-brand-red-500);     /* Keep same */
  --vm-red-light: var(--vm-color-brand-red-400); /* Keep same */
  --vm-red-dark: var(--vm-color-brand-red-600);  /* Keep same */
  --vm-red-800: var(--vm-color-brand-red-800);   /* Keep same */
  --vm-red-900: var(--vm-color-brand-red-900);   /* Keep same */
  --vm-white: #1F2937;  /* Dark card background */
  --vm-black: #F9FAFB;  /* Light text on dark */

  /* Gray shortcuts */
  --vm-gray-50: #111827;   /* Darkest background */
  --vm-gray-100: #1F2937;  /* Dark surface */
  --vm-gray-200: #374151;  /* Border color */
  --vm-gray-300: #4B5563;  /* Secondary border */
  --vm-gray-400: #6B7280;  /* Muted text */
  --vm-gray-500: #9CA3AF;  /* Secondary text */
  --vm-gray-600: #D1D5DB;  /* Primary text */
  --vm-gray-700: #E5E7EB;  /* Light text */
  --vm-gray-800: #F3F4F6;  /* Very light text */
  --vm-gray-900: #F9FAFB;  /* Lightest text */

  /* Semantic color shortcuts */
  --success-light: #064E3B;
  --warning-light: #78350F;
  --error-light: #7F1D1D;
  --info-light: #1E3A8A;

  /* Layout shortcuts - Shadow overrides for dark mode */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);

  /* Chart Surface (Dark) */
  --vm-chart-surface-bg: #111827;
  --vm-chart-surface-border: #374151;

  /* Header text - ALWAYS white on red banner (never changes in dark mode) */
  --vm-header-text-color: #FFFFFF;
  --vm-header-subtitle-color: rgba(255, 255, 255, 0.95);
}

/**
 * ============================================
 * HIGH CONTRAST MODE SUPPORT
 * ============================================
 */
@media (prefers-contrast: high) {
  :root {
    --vm-color-neutral-gray-400: var(--vm-color-neutral-gray-700);
    --vm-color-neutral-gray-500: var(--vm-color-neutral-gray-800);
    --vm-color-neutral-gray-600: var(--vm-black);
    --vm-border-width-thin: 2px;
    --vm-border-width-medium: 3px;
    --vm-accessibility-focus-outline-width: 3px;
  }
}

/**
 * ============================================
 * REDUCED MOTION SUPPORT
 * ============================================
 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --vm-animation-duration-instant: 0.01ms;
    --vm-animation-duration-fast: 0.01ms;
    --vm-animation-duration-base: 0.01ms;
    --vm-animation-duration-moderate: 0.01ms;
    --vm-animation-duration-slow: 0.01ms;
    --vm-animation-duration-slower: 0.01ms;
    --vm-animation-duration-slowest: 0.01ms;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/**
 * ============================================
 * USAGE EXAMPLES
 * ============================================
 * 
 * Button Primary:
 * .button-primary {
 *   background-color: var(--vm-red);
 *   color: var(--vm-white);
 *   padding: var(--vm-component-button-padding-md);
 *   border-radius: var(--radius-md);
 *   font-weight: var(--vm-typography-font-weight-semibold);
 *   transition: all var(--transition-base);
 *   height: var(--vm-component-button-height-md);
 * }
 * 
 * .button-primary:hover {
 *   background-color: var(--vm-red-600);
 *   transform: translateY(-1px);
 *   box-shadow: var(--shadow-md);
 * }
 * 
 * Card Component:
 * .card {
 *   background: var(--vm-white);
 *   border: var(--vm-border-width-thin) solid var(--vm-gray-200);
 *   border-radius: var(--radius-lg);
 *   box-shadow: var(--shadow-sm);
 *   padding: var(--vm-component-card-padding-md);
 *   transition: box-shadow var(--transition-base);
 * }
 * 
 * .card:hover {
 *   box-shadow: var(--shadow-lg);
 * }
 * 
 * Typography Heading:
 * .heading-1 {
 *   font-family: var(--font-primary);
 *   font-size: var(--vm-typography-font-size-4xl-fluid);
 *   font-weight: var(--vm-typography-font-weight-bold);
 *   line-height: var(--vm-typography-line-height-tight);
 *   letter-spacing: var(--vm-typography-letter-spacing-tight);
 *   color: var(--vm-black);
 * }
 * 
 * Form Input:
 * .form-input {
 *   height: var(--vm-component-input-height);
 *   padding: var(--vm-component-input-padding);
 *   border: var(--vm-border-width-thin) solid var(--vm-gray-300);
 *   border-radius: var(--radius-md);
 *   font-family: var(--font-primary);
 *   transition: all var(--transition-fast);
 * }
 * 
 * .form-input:focus {
 *   outline: var(--vm-accessibility-focus-outline-width) solid var(--vm-accessibility-focus-outline-color);
 *   outline-offset: var(--vm-accessibility-focus-outline-offset);
 *   border-color: var(--vm-red);
 * }
 * 
 * Modal Overlay:
 * .modal-overlay {
 *   position: fixed;
 *   inset: 0;
 *   background: rgba(0, 0, 0, 0.5);
 *   z-index: var(--vm-z-index-modal-backdrop);
 *   animation: fadeIn var(--vm-animation-duration-fast) var(--vm-animation-easing-smooth);
 * }
 * 
 * .modal-content {
 *   position: fixed;
 *   top: 50%;
 *   left: 50%;
 *   transform: translate(-50%, -50%);
 *   background: var(--vm-white);
 *   border-radius: var(--vm-component-modal-radius);
 *   padding: var(--vm-component-modal-padding);
 *   max-width: var(--vm-component-modal-width-md);
 *   z-index: var(--vm-z-index-modal);
 *   animation: slideUp var(--vm-animation-duration-moderate) var(--vm-animation-easing-spring);
 * }
 * 
 * Status Badge:
 * .badge-success {
 *   background: var(--success-light);
 *   color: var(--success-dark);
 *   padding: var(--space-xs) var(--space-sm);
 *   border-radius: var(--radius-full);
 *   font-size: var(--vm-typography-font-size-sm);
 *   font-weight: var(--vm-typography-font-weight-semibold);
 * }
 * 
 * Responsive Container:
 * .container {
 *   width: 100%;
 *   max-width: var(--vm-layout-container-max-width);
 *   margin: 0 auto;
 *   padding: 0 var(--space-md);
 * }
 * 
 * @media (min-width: 768px) {
 *   .container {
 *     padding: 0 var(--space-lg);
 *   }
 * }
 * 
 * Grid Layout:
 * .grid {
 *   display: grid;
 *   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 *   gap: var(--vm-layout-gap-lg);
 * }
 * 
 * Navigation Bar:
 * .navbar {
 *   height: var(--vm-component-nav-height);
 *   background: var(--vm-white);
 *   border-bottom: var(--vm-border-width-thin) solid var(--vm-gray-200);
 *   box-shadow: var(--shadow-sm);
 *   position: sticky;
 *   top: 0;
 *   z-index: var(--vm-z-index-sticky);
 * }
 * 
 * Interactive State Example:
 * .interactive-element {
 *   opacity: 1;
 *   transition: opacity var(--transition-fast);
 * }
 * 
 * .interactive-element:hover {
 *   opacity: var(--vm-state-hover-opacity);
 * }
 * 
 * .interactive-element:active {
 *   opacity: var(--vm-state-active-opacity);
 * }
 * 
 * .interactive-element:disabled {
 *   opacity: var(--vm-state-disabled-opacity);
 *   cursor: not-allowed;
 * }
 * 
 * v3.0 Compact Header Pattern:
 * .header {
 *   background: linear-gradient(135deg, var(--vm-red) 0%, var(--vm-red-dark) 100%);
 *   padding: 0.03125rem 0; /* Ultra-minimal 0.5px padding */
 *   box-shadow: var(--shadow-md);
 *   position: sticky;
 *   top: 0;
 *   z-index: var(--vm-z-index-sticky);
 * }
 * 
 * .header h1 {
 *   font-family: var(--font-display);
 *   font-size: clamp(1.5rem, 4vw, 3rem); /* Responsive sizing */
 *   font-weight: 700;
 *   color: var(--vm-white);
 *   text-transform: uppercase;
 *   letter-spacing: var(--vm-typography-letter-spacing-wide);
 *   line-height: var(--vm-typography-line-height-tight); /* Compact layout */
 *   margin: 0;
 * }
 * 
 * .vm-logo-sm { width: 120px; } /* v3.0 standard logo size */
 * 
 * ============================================ */

/**
 * ============================================
 * BACKWARDS COMPATIBILITY NOTES
 * ============================================
 *
 * All legacy token names are preserved via aliases for backwards compatibility.
 * Projects migrating from previous versions can continue using old names.
 *
 * For new projects: Use the standardized names (--vm-color-*, --vm-spacing-*, etc.)
 * For existing projects: Old shortcuts (--vm-red, --space-lg, etc.) still work
 *
 * See CSS_VARIABLE_MIGRATION.md for complete migration guide.
 *
 * ============================================ */

/**
 * ============================================
 * END OF V+M DESIGN SYSTEM TOKENS v3.2.0
 * ============================================
 * 
 * For documentation and component examples, visit:
 * [Your documentation URL here]
 * 
 * To report issues or suggest improvements:
 * [Your repository/issue tracker URL here]
 * 
 * ============================================ */