/* ==========================================================================
   ADVANCED CSS CUSTOM PROPERTIES - COMPREHENSIVE DESIGN TOKENS
   ========================================================================== */

:root {
  /* ==========================================================================
     OFFICIAL THEMEKIT-PRO BRAND COLORS
     ========================================================================== */
  
  /* Official ThemeKit-Pro Brand Palette */
  --tkp-navy: #0F172A;
  --tkp-violet: #7C3AED;
  --tkp-teal: #14B8A6;
  --tkp-amber: #F59E0B;
  
  /* Logo specific variables */
  --logo-bg-color: #ffffff;
  --logo-bg-color-dark: var(--tkp-navy);
  
  /* Logo sizing system */
  --logo-size-xs: 24px;
  --logo-size-sm: 32px;
  --logo-size-base: 40px;
  --logo-size-lg: 48px;
  --logo-size-xl: 64px;
  --logo-size-2xl: 80px;
  --logo-size-hero: 120px;
  
  /* ==========================================================================
     ENHANCED COLOR SYSTEM - Updated with Brand Integration
     ========================================================================== */
  
  /* Primary Colors - Blue tones from image */
  --color-primary-25: #f8faff;
  --color-primary-50: #f0f9ff;
  --color-primary-100: #e0f2fe;
  --color-primary-200: #bae6fd;
  --color-primary-300: #7dd3fc;
  --color-primary-400: #38bdf8;
  --color-primary-500: #0ea5e9;  /* Main blue from image */
  --color-primary-600: #0284c7;
  --color-primary-700: #0369a1;
  --color-primary-800: #075985;  /* Darker blue from image */
  --color-primary-900: #0c4a6e;
  --color-primary-950: #082f49;  /* Navy/black from image */

  /* Brand Violet Colors - Based on --tkp-violet */
  --color-brand-violet-25: #faf8ff;
  --color-brand-violet-50: #f5f3ff;
  --color-brand-violet-100: #ede9fe;
  --color-brand-violet-200: #ddd6fe;
  --color-brand-violet-300: #c4b5fd;
  --color-brand-violet-400: #a78bfa;
  --color-brand-violet-500: var(--tkp-violet);  /* #7C3AED */
  --color-brand-violet-600: #7c2d92;
  --color-brand-violet-700: #6d28d9;
  --color-brand-violet-800: #5b21b6;
  --color-brand-violet-900: #4c1d95;
  --color-brand-violet-950: #2e1065;

  /* Brand Teal Colors - Based on --tkp-teal */
  --color-brand-teal-25: #f0fdfa;
  --color-brand-teal-50: #ecfdf5;
  --color-brand-teal-100: #d1fae5;
  --color-brand-teal-200: #a7f3d0;
  --color-brand-teal-300: #6ee7b7;
  --color-brand-teal-400: #34d399;
  --color-brand-teal-500: var(--tkp-teal);  /* #14B8A6 */
  --color-brand-teal-600: #059669;
  --color-brand-teal-700: #047857;
  --color-brand-teal-800: #065f46;
  --color-brand-teal-900: #064e3b;
  --color-brand-teal-950: #022c22;

  /* Brand Amber Colors - Based on --tkp-amber */
  --color-brand-amber-25: #fffcf5;
  --color-brand-amber-50: #fffbeb;
  --color-brand-amber-100: #fef3c7;
  --color-brand-amber-200: #fde68a;
  --color-brand-amber-300: #fcd34d;
  --color-brand-amber-400: #fbbf24;
  --color-brand-amber-500: var(--tkp-amber);  /* #F59E0B */
  --color-brand-amber-600: #d97706;
  --color-brand-amber-700: #b45309;
  --color-brand-amber-800: #92400e;
  --color-brand-amber-900: #78350f;
  --color-brand-amber-950: #451a03;

  /* Brand Navy Colors - Based on --tkp-navy */
  --color-brand-navy-25: #f8fafc;
  --color-brand-navy-50: #f1f5f9;
  --color-brand-navy-100: #e2e8f0;
  --color-brand-navy-200: #cbd5e1;
  --color-brand-navy-300: #94a3b8;
  --color-brand-navy-400: #64748b;
  --color-brand-navy-500: #475569;
  --color-brand-navy-600: #334155;
  --color-brand-navy-700: #1e293b;
  --color-brand-navy-800: var(--tkp-navy);  /* #0F172A */
  --color-brand-navy-900: #0c1220;
  --color-brand-navy-950: #020617;

  /* Secondary Colors - Gray tones from image */
  --color-secondary-25: #fcfcfd;
  --color-secondary-50: #f8fafc;
  --color-secondary-100: #f1f5f9;  /* Light gray from image */
  --color-secondary-200: #e2e8f0;
  --color-secondary-300: #cbd5e1;
  --color-secondary-400: #94a3b8;
  --color-secondary-500: #64748b;  /* Medium gray from image */
  --color-secondary-600: #475569;
  --color-secondary-700: #334155;  /* Dark gray from image */
  --color-secondary-800: #1e293b;
  --color-secondary-900: #0f172a;
  --color-secondary-950: #020617;

  /* Accent Colors - Orange/Amber from image */
  --color-accent-25: #fffcf5;
  --color-accent-50: #fffbeb;
  --color-accent-100: #fef3c7;
  --color-accent-200: #fde68a;
  --color-accent-300: #fcd34d;
  --color-accent-400: #fbbf24;
  --color-accent-500: #f59e0b;  /* Orange from image */
  --color-accent-600: #d97706;
  --color-accent-700: #b45309;
  --color-accent-800: #92400e;
  --color-accent-900: #78350f;
  --color-accent-950: #451a03;

  /* Warm Colors - Coral/Salmon from image */
  --color-warm-25: #fffcfc;
  --color-warm-50: #fef2f2;
  --color-warm-100: #fee2e2;
  --color-warm-200: #fecaca;
  --color-warm-300: #fca5a5;
  --color-warm-400: #f87171;
  --color-warm-500: #ef4444;  /* Coral from image */
  --color-warm-600: #dc2626;
  --color-warm-700: #b91c1c;
  --color-warm-800: #991b1b;  /* Dark red from image */
  --color-warm-900: #7f1d1d;
  --color-warm-950: #450a0a;

  /* Cool Colors - Additional blue tones */
  --color-cool-25: #f0fdff;
  --color-cool-50: #ecfeff;
  --color-cool-100: #cffafe;
  --color-cool-200: #a5f3fc;
  --color-cool-300: #67e8f9;
  --color-cool-400: #22d3ee;  /* Light blue from image */
  --color-cool-500: #06b6d4;
  --color-cool-600: #0891b2;
  --color-cool-700: #0e7490;
  --color-cool-800: #155e75;
  --color-cool-900: #164e63;
  --color-cool-950: #083344;

  /* Neutral Colors - Beige/Cream from image */
  --color-neutral-25: #fdfdfc;
  --color-neutral-50: #fafaf9;  /* Light beige from image */
  --color-neutral-100: #f5f5f4;
  --color-neutral-200: #e7e5e4;
  --color-neutral-300: #d6d3d1;
  --color-neutral-400: #a8a29e;
  --color-neutral-500: #78716c;
  --color-neutral-600: #57534e;
  --color-neutral-700: #44403c;
  --color-neutral-800: #292524;
  --color-neutral-900: #1c1917;
  --color-neutral-950: #0c0a09;

  /* Success Colors */
  --color-success-25: #f7fef5;
  --color-success-50: #f0fdf4;
  --color-success-100: #dcfce7;
  --color-success-200: #bbf7d0;
  --color-success-300: #86efac;
  --color-success-400: #4ade80;
  --color-success-500: #22c55e;
  --color-success-600: #16a34a;
  --color-success-700: #15803d;
  --color-success-800: #166534;
  --color-success-900: #14532d;
  --color-success-950: #052e16;

  /* Warning Colors */
  --color-warning-25: #fffdf5;
  --color-warning-50: #fefce8;
  --color-warning-100: #fef9c3;
  --color-warning-200: #fef08a;
  --color-warning-300: #fde047;
  --color-warning-400: #facc15;
  --color-warning-500: #eab308;
  --color-warning-600: #ca8a04;
  --color-warning-700: #a16207;
  --color-warning-800: #854d0e;
  --color-warning-900: #713f12;
  --color-warning-950: #422006;

  /* Error/Danger Colors */
  --color-error-25: #fffbfa;
  --color-error-50: #fef2f2;
  --color-error-100: #fee2e2;
  --color-error-200: #fecaca;
  --color-error-300: #fca5a5;
  --color-error-400: #f87171;
  --color-error-500: #ef4444;
  --color-error-600: #dc2626;
  --color-error-700: #b91c1c;
  --color-error-800: #991b1b;
  --color-error-900: #7f1d1d;
  --color-error-950: #450a0a;

  /* ==========================================================================
     SEMANTIC COLOR TOKENS - Enhanced with Brand Colors
     ========================================================================== */
  
  /* Background Colors */
  --bg-primary: var(--color-secondary-25);
  --bg-secondary: var(--color-secondary-50);
  --bg-tertiary: var(--color-secondary-100);
  --bg-quaternary: var(--color-secondary-200);
  --bg-accent: var(--color-accent-25);
  --bg-surface: #ffffff;
  --bg-surface-raised: #ffffff;
  --bg-surface-overlay: rgba(255, 255, 255, 0.8);
  --bg-overlay: rgba(0, 0, 0, 0.1);
  --bg-overlay-dark: rgba(0, 0, 0, 0.4);
  --bg-backdrop: rgba(0, 0, 0, 0.5);

  /* Text Colors */
  --text-primary: var(--tkp-navy);
  --text-secondary: var(--color-secondary-700);
  --text-tertiary: var(--color-secondary-500);
  --text-quaternary: var(--color-secondary-400);
  --text-inverse: #ffffff;
  --text-accent: var(--tkp-violet);
  --text-accent-hover: var(--color-brand-violet-700);
  --text-success: var(--color-success-600);
  --text-warning: var(--color-warning-600);
  --text-error: var(--color-error-600);
  --text-disabled: var(--color-secondary-400);
  --text-placeholder: var(--color-secondary-400);

  /* Border Colors */
  --border-primary: var(--color-secondary-200);
  --border-secondary: var(--color-secondary-300);
  --border-tertiary: var(--color-secondary-400);
  --border-accent: var(--color-brand-violet-200);
  --border-focus: var(--tkp-violet);
  --border-success: var(--color-success-300);
  --border-warning: var(--color-warning-300);
  --border-error: var(--color-error-300);
  --border-disabled: var(--color-secondary-200);

  /* Interactive Colors - Enhanced with Brand Colors */
  --interactive-primary: var(--tkp-violet);
  --interactive-primary-hover: var(--color-brand-violet-700);
  --interactive-primary-active: var(--color-brand-violet-800);
  --interactive-primary-disabled: var(--color-secondary-300);
  
  --interactive-secondary: var(--color-secondary-500);
  --interactive-secondary-hover: var(--color-secondary-600);
  --interactive-secondary-active: var(--color-secondary-700);
  
  --interactive-accent: var(--tkp-amber);
  --interactive-accent-hover: var(--color-brand-amber-600);
  --interactive-accent-active: var(--color-brand-amber-700);
  
  --interactive-teal: var(--tkp-teal);
  --interactive-teal-hover: var(--color-brand-teal-600);
  --interactive-teal-active: var(--color-brand-teal-700);
  
  --interactive-success: var(--color-success-500);
  --interactive-success-hover: var(--color-success-600);
  --interactive-success-active: var(--color-success-700);
  
  --interactive-warning: var(--color-warning-500);
  --interactive-warning-hover: var(--color-warning-600);
  --interactive-warning-active: var(--color-warning-700);
  
  --interactive-error: var(--color-error-500);
  --interactive-error-hover: var(--color-error-600);
  --interactive-error-active: var(--color-error-700);

  /* ==========================================================================
     TYPOGRAPHY SYSTEM - Enhanced
     ========================================================================== */
  
  /* Font Families */
  --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-serif: 'Georgia', 'Times New Roman', serif;
  --font-family-mono: 'Fira Code', 'Monaco', 'Consolas', 'Liberation Mono', monospace;
  --font-family-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Font Weights */
  --font-weight-thin: 100;
  --font-weight-extralight: 200;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  /* Font Sizes - Expanded Scale */
  --font-size-2xs: 0.625rem;   /* 10px */
  --font-size-xs: 0.75rem;     /* 12px */
  --font-size-sm: 0.875rem;    /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-lg: 1.125rem;    /* 18px */
  --font-size-xl: 1.25rem;     /* 20px */
  --font-size-2xl: 1.5rem;     /* 24px */
  --font-size-3xl: 1.875rem;   /* 30px */
  --font-size-4xl: 2.25rem;    /* 36px */
  --font-size-5xl: 3rem;       /* 48px */
  --font-size-6xl: 3.75rem;    /* 60px */
  --font-size-7xl: 4.5rem;     /* 72px */
  --font-size-8xl: 6rem;       /* 96px */
  --font-size-9xl: 8rem;       /* 128px */

  /* Line Heights */
  --line-height-none: 1;
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;

  /* Letter Spacing */
  --letter-spacing-tighter: -0.05em;
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0em;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;
  --letter-spacing-widest: 0.1em;

  /* ==========================================================================
     SPACING SYSTEM - Comprehensive Scale
     ========================================================================== */
  
  --space-px: 1px;
  --space-0: 0;
  --space-0-5: 0.125rem;  /* 2px */
  --space-1: 0.25rem;     /* 4px */
  --space-1-5: 0.375rem;  /* 6px */
  --space-2: 0.5rem;      /* 8px */
  --space-2-5: 0.625rem;  /* 10px */
  --space-3: 0.75rem;     /* 12px */
  --space-3-5: 0.875rem;  /* 14px */
  --space-4: 1rem;        /* 16px */
  --space-5: 1.25rem;     /* 20px */
  --space-6: 1.5rem;      /* 24px */
  --space-7: 1.75rem;     /* 28px */
  --space-8: 2rem;        /* 32px */
  --space-9: 2.25rem;     /* 36px */
  --space-10: 2.5rem;     /* 40px */
  --space-11: 2.75rem;    /* 44px */
  --space-12: 3rem;       /* 48px */
  --space-14: 3.5rem;     /* 56px */
  --space-16: 4rem;       /* 64px */
  --space-18: 4.5rem;     /* 72px */
  --space-20: 5rem;       /* 80px */
  --space-24: 6rem;       /* 96px */
  --space-28: 7rem;       /* 112px */
  --space-32: 8rem;       /* 128px */
  --space-36: 9rem;       /* 144px */
  --space-40: 10rem;      /* 160px */
  --space-44: 11rem;      /* 176px */
  --space-48: 12rem;      /* 192px */
  --space-52: 13rem;      /* 208px */
  --space-56: 14rem;      /* 224px */
  --space-60: 15rem;      /* 240px */
  --space-64: 16rem;      /* 256px */
  --space-72: 18rem;      /* 288px */
  --space-80: 20rem;      /* 320px */
  --space-96: 24rem;      /* 384px */

  /* ==========================================================================
     BORDER RADIUS SYSTEM - Enhanced
     ========================================================================== */
  
  --radius-none: 0;
  --radius-xs: 0.0625rem;  /* 1px */
  --radius-sm: 0.125rem;   /* 2px */
  --radius-base: 0.25rem;  /* 4px */
  --radius-md: 0.375rem;   /* 6px */
  --radius-lg: 0.5rem;     /* 8px */
  --radius-xl: 0.75rem;    /* 12px */
  --radius-2xl: 1rem;      /* 16px */
  --radius-3xl: 1.5rem;    /* 24px */
  --radius-4xl: 2rem;      /* 32px */
  --radius-full: 9999px;

  /* ==========================================================================
     SHADOW SYSTEM - Enhanced with Brand Colors
     ========================================================================== */
  
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  
  /* Brand colored shadows */
  --shadow-colored-primary: 0 10px 15px -3px rgba(124, 58, 237, 0.3), 0 4px 6px -2px rgba(124, 58, 237, 0.05);
  --shadow-colored-accent: 0 10px 15px -3px rgba(245, 158, 11, 0.3), 0 4px 6px -2px rgba(245, 158, 11, 0.05);
  --shadow-colored-teal: 0 10px 15px -3px rgba(20, 184, 166, 0.3), 0 4px 6px -2px rgba(20, 184, 166, 0.05);
  --shadow-colored-success: 0 10px 15px -3px rgba(34, 197, 94, 0.3), 0 4px 6px -2px rgba(34, 197, 94, 0.05);
  --shadow-colored-error: 0 10px 15px -3px rgba(239, 68, 68, 0.3), 0 4px 6px -2px rgba(239, 68, 68, 0.05);

  /* ==========================================================================
     ANIMATION & TRANSITION SYSTEM - Enhanced
     ========================================================================== */
  
  /* Durations */
  --duration-instant: 0ms;
  --duration-75: 75ms;
  --duration-100: 100ms;
  --duration-150: 150ms;
  --duration-200: 200ms;
  --duration-300: 300ms;
  --duration-500: 500ms;
  --duration-700: 700ms;
  --duration-1000: 1000ms;
  --duration-slow: 1500ms;

  /* Easing Functions */
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* Common Transitions */
  --transition-colors: color var(--duration-150) var(--ease-in-out), 
                      background-color var(--duration-150) var(--ease-in-out), 
                      border-color var(--duration-150) var(--ease-in-out);
  --transition-opacity: opacity var(--duration-150) var(--ease-in-out);
  --transition-shadow: box-shadow var(--duration-150) var(--ease-in-out);
  --transition-transform: transform var(--duration-150) var(--ease-in-out);
  --transition-all: all var(--duration-150) var(--ease-in-out);
  --transition-bounce: all var(--duration-300) var(--ease-bounce);
  --transition-elastic: all var(--duration-500) var(--ease-elastic);

  /* ==========================================================================
     LAYOUT SYSTEM - Enhanced
     ========================================================================== */
  
  /* Container Widths */
  --container-xs: 480px;
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;
  --container-full: 100%;

  /* Content Widths */
  --content-xs: 20rem;    /* 320px */
  --content-sm: 24rem;    /* 384px */
  --content-md: 28rem;    /* 448px */
  --content-lg: 32rem;    /* 512px */
  --content-xl: 36rem;    /* 576px */
  --content-2xl: 42rem;   /* 672px */
  --content-3xl: 48rem;   /* 768px */
  --content-4xl: 56rem;   /* 896px */
  --content-5xl: 64rem;   /* 1024px */
  --content-6xl: 72rem;   /* 1152px */
  --content-7xl: 80rem;   /* 1280px */

  /* Z-Index Scale */
  --z-0: 0;
  --z-10: 10;
  --z-20: 20;
  --z-30: 30;
  --z-40: 40;
  --z-50: 50;
  --z-auto: auto;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 1080;
  --z-loading: 1090;

  /* Breakpoints (for JavaScript usage) */
  --breakpoint-xs: 480px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  /* ==========================================================================
     COMPONENT-SPECIFIC VARIABLES
     ========================================================================== */
  
  /* Button Variables */
  --btn-height-sm: 2rem;      /* 32px */
  --btn-height-base: 2.5rem;  /* 40px */
  --btn-height-lg: 3rem;      /* 48px */
  --btn-height-xl: 3.5rem;    /* 56px */
  
  /* Input Variables */
  --input-height-sm: 2rem;    /* 32px */
  --input-height-base: 2.5rem; /* 40px */
  --input-height-lg: 3rem;    /* 48px */
  --input-border-width: 1px;
  
  /* Card Variables */
  --card-padding-sm: var(--space-4);
  --card-padding-base: var(--space-6);
  --card-padding-lg: var(--space-8);
  
  /* Navigation Variables */
  --nav-height: 4rem;         /* 64px */
  --nav-height-mobile: 3.5rem; /* 56px */
  
  /* Sidebar Variables */
  --sidebar-width: 16rem;     /* 256px */
  --sidebar-width-collapsed: 4rem; /* 64px */
  
  /* Modal Variables */
  --modal-width-sm: 24rem;    /* 384px */
  --modal-width-base: 32rem;  /* 512px */
  --modal-width-lg: 48rem;    /* 768px */
  --modal-width-xl: 64rem;    /* 1024px */
  
  /* Toast Variables */
  --toast-width: 24rem;       /* 384px */
  --toast-offset: var(--space-4);
  
  /* Progress Variables */
  --progress-height: 0.5rem;  /* 8px */
  --progress-height-lg: 0.75rem; /* 12px */
  
  /* Avatar Variables */
  --avatar-size-xs: 1.5rem;   /* 24px */
  --avatar-size-sm: 2rem;     /* 32px */
  --avatar-size-base: 2.5rem; /* 40px */
  --avatar-size-lg: 3rem;     /* 48px */
  --avatar-size-xl: 4rem;     /* 64px */
  --avatar-size-2xl: 5rem;    /* 80px */
  
  /* Badge Variables */
  --badge-height: 1.25rem;    /* 20px */
  --badge-font-size: var(--font-size-xs);
  
  /* Notification Variables */
  --notification-padding: var(--space-4);
  --notification-border-radius: var(--radius-lg);
  
  /* Table Variables */
  --table-border-width: 1px;
  --table-cell-padding-x: var(--space-3);
  --table-cell-padding-y: var(--space-2);
  
  /* Form Variables */
  --form-group-spacing: var(--space-4);
  --label-spacing: var(--space-2);
  
  /* Loading Variables */
  --spinner-size-xs: 1rem;     /* 16px */
  --spinner-size-sm: 1.25rem;  /* 20px */
  --spinner-size-base: 1.5rem; /* 24px */
  --spinner-size-lg: 2rem;     /* 32px */
  --spinner-size-xl: 2.5rem;   /* 40px */
  
  --skeleton-color: var(--bg-tertiary);
  --skeleton-shimmer: var(--bg-quaternary);
  
  /* Icon Variables */
  --icon-size-xs: 0.75rem;   /* 12px */
  --icon-size-sm: 1rem;      /* 16px */
  --icon-size-base: 1.25rem; /* 20px */
  --icon-size-lg: 1.5rem;    /* 24px */
  --icon-size-xl: 2rem;      /* 32px */
  --icon-size-2xl: 2.5rem;   /* 40px */
  
  /* Step Progress Variables */
  --step-size: 2.5rem;       /* 40px */
  --step-size-sm: 2rem;      /* 32px */
  --step-size-lg: 3rem;      /* 48px */
  
  /* Gradient Variables - Enhanced with Brand Colors */
  --gradient-primary: linear-gradient(135deg, var(--tkp-violet) 0%, var(--color-brand-violet-600) 100%);
  --gradient-secondary: linear-gradient(135deg, var(--color-secondary-500) 0%, var(--color-secondary-600) 100%);
  --gradient-accent: linear-gradient(135deg, var(--tkp-amber) 0%, var(--color-brand-amber-600) 100%);
  --gradient-teal: linear-gradient(135deg, var(--tkp-teal) 0%, var(--color-brand-teal-600) 100%);
  --gradient-warm: linear-gradient(135deg, var(--color-warm-500) 0%, var(--color-warm-600) 100%);
  --gradient-cool: linear-gradient(135deg, var(--color-cool-400) 0%, var(--color-cool-500) 100%);
  
  /* Brand specific gradients */
  --gradient-brand-primary: linear-gradient(135deg, var(--tkp-violet) 0%, var(--tkp-teal) 100%);
  --gradient-brand-secondary: linear-gradient(135deg, var(--tkp-teal) 0%, var(--tkp-amber) 100%);
  --gradient-brand-rainbow: linear-gradient(135deg, 
    var(--tkp-violet) 0%, 
    var(--tkp-teal) 50%, 
    var(--tkp-amber) 100%);
  
  /* Hero gradient */
  --gradient-hero: linear-gradient(135deg, 
    var(--tkp-navy) 0%, 
    var(--tkp-violet) 50%, 
    var(--tkp-teal) 100%);
  
  /* Loading Shimmer Gradients */
  --gradient-shimmer: linear-gradient(
    90deg,
    var(--skeleton-color) 25%,
    var(--skeleton-shimmer) 50%,
    var(--skeleton-color) 75%
  );
  
  /* Progress Gradients */
  --gradient-progress: linear-gradient(90deg, var(--tkp-violet), var(--tkp-teal));
  --gradient-progress-success: linear-gradient(90deg, var(--interactive-success), #10b981);
  --gradient-progress-warning: linear-gradient(90deg, var(--interactive-warning), #f59e0b);
  --gradient-progress-error: linear-gradient(90deg, var(--interactive-error), #f87171);
}

/* ==========================================================================
   DARK THEME OVERRIDES - Enhanced with Brand Colors
   ========================================================================== */

[data-theme="dark"] {
  /* Logo background for dark theme */
  --logo-bg-color: var(--logo-bg-color-dark);
  
  /* Background Colors */
  --bg-primary: var(--color-secondary-950);
  --bg-secondary: var(--color-secondary-900);
  --bg-tertiary: var(--color-secondary-800);
  --bg-quaternary: var(--color-secondary-700);
  --bg-accent: var(--color-brand-violet-950);
  --bg-surface: var(--color-secondary-900);
  --bg-surface-raised: var(--color-secondary-800);
  --bg-surface-overlay: rgba(30, 41, 59, 0.8);
  --bg-overlay: rgba(255, 255, 255, 0.1);
  --bg-overlay-dark: rgba(0, 0, 0, 0.6);
  --bg-backdrop: rgba(0, 0, 0, 0.7);

  /* Text Colors */
  --text-primary: var(--color-secondary-50);
  --text-secondary: var(--color-secondary-200);
  --text-tertiary: var(--color-secondary-400);
  --text-quaternary: var(--color-secondary-500);
  --text-inverse: var(--tkp-navy);
  --text-accent: var(--color-brand-violet-400);
  --text-accent-hover: var(--color-brand-violet-300);
  --text-success: var(--color-success-400);
  --text-warning: var(--color-warning-400);
  --text-error: var(--color-error-400);
  --text-disabled: var(--color-secondary-600);
  --text-placeholder: var(--color-secondary-500);

  /* Border Colors */
  --border-primary: var(--color-secondary-800);
  --border-secondary: var(--color-secondary-700);
  --border-tertiary: var(--color-secondary-600);
  --border-accent: var(--color-brand-violet-800);
  --border-focus: var(--color-brand-violet-400);
  --border-success: var(--color-success-700);
  --border-warning: var(--color-warning-700);
  --border-error: var(--color-error-700);
  --border-disabled: var(--color-secondary-700);

  /* Interactive Colors - Adjusted for dark theme */
  --interactive-primary: var(--tkp-violet);
  --interactive-primary-hover: var(--color-brand-violet-400);
  --interactive-primary-active: var(--color-brand-violet-300);
  --interactive-primary-disabled: var(--color-secondary-700);
  
  --interactive-secondary: var(--color-secondary-600);
  --interactive-secondary-hover: var(--color-secondary-500);
  --interactive-secondary-active: var(--color-secondary-400);
  
  --interactive-accent: var(--tkp-amber);
  --interactive-accent-hover: var(--color-brand-amber-400);
  --interactive-accent-active: var(--color-brand-amber-300);
  
  --interactive-teal: var(--tkp-teal);
  --interactive-teal-hover: var(--color-brand-teal-400);
  --interactive-teal-active: var(--color-brand-teal-300);
  
  --interactive-success: var(--color-success-500);
  --interactive-success-hover: var(--color-success-400);
  --interactive-success-active: var(--color-success-300);
  
  --interactive-warning: var(--color-warning-500);
  --interactive-warning-hover: var(--color-warning-400);
  --interactive-warning-active: var(--color-warning-300);
  
  --interactive-error: var(--color-error-500);
  --interactive-error-hover: var(--color-error-400);
  --interactive-error-active: var(--color-error-300);

  /* Enhanced shadows for dark theme */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
  --shadow-colored-primary: 0 10px 15px -3px rgba(124, 58, 237, 0.4), 0 4px 6px -2px rgba(124, 58, 237, 0.1);
  --shadow-colored-accent: 0 10px 15px -3px rgba(245, 158, 11, 0.4), 0 4px 6px -2px rgba(245, 158, 11, 0.1);
  --shadow-colored-teal: 0 10px 15px -3px rgba(20, 184, 166, 0.4), 0 4px 6px -2px rgba(20, 184, 166, 0.1);
  --shadow-colored-success: 0 10px 15px -3px rgba(34, 197, 94, 0.4), 0 4px 6px -2px rgba(34, 197, 94, 0.1);
  --shadow-colored-error: 0 10px 15px -3px rgba(239, 68, 68, 0.4), 0 4px 6px -2px rgba(239, 68, 68, 0.1);
  
  /* Dark theme gradients */
  --gradient-hero: linear-gradient(135deg, 
    #ffffff 0%, 
    var(--tkp-violet) 50%, 
    var(--tkp-teal) 100%);
}

/* ==========================================================================
   HIGH CONTRAST THEME
   ========================================================================== */

@media (prefers-contrast: high) {
  :root {
    --border-primary: var(--tkp-navy);
    --border-secondary: var(--color-secondary-800);
    --text-secondary: var(--color-secondary-800);
    --text-tertiary: var(--color-secondary-700);
  }

  [data-theme="dark"] {
    --border-primary: var(--color-secondary-200);
    --border-secondary: var(--color-secondary-300);
    --text-secondary: var(--color-secondary-100);
    --text-tertiary: var(--color-secondary-200);
  }
}

/* ==========================================================================
   REDUCED MOTION PREFERENCE
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-75: 0ms;
    --duration-100: 0ms;
    --duration-150: 0ms;
    --duration-200: 0ms;
    --duration-300: 0ms;
    --duration-500: 0ms;
    --duration-700: 0ms;
    --duration-1000: 0ms;
    --duration-slow: 0ms;
    
    --transition-all: none;
    --transition-colors: none;
    --transition-opacity: none;
    --transition-shadow: none;
    --transition-transform: none;
    --transition-bounce: none;
    --transition-elastic: none;
  }
}

/* ==========================================================================
   UTILITY TOKENS
   ========================================================================== */

:root {
  /* Aspect Ratios */
  --aspect-square: 1;
  --aspect-video: 16/9;
  --aspect-photo: 4/3;
  --aspect-golden: 1.618;
  
  /* Opacity Scale */
  --opacity-0: 0;
  --opacity-5: 0.05;
  --opacity-10: 0.1;
  --opacity-20: 0.2;
  --opacity-25: 0.25;
  --opacity-30: 0.3;
  --opacity-40: 0.4;
  --opacity-50: 0.5;
  --opacity-60: 0.6;
  --opacity-70: 0.7;
  --opacity-75: 0.75;
  --opacity-80: 0.8;
  --opacity-90: 0.9;
  --opacity-95: 0.95;
  --opacity-100: 1;
  
  /* Scale Factors */
  --scale-0: 0;
  --scale-50: 0.5;
  --scale-75: 0.75;
  --scale-90: 0.9;
  --scale-95: 0.95;
  --scale-100: 1;
  --scale-105: 1.05;
  --scale-110: 1.1;
  --scale-125: 1.25;
  --scale-150: 1.5;
  --scale-200: 2;
  
  /* Rotation Angles */
  --rotate-0: 0deg;
  --rotate-1: 1deg;
  --rotate-2: 2deg;
  --rotate-3: 3deg;
  --rotate-6: 6deg;
  --rotate-12: 12deg;
  --rotate-45: 45deg;
  --rotate-90: 90deg;
  --rotate-180: 180deg;
  --rotate-270: 270deg;
}