/**
 * IFINSTA Design System - CSS Custom Properties
 *
 * Single source of truth for all CSS variables.
 * All variables use --ifinsta-* prefix.
 * Light mode only as default.
 * Windows 11 inspired minimal micro-animations.
 */

:root {
    /* ==========================================================================
       BRAND IDENTITY
       ========================================================================== */
    --ifinsta-brand-name: 'ifinsta';
    --ifinsta-brand-display-name: 'IFINSTA';
    --ifinsta-brand-tagline: 'The Operating System for Business';
    --ifinsta-brand-description: 'Modern POS & Credit Management Platform';

    /* ==========================================================================
       COLOR PALETTE - Primary Blue
       ========================================================================== */
    --ifinsta-primary-50: #eff6ff;
    --ifinsta-primary-100: #dbeafe;
    --ifinsta-primary-200: #bfdbfe;
    --ifinsta-primary-300: #93c5fd;
    --ifinsta-primary-400: #60a5fa;
    --ifinsta-primary-500: #3b82f6;
    --ifinsta-primary-600: #2563eb;
    --ifinsta-primary-700: #1d4ed8;
    --ifinsta-primary-800: #1e40af;
    --ifinsta-primary-900: #1e3a8a;
    --ifinsta-primary: var(--ifinsta-primary-600);
    --ifinsta-primary-hover: var(--ifinsta-primary-700);

    /* Secondary - Slate */
    --ifinsta-secondary-50: #f8fafc;
    --ifinsta-secondary-100: #f1f5f9;
    --ifinsta-secondary-200: #e2e8f0;
    --ifinsta-secondary-300: #cbd5e1;
    --ifinsta-secondary-400: #94a3b8;
    --ifinsta-secondary-500: #64748b;
    --ifinsta-secondary-600: #475569;
    --ifinsta-secondary-700: #334155;
    --ifinsta-secondary-800: #1e293b;
    --ifinsta-secondary-900: #0f172a;
    --ifinsta-secondary: var(--ifinsta-secondary-600);

    /* Success - Emerald */
    --ifinsta-success-50: #ecfdf5;
    --ifinsta-success-100: #d1fae5;
    --ifinsta-success-200: #a7f3d0;
    --ifinsta-success-300: #6ee7b7;
    --ifinsta-success-400: #34d399;
    --ifinsta-success-500: #10b981;
    --ifinsta-success-600: #059669;
    --ifinsta-success-700: #047857;
    --ifinsta-success: var(--ifinsta-success-500);

    /* Warning - Amber */
    --ifinsta-warning-50: #fffbeb;
    --ifinsta-warning-100: #fef3c7;
    --ifinsta-warning-200: #fde68a;
    --ifinsta-warning-300: #fcd34d;
    --ifinsta-warning-400: #fbbf24;
    --ifinsta-warning-500: #f59e0b;
    --ifinsta-warning-600: #d97706;
    --ifinsta-warning-700: #b45309;
    --ifinsta-warning: var(--ifinsta-warning-500);

    /* Danger - Rose */
    --ifinsta-danger-50: #fff1f2;
    --ifinsta-danger-100: #ffe4e6;
    --ifinsta-danger-200: #fecdd3;
    --ifinsta-danger-300: #fda4af;
    --ifinsta-danger-400: #fb7185;
    --ifinsta-danger-500: #f43f5e;
    --ifinsta-danger-600: #e11d48;
    --ifinsta-danger-700: #be123c;
    --ifinsta-danger: var(--ifinsta-danger-500);

    /* Info - Sky */
    --ifinsta-info-50: #f0f9ff;
    --ifinsta-info-100: #e0f2fe;
    --ifinsta-info-500: #0ea5e9;
    --ifinsta-info-600: #0284c7;
    --ifinsta-info: var(--ifinsta-info-500);

    /* Indigo - Accent */
    --ifinsta-indigo-400: #818cf8;
    --ifinsta-indigo-500: #6366f1;
    --ifinsta-indigo-600: #4f46e5;
    --ifinsta-indigo: var(--ifinsta-indigo-600);

    /* Violet - Accent */
    --ifinsta-violet-500: #8b5cf6;
    --ifinsta-violet-600: #7c3aed;
    --ifinsta-violet: var(--ifinsta-violet-600);

    /* Neutral Grays */
    --ifinsta-gray-50: #f9fafb;
    --ifinsta-gray-100: #f3f4f6;
    --ifinsta-gray-200: #e5e7eb;
    --ifinsta-gray-300: #d1d5db;
    --ifinsta-gray-400: #9ca3af;
    --ifinsta-gray-500: #6b7280;
    --ifinsta-gray-600: #4b5563;
    --ifinsta-gray-700: #374151;
    --ifinsta-gray-800: #1f2937;
    --ifinsta-gray-900: #111827;

    /* RGB for secondary variants used in transparency */
    --ifinsta-secondary-rgb: 71, 85, 105;
    --ifinsta-secondary-200-rgb: 226, 232, 240;
    --ifinsta-secondary-800-rgb: 30, 41, 59;
    --ifinsta-secondary-900-rgb: 15, 23, 42;
    --ifinsta-secondary-950-rgb: 8, 12, 21;

    /* Base Colors */
    --ifinsta-white: #ffffff;
    --ifinsta-black: #000000;
    --ifinsta-transparent: transparent;

    /* RGB variants for alpha effects */
    --ifinsta-primary-rgb: 37, 99, 235;
    --ifinsta-success-rgb: 16, 185, 129;
    --ifinsta-warning-rgb: 245, 158, 11;
    --ifinsta-danger-rgb: 244, 63, 94;
    --ifinsta-info-rgb: 14, 165, 233;
    --ifinsta-white-rgb: 255, 255, 255;
    --ifinsta-black-rgb: 0, 0, 0;

    /* ==========================================================================
       ALPHA VARIANTS
       ========================================================================== */
    --ifinsta-primary-alpha-08: rgba(var(--ifinsta-primary-rgb), 0.08);
    --ifinsta-primary-alpha-10: rgba(var(--ifinsta-primary-rgb), 0.1);
    --ifinsta-primary-alpha-12: rgba(var(--ifinsta-primary-rgb), 0.12);
    --ifinsta-primary-alpha-15: rgba(var(--ifinsta-primary-rgb), 0.15);
    --ifinsta-primary-alpha-20: rgba(var(--ifinsta-primary-rgb), 0.2);
    --ifinsta-primary-alpha-25: rgba(var(--ifinsta-primary-rgb), 0.25);
    --ifinsta-primary-alpha-30: rgba(var(--ifinsta-primary-rgb), 0.3);
    --ifinsta-primary-alpha-40: rgba(var(--ifinsta-primary-rgb), 0.4);
    --ifinsta-primary-alpha-50: rgba(var(--ifinsta-primary-rgb), 0.5);

    --ifinsta-success-alpha-08: rgba(var(--ifinsta-success-rgb), 0.08);
    --ifinsta-success-alpha-10: rgba(var(--ifinsta-success-rgb), 0.1);
    --ifinsta-success-alpha-15: rgba(var(--ifinsta-success-rgb), 0.15);
    --ifinsta-success-alpha-20: rgba(var(--ifinsta-success-rgb), 0.2);
    --ifinsta-success-alpha-30: rgba(var(--ifinsta-success-rgb), 0.3);

    --ifinsta-warning-alpha-08: rgba(var(--ifinsta-warning-rgb), 0.08);
    --ifinsta-warning-alpha-10: rgba(var(--ifinsta-warning-rgb), 0.1);
    --ifinsta-warning-alpha-15: rgba(var(--ifinsta-warning-rgb), 0.15);
    --ifinsta-warning-alpha-20: rgba(var(--ifinsta-warning-rgb), 0.2);
    --ifinsta-warning-alpha-30: rgba(var(--ifinsta-warning-rgb), 0.3);

    --ifinsta-danger-alpha-08: rgba(var(--ifinsta-danger-rgb), 0.08);
    --ifinsta-danger-alpha-10: rgba(var(--ifinsta-danger-rgb), 0.1);
    --ifinsta-danger-alpha-15: rgba(var(--ifinsta-danger-rgb), 0.15);
    --ifinsta-danger-alpha-20: rgba(var(--ifinsta-danger-rgb), 0.2);
    --ifinsta-danger-alpha-30: rgba(var(--ifinsta-danger-rgb), 0.3);

    --ifinsta-info-alpha-05: rgba(var(--ifinsta-info-rgb), 0.05);
    --ifinsta-info-alpha-08: rgba(var(--ifinsta-info-rgb), 0.08);
    --ifinsta-info-alpha-10: rgba(var(--ifinsta-info-rgb), 0.1);
    --ifinsta-info-alpha-15: rgba(var(--ifinsta-info-rgb), 0.15);
    --ifinsta-info-alpha-20: rgba(var(--ifinsta-info-rgb), 0.2);
    --ifinsta-info-alpha-30: rgba(var(--ifinsta-info-rgb), 0.3);

    --ifinsta-black-alpha-02: rgba(0, 0, 0, 0.02);
    --ifinsta-black-alpha-04: rgba(0, 0, 0, 0.04);
    --ifinsta-black-alpha-05: rgba(0, 0, 0, 0.05);
    --ifinsta-black-alpha-06: rgba(0, 0, 0, 0.06);
    --ifinsta-black-alpha-08: rgba(0, 0, 0, 0.08);
    --ifinsta-black-alpha-10: rgba(0, 0, 0, 0.1);
    --ifinsta-black-alpha-12: rgba(0, 0, 0, 0.12);
    --ifinsta-black-alpha-15: rgba(0, 0, 0, 0.15);
    --ifinsta-black-alpha-20: rgba(0, 0, 0, 0.2);
    --ifinsta-black-alpha-25: rgba(0, 0, 0, 0.25);
    --ifinsta-black-alpha-30: rgba(0, 0, 0, 0.3);
    --ifinsta-black-alpha-40: rgba(0, 0, 0, 0.4);
    --ifinsta-black-alpha-50: rgba(0, 0, 0, 0.5);

    --ifinsta-white-alpha-05: rgba(255, 255, 255, 0.05);
    --ifinsta-white-alpha-08: rgba(255, 255, 255, 0.08);
    --ifinsta-white-alpha-10: rgba(255, 255, 255, 0.1);
    --ifinsta-white-alpha-15: rgba(255, 255, 255, 0.15);
    --ifinsta-white-alpha-20: rgba(255, 255, 255, 0.2);
    --ifinsta-white-alpha-30: rgba(255, 255, 255, 0.3);
    --ifinsta-white-alpha-50: rgba(255, 255, 255, 0.5);
    --ifinsta-white-alpha-70: rgba(255, 255, 255, 0.7);
    --ifinsta-white-alpha-80: rgba(255, 255, 255, 0.8);
    --ifinsta-white-alpha-90: rgba(255, 255, 255, 0.9);
    --ifinsta-white-alpha-95: rgba(255, 255, 255, 0.95);

    /* ==========================================================================
       SEMANTIC COLORS - Light Mode Only
       ========================================================================== */
    --ifinsta-bg: #ffffff;
    --ifinsta-bg-secondary: #f8fafc;
    --ifinsta-bg-tertiary: #f1f5f9;
    --ifinsta-bg-elevated: #ffffff;
    --ifinsta-bg-elevated: #ffffff;
    --ifinsta-bg-main: #f8fafc;
    --ifinsta-bg-subtle: #f1f5f9;

    /* Surface Colors */
    --ifinsta-surface: #ffffff;
    --ifinsta-surface-overlay: #ffffff;
    --ifinsta-surface-card: #ffffff;
    --ifinsta-surface-hover: var(--ifinsta-black-alpha-04);

    /* Text Colors */
    --ifinsta-text: #0f172a;
    --ifinsta-text-secondary: #475569;
    --ifinsta-text-muted: #64748b;
    --ifinsta-text-inverse: #ffffff;

    /* Border Colors */
    --ifinsta-border: #e2e8f0;
    --ifinsta-border-light: #f1f5f9;
    --ifinsta-border-focus: var(--ifinsta-primary-400);
    --ifinsta-border-color: #e2e8f0;

    /* Sidebar */
    --ifinsta-sidebar-bg: #ffffff;
    --ifinsta-sidebar-text: #334155;
    --ifinsta-sidebar-hover: var(--ifinsta-black-alpha-04);
    --ifinsta-sidebar-active: var(--ifinsta-primary-alpha-10);
    --ifinsta-sidebar-width: 260px;
    --ifinsta-sidebar-collapsed-width: 72px;

    /* Topbar */
    --ifinsta-topbar-bg: rgba(255, 255, 255, 0.85);
    --ifinsta-topbar-border: var(--ifinsta-black-alpha-05);
    --ifinsta-topbar-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    --ifinsta-topbar-height: 64px;

    /* Dropdown / Popover */
    --ifinsta-dropdown-bg: rgba(255, 255, 255, 0.98);
    --ifinsta-dropdown-border: var(--ifinsta-black-alpha-06);
    --ifinsta-dropdown-shadow: 0 10px 40px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
    --ifinsta-dropdown-item-hover: var(--ifinsta-black-alpha-04);
    --ifinsta-dropdown-item-active: var(--ifinsta-primary-alpha-08);

    /* Accent Light */
    --ifinsta-accent-light: rgba(79, 70, 229, 0.12);
    --ifinsta-accent-violet-light: rgba(124, 58, 237, 0.12);

    /* Overlay */
    --ifinsta-overlay-light: rgba(0, 0, 0, 0.3);
    --ifinsta-overlay-kbd: rgba(0, 0, 0, 0.06);

    /* Highlight */
    --ifinsta-highlight-bg: rgba(16, 185, 129, 0.06);
    --ifinsta-highlight-bg-hover: rgba(16, 185, 129, 0.1);

    /* POS Surface */
    --ifinsta-pos-surface: #fdfbf7;
    --ifinsta-pos-surface-hover: #f8fafc;
    --ifinsta-pos-surface-subtle: #f1f5f9;

    /* ==========================================================================
       TYPOGRAPHY
       ========================================================================== */
    --ifinsta-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --ifinsta-font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;

    --ifinsta-text-xs: 0.75rem;
    --ifinsta-text-sm: 0.875rem;
    --ifinsta-text-base: 1rem;
    --ifinsta-text-lg: 1.125rem;
    --ifinsta-text-xl: 1.25rem;
    --ifinsta-text-2xl: 1.5rem;
    --ifinsta-text-3xl: 1.875rem;
    --ifinsta-text-4xl: 2.25rem;
    --ifinsta-text-5xl: 3rem;

    --ifinsta-font-light: 300;
    --ifinsta-font-normal: 400;
    --ifinsta-font-medium: 500;
    --ifinsta-font-semibold: 600;
    --ifinsta-font-bold: 700;

    --ifinsta-leading-none: 1;
    --ifinsta-leading-tight: 1.25;
    --ifinsta-leading-snug: 1.375;
    --ifinsta-leading-normal: 1.5;
    --ifinsta-leading-relaxed: 1.625;

    --ifinsta-letter-spacing-wider: 0.05em;

    /* ==========================================================================
       SPACING (4px base)
       ========================================================================== */
    --ifinsta-space-0: 0;
    --ifinsta-space-0-5: 0.125rem;
    --ifinsta-space-1: 0.25rem;
    --ifinsta-space-1-5: 0.375rem;
    --ifinsta-space-2: 0.5rem;
    --ifinsta-space-2-5: 0.625rem;
    --ifinsta-space-3: 0.75rem;
    --ifinsta-space-3-5: 0.875rem;
    --ifinsta-space-4: 1rem;
    --ifinsta-space-5: 1.25rem;
    --ifinsta-space-6: 1.5rem;
    --ifinsta-space-7: 1.75rem;
    --ifinsta-space-8: 2rem;
    --ifinsta-space-9: 2.25rem;
    --ifinsta-space-10: 2.5rem;
    --ifinsta-space-11: 2.75rem;
    --ifinsta-space-12: 3rem;
    --ifinsta-space-14: 3.5rem;
    --ifinsta-space-16: 4rem;
    --ifinsta-space-20: 5rem;
    --ifinsta-space-24: 6rem;
    --ifinsta-space-32: 8rem;
    --ifinsta-space-160: 40rem;

    /* Classic spacing aliases */
    --ifinsta-spacing-xs: 0.25rem;
    --ifinsta-spacing-sm: 0.5rem;
    --ifinsta-spacing-md: 1rem;
    --ifinsta-spacing-lg: 1.5rem;
    --ifinsta-spacing-xl: 2rem;
    --ifinsta-spacing-2xl: 3rem;

    /* ==========================================================================
       COMPACT LAYOUT SPACING (Premium Design)
       Reduced padding for information-dense interfaces
       ========================================================================== */
    --ifinsta-section-padding-xs: var(--ifinsta-space-4);   /* 1rem */
    --ifinsta-section-padding-sm: var(--ifinsta-space-6);   /* 1.5rem */
    --ifinsta-section-padding-md: var(--ifinsta-space-8);   /* 2rem */
    --ifinsta-section-padding-lg: var(--ifinsta-space-10);  /* 2.5rem */

    --ifinsta-card-padding-sm: var(--ifinsta-space-3);      /* 0.75rem */
    --ifinsta-card-padding-md: var(--ifinsta-space-4);      /* 1rem */
    --ifinsta-card-padding-lg: var(--ifinsta-space-5);      /* 1.25rem */

    --ifinsta-component-gap-xs: var(--ifinsta-space-1);     /* 0.25rem */
    --ifinsta-component-gap-sm: var(--ifinsta-space-2);     /* 0.5rem */
    --ifinsta-component-gap-md: var(--ifinsta-space-3);     /* 0.75rem */
    --ifinsta-component-gap-lg: var(--ifinsta-space-4);     /* 1rem */

    --ifinsta-grid-gap-sm: var(--ifinsta-space-3);          /* 0.75rem */
    --ifinsta-grid-gap-md: var(--ifinsta-space-4);          /* 1rem */
    --ifinsta-grid-gap-lg: var(--ifinsta-space-5);          /* 1.25rem */

    /* Content density multiplier (use 0.75 for compact, 1.0 for default) */
    --ifinsta-density-multiplier: 0.875;

    /* ==========================================================================
       BORDERS & RADII
       ========================================================================== */
    --ifinsta-radius-none: 0;
    --ifinsta-radius-sm: 0.25rem;
    --ifinsta-radius-md: 0.5rem;
    --ifinsta-radius-lg: 0.75rem;
    --ifinsta-radius-xl: 1rem;
    --ifinsta-radius-2xl: 1.5rem;
    --ifinsta-radius-full: 9999px;

    --ifinsta-border-width: 1px;
    --ifinsta-border-width-2: 2px;

    /* ==========================================================================
       SHADOWS
       ========================================================================== */
    /* Business-focused clean shadows - single layer */
    --ifinsta-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --ifinsta-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --ifinsta-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.06);
    --ifinsta-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.08);
    --ifinsta-shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.1);
    --ifinsta-shadow-2xl: 0 16px 32px rgba(0, 0, 0, 0.12);
    --ifinsta-shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.05);

    /* Colored shadows - subtle */
    --ifinsta-shadow-primary: 0 4px 12px rgba(var(--ifinsta-primary-rgb), 0.2);
    --ifinsta-shadow-success: 0 4px 12px rgba(var(--ifinsta-success-rgb), 0.2);
    --ifinsta-shadow-danger: 0 4px 12px rgba(var(--ifinsta-danger-rgb), 0.2);

    /* Focus shadows - clean */
    --ifinsta-shadow-focus: 0 0 0 2px rgba(var(--ifinsta-primary-rgb), 0.15);
    --ifinsta-shadow-focus-primary: 0 0 0 2px rgba(var(--ifinsta-primary-rgb), 0.25);
    --ifinsta-shadow-primary-focus: var(--ifinsta-shadow-focus-primary);

    /* ==========================================================================
       TRANSITIONS & ANIMATIONS - Windows 11 Style Minimal Micro-Animations
       ========================================================================== */

    /* Duration - snappy but smooth (Windows 11 Fluent style) */
    --ifinsta-duration-instant: 75ms;    /* Micro-interactions: hover states */
    --ifinsta-duration-fast: 100ms;      /* Button feedback, color changes */
    --ifinsta-duration-normal: 150ms;    /* Standard transitions */
    --ifinsta-duration-medium: 200ms;    /* Panel transitions, modals */
    --ifinsta-duration-slow: 250ms;      /* Complex animations, spring */
    --ifinsta-duration-slower: 300ms;    /* Page transitions (max recommended) */

    /* Legacy aliases (deprecated, use new naming) */
    --ifinsta-duration-75: var(--ifinsta-duration-instant);
    --ifinsta-duration-100: var(--ifinsta-duration-fast);
    --ifinsta-duration-150: var(--ifinsta-duration-normal);
    --ifinsta-duration-200: var(--ifinsta-duration-medium);
    --ifinsta-duration-250: var(--ifinsta-duration-slow);
    --ifinsta-duration-300: var(--ifinsta-duration-slower);

    /* Easing - Windows 11 style curves */
    --ifinsta-ease-linear: linear;
    --ifinsta-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ifinsta-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ifinsta-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ifinsta-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ifinsta-ease-fluent: cubic-bezier(0, 0, 0, 1);
    --ifinsta-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

    /* Standard transitions */
    --ifinsta-transition-fast: all var(--ifinsta-duration-100) var(--ifinsta-ease-fluent);
    --ifinsta-transition-base: all var(--ifinsta-duration-150) var(--ifinsta-ease-smooth);
    --ifinsta-transition-slow: all var(--ifinsta-duration-250) var(--ifinsta-ease-smooth);

    /* Specific transitions for Windows 11 feel */
    --ifinsta-transition-hover: all var(--ifinsta-duration-fast) var(--ifinsta-ease-fluent);
    --ifinsta-transition-focus: all var(--ifinsta-duration-instant) var(--ifinsta-ease-smooth);
    --ifinsta-transition-expand: all var(--ifinsta-duration-slow) var(--ifinsta-ease-spring);
    --ifinsta-transition-fade: opacity var(--ifinsta-duration-normal) var(--ifinsta-ease-smooth);
    --ifinsta-transition-scale: transform var(--ifinsta-duration-normal) var(--ifinsta-ease-spring);
    --ifinsta-transition-slide: transform var(--ifinsta-duration-medium) var(--ifinsta-ease-smooth);

    /* ==========================================================================
       MICRO-INTERACTION TOKENS - Business Focused Animations
       ========================================================================== */

    /* Button Micro-Interactions */
    --ifinsta-btn-transition: all var(--ifinsta-duration-fast) var(--ifinsta-ease-fluent);
    --ifinsta-btn-hover-transform: translateY(-1px);
    --ifinsta-btn-active-transform: translateY(0) scale(0.98);
    --ifinsta-btn-focus-shadow: var(--ifinsta-shadow-focus);

    /* Card Micro-Interactions */
    --ifinsta-card-transition: all var(--ifinsta-duration-normal) var(--ifinsta-ease-smooth);
    --ifinsta-card-hover-transform: translateY(-2px);
    --ifinsta-card-hover-shadow: var(--ifinsta-shadow-md);
    --ifinsta-card-active-transform: translateY(0);

    /* Input Micro-Interactions */
    --ifinsta-input-transition: border-color var(--ifinsta-duration-fast) var(--ifinsta-ease-fluent),
                               box-shadow var(--ifinsta-duration-fast) var(--ifinsta-ease-fluent);
    --ifinsta-input-focus-border: var(--ifinsta-primary-500);
    --ifinsta-input-focus-shadow: 0 0 0 2px var(--ifinsta-primary-alpha-20);

    /* Modal/Dialog Micro-Interactions */
    --ifinsta-modal-transition: opacity var(--ifinsta-duration-medium) var(--ifinsta-ease-smooth),
                                transform var(--ifinsta-duration-medium) var(--ifinsta-ease-spring);
    --ifinsta-modal-open-transform: scale(0.96);
    --ifinsta-modal-close-transform: scale(1);

    /* Tooltip Micro-Interactions */
    --ifinsta-tooltip-transition: opacity var(--ifinsta-duration-fast) var(--ifinsta-ease-fluent),
                                  transform var(--ifinsta-duration-fast) var(--ifinsta-ease-fluent);
    --ifinsta-tooltip-offset: 4px;

    /* Dropdown/Popover Micro-Interactions */
    --ifinsta-dropdown-transition: opacity var(--ifinsta-duration-fast) var(--ifinsta-ease-fluent),
                                   transform var(--ifinsta-duration-fast) var(--ifinsta-ease-fluent);
    --ifinsta-dropdown-open-transform: translateY(-8px);
    --ifinsta-dropdown-close-transform: translateY(0);

    /* Toast Micro-Interactions */
    --ifinsta-toast-transition: all var(--ifinsta-duration-slow) var(--ifinsta-ease-spring);
    --ifinsta-toast-enter-transform: translateX(100%);
    --ifinsta-toast-exit-transform: translateX(0);

    /* ==========================================================================
       RESPONSIVE BREAKPOINTS
       Standardized breakpoint system
       ========================================================================== */
    --ifinsta-bp-sm: 640px;    /* Mobile landscape */
    --ifinsta-bp-md: 768px;    /* Tablet */
    --ifinsta-bp-lg: 1024px;   /* Laptop */
    --ifinsta-bp-xl: 1280px;   /* Desktop */
    --ifinsta-bp-2xl: 1536px;  /* Large screens */

    /* Touch target sizes */
    --ifinsta-touch-target-sm: 32px;
    --ifinsta-touch-target-md: 40px;
    --ifinsta-touch-target-lg: 48px;

    /* ==========================================================================
       Z-INDEX SCALE
       Standardized 10-tier system with proper layering
       
       Guidelines:
       1. Always use these CSS variables, never hardcode z-index values
       2. For component + backdrop pairs: backdrop = component - 10
       3. Maximum allowed value is --ifinsta-z-max (1000)
       4. When in doubt, use the next tier up
       
       LAYER ORDER (lowest to highest):
       Base → Dropdown → Sticky → Fixed → Sidebar → Popover → Tooltip → Toast → Modal → Max
       ========================================================================== */
    --ifinsta-z-base: 1;
    --ifinsta-z-dropdown: 100;        /* Dropdown menus, select options */
    --ifinsta-z-sticky: 200;          /* Sticky headers, navigation */
    --ifinsta-z-fixed: 300;           /* Fixed position elements */
    --ifinsta-z-sidebar: 500;         /* Sidebars, drawers (below modals) */
    --ifinsta-z-popover: 500;         /* Popovers that float above sidebars */
    --ifinsta-z-tooltip: 600;         /* Tooltips */
    --ifinsta-z-toast: 700;           /* Toast notifications */
    --ifinsta-z-modal-backdrop: 890;  /* Modal overlay (10 below modal) */
    --ifinsta-z-modal: 900;           /* Modal dialogs (HIGHEST - above sidebars) */
    --ifinsta-z-max: 1000;            /* Absolute maximum for critical overlays (skip links) */

    /* ==========================================================================
       ACCESSIBILITY
       ========================================================================== */
    --ifinsta-focus-ring: rgba(59, 130, 246, 0.5);
    --ifinsta-focus-ring-color: var(--ifinsta-primary-500);
    --ifinsta-focus-ring-width: 2px;
    --ifinsta-focus-ring-offset: 2px;
    --ifinsta-focus-outline: var(--ifinsta-focus-ring-width) solid var(--ifinsta-focus-ring);

    /* ==========================================================================
       LAYOUT
       ========================================================================== */
    --ifinsta-content-max-width: 1600px;
    --ifinsta-content-padding: var(--ifinsta-space-6);

    /* ==========================================================================
       GLASSMORPHISM
       ========================================================================== */
    --ifinsta-glass-bg: rgba(255, 255, 255, 0.7);
    --ifinsta-glass-border: rgba(255, 255, 255, 0.5);
    --ifinsta-glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);

    --ifinsta-blur-sm: blur(4px);
    --ifinsta-blur-md: blur(8px);
    --ifinsta-blur-lg: blur(16px);
    --ifinsta-blur-xl: blur(24px);

    /* ==========================================================================
       DASHBOARD SPECIFIC
       ========================================================================== */
    --ifinsta-dashboard-gap-xs: 0.75rem;
    --ifinsta-dashboard-gap-sm: 1rem;
    --ifinsta-dashboard-gap-md: 1.25rem;
    --ifinsta-dashboard-gap-lg: 1.5rem;

    --ifinsta-widget-padding-xs: 0.875rem;
    --ifinsta-widget-padding-sm: 1rem;
    --ifinsta-widget-padding-md: 1.25rem;
    --ifinsta-widget-padding-lg: 1.5rem;

    --ifinsta-widget-min-height-sm: 140px;
    --ifinsta-widget-min-height-md: 160px;
    --ifinsta-widget-min-height-lg: 180px;

    /* ==========================================================================
       RANK COLORS
       ========================================================================== */
    --ifinsta-rank-gold-start: #FFD700;
    --ifinsta-rank-gold-end: #FFA500;
    --ifinsta-rank-silver-start: #C0C0C0;
    --ifinsta-rank-silver-end: #A8A8A8;
    --ifinsta-rank-bronze-start: #CD7F32;
    --ifinsta-rank-bronze-end: #B87333;

    /* ==========================================================================
       VALIDATION
       ========================================================================== */
    --ifinsta-validation-error: #ef4444;
    --ifinsta-validation-success: #22c55e;
    --ifinsta-validation-warning: #f59e0b;

    /* ==========================================================================
       TOOLTIP
       ========================================================================== */
    --ifinsta-tooltip-bg: #1e293b;
    --ifinsta-tooltip-text: #f8fafc;
    --ifinsta-tooltip-radius: 6px;
    /* Note: Use --ifinsta-z-tooltip instead of deprecated --ifinsta-tooltip-z-index */

    /* ==========================================================================
       SMART SELECT
       ========================================================================== */
    --ifinsta-smart-select-radius: 12px;
    --ifinsta-smart-select-radius-inner: 8px;

    /* ==========================================================================
       THEME STORAGE KEY
       ========================================================================== */
    --ifinsta-theme-storage-key: 'ifinsta-theme';

    /* ==========================================================================
       POS TERMINAL - Surface Levels (Windows 11 Style)
       ========================================================================== */
    /* Surface Level 0: App Base (Foundation) */
    --ifinsta-s0-bg: var(--ifinsta-bg-main);
    --ifinsta-s0-pattern: none;

    /* Surface Level 1: Primary Panels (Main Layout Containers) */
    --ifinsta-s1-bg: var(--ifinsta-bg-elevated);
    --ifinsta-s1-border: var(--ifinsta-black-alpha-06);
    --ifinsta-s1-shadow: var(--ifinsta-shadow-xs);
    --ifinsta-s1-radius: var(--ifinsta-radius-lg);

    /* Surface Level 2: Floaters & Interactive Elements (Cards, Modals) */
    --ifinsta-s2-bg: var(--ifinsta-bg);
    --ifinsta-s2-border: var(--ifinsta-black-alpha-10);
    --ifinsta-s2-shadow: var(--ifinsta-shadow-sm);
    --ifinsta-s2-radius: var(--ifinsta-radius-md);

    /* POS Functional Tokens (Mapped to Surfaces) */
    --ifinsta-card-bg: var(--ifinsta-s1-bg);
    --ifinsta-app-bg: var(--ifinsta-s0-bg);
    --ifinsta-radius-card: var(--ifinsta-s1-radius);
    --ifinsta-radius-touch: var(--ifinsta-radius-md);
    --ifinsta-font-ui: var(--ifinsta-font-sans);

    /* Win11 Accent & UI Feedback */
    --ifinsta-win11-accent: var(--ifinsta-primary);
    --ifinsta-win11-border: var(--ifinsta-black-alpha-10);

    /* ==========================================================================
       DISCOVER / MARKETPLACE
       ========================================================================== */
    --ifinsta-discover-primary: var(--ifinsta-indigo-500);
    --ifinsta-discover-primary-light: var(--ifinsta-indigo-400);
    --ifinsta-discover-primary-dark: var(--ifinsta-indigo-600);
    --ifinsta-discover-secondary: var(--ifinsta-warning-500);
    --ifinsta-discover-accent: var(--ifinsta-pink-500);
    --ifinsta-discover-gradient: var(--ifinsta-pink-500);
    --ifinsta-discover-warm: var(--ifinsta-warning-300);
    --ifinsta-discover-cool: var(--ifinsta-blue-500);
    --ifinsta-discover-mesh: var(--ifinsta-surface);
    --ifinsta-discover-gap: 1.5rem;
    --ifinsta-discover-radius: var(--ifinsta-radius-xl);
    --ifinsta-discover-radius-lg: 1.5rem;
    --ifinsta-discover-radius-xl: var(--ifinsta-radius-2xl);
    --ifinsta-discover-glass-bg: var(--ifinsta-white-alpha-70);
    --ifinsta-discover-glass-border: var(--ifinsta-white-alpha-50);
    --ifinsta-discover-glass-shadow: 0 8px 32px var(--ifinsta-primary-alpha-12);
    --ifinsta-discover-transition: var(--ifinsta-duration-300) var(--ifinsta-ease-in-out);
    --ifinsta-discover-spring: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* ==========================================================================
       STORIES
       ========================================================================== */
    --ifinsta-story-ring-gradient: linear-gradient(45deg, var(--ifinsta-warning-500), var(--ifinsta-danger-500), var(--ifinsta-pink-500), var(--ifinsta-violet-500), var(--ifinsta-primary-600));
    --ifinsta-story-seen-ring: var(--ifinsta-gray-400);
    --ifinsta-story-progress-bg: var(--ifinsta-white-alpha-30);
    --ifinsta-story-progress-fill: var(--ifinsta-white);

    /* ==========================================================================
       WINDOWS 11 FLUENT DESIGN
       ========================================================================== */
    --ifinsta-win11-bg-mica: #f3f3f3;
    --ifinsta-win11-surface: #ffffff;
    --ifinsta-win11-surface-secondary: #fbfbfb;
    --ifinsta-win11-border: #e5e5e5;
    --ifinsta-win11-border-active: #d1d1d1;
    --ifinsta-win11-text-primary: #202020;
    --ifinsta-win11-text-secondary: #5d5d5d;
    --ifinsta-win11-text-tertiary: #787878;
    --ifinsta-win11-accent: #0067c0;
    --ifinsta-win11-accent-hover: #187bcd;
    --ifinsta-win11-accent-text: #ffffff;
    --ifinsta-win11-elevation-card: 0 2px 4px rgba(0, 0, 0, 0.04);
    --ifinsta-win11-elevation-hover: 0 8px 16px rgba(0, 0, 0, 0.1);
    --ifinsta-win11-elevation-flyout: 0 8px 24px rgba(0, 0, 0, 0.14);
    --ifinsta-win11-radius-sm: 4px;
    --ifinsta-win11-radius-md: 8px;
    --ifinsta-win11-radius-lg: 12px;
    --ifinsta-win11-motion-fast: 0.1s cubic-bezier(0, 0, 0, 1);
    --ifinsta-win11-motion-norm: 0.25s cubic-bezier(0, 0, 0, 1);

    /* ==========================================================================
       GUEST PREMIUM / MARKETING (Investor Grade)
       ========================================================================== */
    --ifinsta-guest-primary: #001529;
    --ifinsta-guest-primary-hover: #002140;
    --ifinsta-guest-accent: #0066cc;
    --ifinsta-guest-accent-hover: #0052a3;
    --ifinsta-guest-accent-glow: rgba(0, 102, 204, 0.12);

    --ifinsta-guest-primary-rgb: 0, 21, 41;
    --ifinsta-guest-accent-rgb: 0, 102, 204;
    --ifinsta-guest-bg-subtle-rgb: 250, 251, 252;
    --ifinsta-guest-bg-dark-rgb: 0, 21, 41;

    /* Gradients */
    --ifinsta-guest-gradient-hero: linear-gradient(135deg, #001529 0%, #002140 100%);
    --ifinsta-guest-gradient-accent: linear-gradient(135deg, #0066cc 0%, #0052a3 100%);
    --ifinsta-guest-gradient-soft: linear-gradient(180deg, #fafbfc 0%, #ffffff 100%);
    --ifinsta-guest-gradient-card: linear-gradient(145deg, #ffffff 0%, #fafbfc 100%);

    /* Backgrounds */
    --ifinsta-guest-bg: #ffffff;
    --ifinsta-guest-bg-subtle: #fafbfc;
    --ifinsta-guest-bg-muted: #f5f6f7;
    --ifinsta-guest-bg-dark: #001529;

    /* Text */
    --ifinsta-guest-text: #1a1a1a;
    --ifinsta-guest-text-secondary: #505050;
    --ifinsta-guest-text-muted: #757575;
    --ifinsta-guest-text-placeholder: #9e9e9e;
    --ifinsta-guest-text-on-dark: #f5f6f7;

    /* Borders */
    --ifinsta-guest-border: #e5e7eb;
    --ifinsta-guest-border-strong: #d1d5db;

    /* Spacing */
    --ifinsta-guest-space-2xs: 0.125rem;
    --ifinsta-guest-space-xs: 0.25rem;
    --ifinsta-guest-space-sm: 0.5rem;
    --ifinsta-guest-space-md: 0.625rem;
    --ifinsta-guest-space-base: 0.75rem;
    --ifinsta-guest-space-lg: 1rem;
    --ifinsta-guest-space-xl: 1.25rem;
    --ifinsta-guest-space-2xl: 1.5rem;
    --ifinsta-guest-space-3xl: 2rem;
    --ifinsta-guest-space-4xl: 3rem;
    --ifinsta-guest-space-5xl: 4rem;

    /* Radius */
    --ifinsta-guest-radius-sm: 6px;
    --ifinsta-guest-radius-md: 10px;
    --ifinsta-guest-radius-lg: 14px;
    --ifinsta-guest-radius-xl: 20px;

    /* Shadows */
    --ifinsta-guest-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
    --ifinsta-guest-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.03);
    --ifinsta-guest-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    --ifinsta-guest-shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.10), 0 4px 6px rgba(0, 0, 0, 0.05);
    --ifinsta-guest-shadow-glow: 0 0 20px rgba(0, 102, 204, 0.08);

    /* Layout */
    --ifinsta-guest-header-height: 72px;
    --ifinsta-guest-max-width: 1200px;
    --ifinsta-guest-content-padding: 2rem;

    /* Transitions */
    --ifinsta-guest-transition-fast: 0.15s ease;
    --ifinsta-guest-transition-base: 0.25s ease;
}

/* ==========================================================================
   WINDOWS 11 STYLE KEYFRAME ANIMATIONS - Minimal Micro-Animations
   ========================================================================== */

/* Fade in - subtle opacity transition */
@keyframes ifinsta-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Fade in up - content reveal */
@keyframes ifinsta-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade in down - dropdown style */
@keyframes ifinsta-fade-in-down {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scale in - dialog/modal reveal */
@keyframes ifinsta-scale-in {
    from {
        opacity: 0;
        transform: scale(0.96);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Scale in bounce - attention elements */
@keyframes ifinsta-scale-in-bounce {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }

    70% {
        transform: scale(1.02);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Slide in right - navigation */
@keyframes ifinsta-slide-in-right {
    from {
        opacity: 0;
        transform: translateX(16px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Slide in left - sidebar */
@keyframes ifinsta-slide-in-left {
    from {
        opacity: 0;
        transform: translateX(-16px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Spin - loading indicators */
@keyframes ifinsta-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Pulse - subtle attention */
@keyframes ifinsta-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

/* Pulse scale - button interactions */
@keyframes ifinsta-pulse-scale {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
    }
}

/* Shimmer - loading skeleton */
@keyframes ifinsta-shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* Subtle bounce - micro-interaction */
@keyframes ifinsta-bounce-subtle {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-2px);
    }
}

/* Ripple - button press effect */
@keyframes ifinsta-ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* Highlight pulse - active indicators */
@keyframes ifinsta-highlight-pulse {

    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
    }

    50% {
        opacity: 0.85;
        box-shadow: 0 0 0 4px rgba(16, 185, 129, 0);
    }
}

/* ==========================================================================
   ANIMATION UTILITY CLASSES
   ========================================================================== */

.ifinsta-animate-fade-in {
    animation: ifinsta-fade-in var(--ifinsta-duration-150) var(--ifinsta-ease-smooth);
}

.ifinsta-animate-fade-in-up {
    animation: ifinsta-fade-in-up var(--ifinsta-duration-200) var(--ifinsta-ease-smooth);
}

.ifinsta-animate-fade-in-down {
    animation: ifinsta-fade-in-down var(--ifinsta-duration-200) var(--ifinsta-ease-smooth);
}

.ifinsta-animate-scale-in {
    animation: ifinsta-scale-in var(--ifinsta-duration-150) var(--ifinsta-ease-smooth);
}

.ifinsta-animate-scale-in-bounce {
    animation: ifinsta-scale-in-bounce var(--ifinsta-duration-250) var(--ifinsta-ease-spring);
}

.ifinsta-animate-slide-in-right {
    animation: ifinsta-slide-in-right var(--ifinsta-duration-200) var(--ifinsta-ease-smooth);
}

.ifinsta-animate-slide-in-left {
    animation: ifinsta-slide-in-left var(--ifinsta-duration-200) var(--ifinsta-ease-smooth);
}

.ifinsta-animate-spin {
    animation: ifinsta-spin 1s linear infinite;
}

.ifinsta-animate-pulse {
    animation: ifinsta-pulse 2s ease-in-out infinite;
}

.ifinsta-animate-shimmer {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    background-size: 200% 100%;
    animation: ifinsta-shimmer 1.5s infinite;
}

.ifinsta-animate-bounce-subtle {
    animation: ifinsta-bounce-subtle 2s ease-in-out infinite;
}

.ifinsta-animate-highlight-pulse {
    animation: ifinsta-highlight-pulse 2s ease-in-out infinite;
}

/* ==========================================================================
   HOVER MICRO-ANIMATIONS - Windows 11 Style
   ========================================================================== */

.ifinsta-hover-lift {
    transition: transform var(--ifinsta-duration-100) var(--ifinsta-ease-fluent);
}

.ifinsta-hover-lift:hover {
    transform: translateY(-2px);
}

.ifinsta-hover-scale {
    transition: transform var(--ifinsta-duration-100) var(--ifinsta-ease-fluent);
}

.ifinsta-hover-scale:hover {
    transform: scale(1.02);
}

.ifinsta-hover-glow {
    transition: box-shadow var(--ifinsta-duration-150) var(--ifinsta-ease-smooth);
}

.ifinsta-hover-glow:hover {
    box-shadow: var(--ifinsta-shadow-md);
}

.ifinsta-hover-brightness {
    transition: filter var(--ifinsta-duration-100) var(--ifinsta-ease-fluent);
}

.ifinsta-hover-brightness:hover {
    filter: brightness(1.05);
}

/* ==========================================================================
   FOCUS STATES - Windows 11 Style
   ========================================================================== */

.ifinsta-focus-ring:focus-visible {
    outline: none;
    box-shadow: var(--ifinsta-shadow-focus);
}

.ifinsta-focus-ring-primary:focus-visible {
    outline: none;
    box-shadow: var(--ifinsta-shadow-focus-primary);
}

/* ==========================================================================
   REDUCED MOTION - Accessibility
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}