/**
 * VendifyTech Design Tokens
 * 
 * V10 LOOP 08 — Unified Design System
 * 
 * Reusable design tokens as CSS custom properties.
 * Brand: Primary #0D7EF9, Secondary #FF8421
 * 
 * @version 1.0.0
 */

:root {
    --vt-color-primary: #0D7EF9;
    --vt-color-primary-dark: #0A63C4;
    --vt-color-primary-light: #E8F2FE;
    --vt-color-secondary: #FF8421;
    --vt-color-secondary-dark: #E56F0A;
    --vt-color-secondary-light: #FFF3E8;
    --vt-color-white: #FFFFFF;
    --vt-color-black: #000000;
    --vt-color-charcoal-900: #1A1D23;
    --vt-color-charcoal-700: #2D3139;
    --vt-color-charcoal-500: #5A616D;
    --vt-color-gray-300: #D1D5DB;
    --vt-color-gray-200: #E5E7EB;
    --vt-color-gray-100: #F3F4F6;
    --vt-color-gray-50: #F9FAFB;
    --vt-color-success: #10B981;
    --vt-color-warning: #F59E0B;
    --vt-color-error: #EF4444;
    --vt-color-info: #0D7EF9;
    --vt-text-primary: var(--vt-color-charcoal-900);
    --vt-text-secondary: var(--vt-color-charcoal-500);
    --vt-text-inverse: var(--vt-color-white);
    --vt-text-link: var(--vt-color-primary);
    --vt-surface-base: var(--vt-color-white);
    --vt-surface-muted: var(--vt-color-gray-50);
    --vt-surface-elevated: var(--vt-color-white);
    --vt-surface-overlay: rgba(26, 29, 35, 0.5);
    --vt-border-default: var(--vt-color-gray-200);
    --vt-border-strong: var(--vt-color-gray-300);
    --vt-border-focus: var(--vt-color-primary);
    --vt-font-family-base: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --vt-font-family-heading: 'Lexend Deca', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --vt-font-family-mono: 'SFMono-Regular', Consolas, monospace;
    --vt-font-size-xs: 0.75rem;
    --vt-font-size-sm: 0.875rem;
    --vt-font-size-base: 1rem;
    --vt-font-size-lg: 1.125rem;
    --vt-font-size-xl: 1.25rem;
    --vt-font-size-2xl: 1.5rem;
    --vt-font-size-3xl: 1.875rem;
    --vt-font-size-4xl: 2.25rem;
    --vt-font-size-5xl: 3rem;
    --vt-font-weight-normal: 400;
    --vt-font-weight-medium: 500;
    --vt-font-weight-semibold: 600;
    --vt-font-weight-bold: 700;
    --vt-line-height-tight: 1.25;
    --vt-line-height-normal: 1.5;
    --vt-line-height-relaxed: 1.75;
    --vt-letter-spacing-tight: -0.025em;
    --vt-letter-spacing-normal: 0;
    --vt-letter-spacing-wide: 0.025em;
    --vt-space-0: 0;
    --vt-space-1: 0.25rem;
    --vt-space-2: 0.5rem;
    --vt-space-3: 0.75rem;
    --vt-space-4: 1rem;
    --vt-space-5: 1.25rem;
    --vt-space-6: 1.5rem;
    --vt-space-8: 2rem;
    --vt-space-10: 2.5rem;
    --vt-space-12: 3rem;
    --vt-space-16: 4rem;
    --vt-space-20: 5rem;
    --vt-space-24: 6rem;
    --vt-container-sm: 640px;
    --vt-container-md: 768px;
    --vt-container-lg: 1024px;
    --vt-container-xl: 1280px;
    --vt-container-2xl: 1400px;
    --vt-container-max: var(--vt-container-2xl);
    --vt-grid-gap: var(--vt-space-6);
    --vt-section-padding-y: var(--vt-space-16);
    --vt-section-padding-y-mobile: var(--vt-space-10);
    --vt-radius-none: 0;
    --vt-radius-sm: 0.25rem;
    --vt-radius-md: 0.375rem;
    --vt-radius-lg: 0.5rem;
    --vt-radius-xl: 0.75rem;
    --vt-radius-2xl: 1rem;
    --vt-radius-full: 9999px;
    --vt-border-width: 1px;
    --vt-border-width-2: 2px;
    --vt-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --vt-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --vt-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --vt-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --vt-shadow-card: var(--vt-shadow-md);
    --vt-shadow-card-hover: var(--vt-shadow-lg);
    --vt-icon-xs: 1rem;
    --vt-icon-sm: 1.25rem;
    --vt-icon-md: 1.5rem;
    --vt-icon-lg: 2rem;
    --vt-icon-xl: 2.5rem;
    --vt-focus-ring-width: 3px;
    --vt-focus-ring-color: var(--vt-color-primary);
    --vt-focus-ring-offset: 2px;
    --vt-focus-ring: 0 0 0 var(--vt-focus-ring-offset) var(--vt-color-white), 0 0 0 calc(var(--vt-focus-ring-offset) + var(--vt-focus-ring-width)) var(--vt-focus-ring-color);
    --vt-duration-instant: 100ms;
    --vt-duration-fast: 150ms;
    --vt-duration-normal: 250ms;
    --vt-duration-slow: 350ms;
    --vt-duration-slower: 500ms;
    --vt-ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
    --vt-ease-in: cubic-bezier(0.4, 0.0, 1, 1);
    --vt-ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1);
    --vt-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --vt-transition-fast: var(--vt-duration-fast) var(--vt-ease-out);
    --vt-transition-normal: var(--vt-duration-normal) var(--vt-ease-out);
    --vt-transition-slow: var(--vt-duration-slow) var(--vt-ease-out);
    --vt-breakpoint-sm: 640px;
    --vt-breakpoint-md: 768px;
    --vt-breakpoint-lg: 1024px;
    --vt-breakpoint-xl: 1280px;
    --vt-breakpoint-2xl: 1536px;
    --vt-z-dropdown: 100;
    --vt-z-sticky: 200;
    --vt-z-header: 300;
    --vt-z-modal-backdrop: 400;
    --vt-z-modal: 500;
    --vt-z-popover: 600;
    --vt-z-tooltip: 700;
    --vt-z-toast: 800;
}
@media (prefers-reduced-motion: reduce) {
    :root {
        --vt-duration-instant: 0ms;
        --vt-duration-fast: 0ms;
        --vt-duration-normal: 0ms;
        --vt-duration-slow: 0ms;
        --vt-duration-slower: 0ms;
    }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
.vt-reduced-motion * {
    animation: none !important;
    transition: none !important;
}