/**
 * VYRO Spatial Commerce Design Token Architecture
 *
 * 4-Tier Hierarchy: Foundation -> Semantic -> Component -> Spatial
 * Complete system: color, typography, spacing, motion, elevation, and spatial primitives.
 * Light/Dark mode aliases via CSS custom properties — zero JavaScript required.
 *
 * @package Vyro
 * @since   1.0.0 (Phase 2 — Upgraded Design Overhaul)
 */

:root {
	/* ==========================================================================
	   1. FOUNDATION — Color Primitives
	   ========================================================================== */

	/* Neutral Scale */
	--vyro-color-near-black:   #05070C;
	--vyro-color-black:        #0A0A0D;
	--vyro-color-ink:          #0F1117;
	--vyro-color-white:        #FFFFFF;
	--vyro-color-soft-white:   #F8F8FA;
	--vyro-color-light-surface:#F2F2F5;
	--vyro-color-muted:        #E8E8ED;
	--vyro-color-dark-gray:    #202126;
	--vyro-color-mid-gray:     #52525B;
	--vyro-color-gray:         #71717A;
	--vyro-color-light-gray:   #A1A1AA;

	/* Violet — Spatial Brand Accent */
	--vyro-color-violet-50:  #F5F3FF;
	--vyro-color-violet-100: #EDE9FE;
	--vyro-color-violet-200: #DDD6FE;
	--vyro-color-violet-300: #C4B5FD;
	--vyro-color-violet-400: #A78BFA;
	--vyro-color-violet-500: #8B5CF6;
	--vyro-color-violet-600: #7C3AED;
	--vyro-color-violet-700: #6D28D9;
	--vyro-color-violet-800: #5B21B6;
	--vyro-color-violet-900: #4C1D95;

	/* Emerald — Success / Save */
	--vyro-color-emerald-50:  #ECFDF5;
	--vyro-color-emerald-100: #D1FAE5;
	--vyro-color-emerald-400: #34D399;
	--vyro-color-emerald-500: #10B981;
	--vyro-color-emerald-600: #059669;
	--vyro-color-emerald-700: #047857;

	/* Rose — Urgency / Limited / Hot */
	--vyro-color-rose-50:  #FFF1F2;
	--vyro-color-rose-100: #FFE4E6;
	--vyro-color-rose-400: #FB7185;
	--vyro-color-rose-500: #F43F5E;
	--vyro-color-rose-600: #E11D48;

	/* Amber — Warning / Low Stock */
	--vyro-color-amber-50:  #FFFBEB;
	--vyro-color-amber-100: #FEF3C7;
	--vyro-color-amber-400: #FBBF24;
	--vyro-color-amber-500: #F59E0B;
	--vyro-color-amber-600: #D97706;

	/* Blue — Info */
	--vyro-color-blue-100: #DBEAFE;
	--vyro-color-blue-500: #3B82F6;
	--vyro-color-blue-600: #2563EB;

	/* ==========================================================================
	   2. FOUNDATION — Typography Scale
	   ========================================================================== */

	/* Font Families */
	--vyro-font-display: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--vyro-font-body:    'Inter', 'SF Pro Text',    -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--vyro-font-mono:    'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;

	/* Fluid Display Scale — clamp(min, preferred, max) */
	--vyro-text-display-2xl: clamp(3.75rem, 7vw,  8rem);       /* Hero headline */
	--vyro-text-display-xl:  clamp(3rem,    5vw,  6rem);       /* Section hero */
	--vyro-text-display-lg:  clamp(2.25rem, 3.5vw, 4rem);      /* Page title */
	--vyro-text-display-md:  clamp(1.75rem, 2.5vw, 2.75rem);   /* Card headline */
	--vyro-text-display-sm:  clamp(1.375rem, 2vw, 2rem);       /* Sub-headline */

	/* Body & UI Scale */
	--vyro-text-xl:   1.25rem;    /* 20px */
	--vyro-text-lg:   1.125rem;   /* 18px */
	--vyro-text-base: 1rem;       /* 16px */
	--vyro-text-sm:   0.9375rem;  /* 15px */
	--vyro-text-xs:   0.875rem;   /* 14px */
	--vyro-text-2xs:  0.8125rem;  /* 13px */
	--vyro-text-3xs:  0.75rem;    /* 12px */
	--vyro-text-4xs:  0.6875rem;  /* 11px */

	/* Commerce-Specific Scale */
	--vyro-text-price-lg:  clamp(1.75rem, 2.5vw, 2.5rem);   /* Product page price */
	--vyro-text-price-md:  clamp(1.25rem, 1.8vw, 1.625rem); /* Card price */
	--vyro-text-price-sm:  1.0625rem;                         /* Mini-cart price */
	--vyro-text-price-xs:  0.9375rem;                         /* Order line item */

	/* Font Weights */
	--vyro-font-normal:   400;
	--vyro-font-medium:   500;
	--vyro-font-semibold: 600;
	--vyro-font-bold:     700;
	--vyro-font-extrabold:800;
	--vyro-font-black:    900;

	/* Line Heights */
	--vyro-leading-none:    1;
	--vyro-leading-tight:   1.1;
	--vyro-leading-snug:    1.25;
	--vyro-leading-normal:  1.5;
	--vyro-leading-relaxed: 1.65;
	--vyro-leading-loose:   1.8;

	/* Letter Spacing */
	--vyro-tracking-tightest: -0.05em;
	--vyro-tracking-tight:    -0.03em;
	--vyro-tracking-snug:     -0.02em;
	--vyro-tracking-normal:   0em;
	--vyro-tracking-wide:     0.04em;
	--vyro-tracking-wider:    0.08em;
	--vyro-tracking-widest:   0.12em;

	/* ==========================================================================
	   3. FOUNDATION — Spacing Scale (4px base grid)
	   ========================================================================== */
	--vyro-space-1:   0.0625rem;  /* 1px */
	--vyro-space-2:   0.125rem;   /* 2px */
	--vyro-space-4:   0.25rem;    /* 4px */
	--vyro-space-6:   0.375rem;   /* 6px */
	--vyro-space-8:   0.5rem;     /* 8px */
	--vyro-space-10:  0.625rem;   /* 10px */
	--vyro-space-12:  0.75rem;    /* 12px */
	--vyro-space-16:  1rem;       /* 16px */
	--vyro-space-20:  1.25rem;    /* 20px */
	--vyro-space-24:  1.5rem;     /* 24px */
	--vyro-space-28:  1.75rem;    /* 28px */
	--vyro-space-32:  2rem;       /* 32px */
	--vyro-space-40:  2.5rem;     /* 40px */
	--vyro-space-48:  3rem;       /* 48px */
	--vyro-space-56:  3.5rem;     /* 56px */
	--vyro-space-64:  4rem;       /* 64px */
	--vyro-space-80:  5rem;       /* 80px */
	--vyro-space-96:  6rem;       /* 96px */
	--vyro-space-120: 7.5rem;     /* 120px */
	--vyro-space-160: 10rem;      /* 160px */

	/* ==========================================================================
	   4. FOUNDATION — Border Radius Scale
	   ========================================================================== */
	--vyro-radius-xs:   4px;
	--vyro-radius-sm:   8px;
	--vyro-radius-md:   12px;
	--vyro-radius-lg:   16px;
	--vyro-radius-xl:   20px;
	--vyro-radius-xxl:  28px;
	--vyro-radius-3xl:  36px;
	--vyro-radius-pill: 999px;

	/* ==========================================================================
	   5. FOUNDATION — Motion & Animation
	   ========================================================================== */
	--vyro-motion-instant:  80ms;
	--vyro-motion-fast:     140ms;
	--vyro-motion-normal:   220ms;
	--vyro-motion-slow:     350ms;
	--vyro-motion-slower:   500ms;
	--vyro-motion-lazy:     700ms;

	--vyro-ease-linear:   linear;
	--vyro-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
	--vyro-ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
	--vyro-ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
	--vyro-ease-decel:    cubic-bezier(0, 0, 0.2, 1);
	--vyro-ease-accel:    cubic-bezier(0.4, 0, 1, 1);

	/* Interaction micro-motion */
	--vyro-hover-lift:    translateY(-2px);
	--vyro-hover-lift-sm: translateY(-1px);
	--vyro-hover-lift-lg: translateY(-4px);
	--vyro-press-scale:   scale(0.97);
	--vyro-card-lift:     translateY(-4px) scale(1.005);

	/* ==========================================================================
	   6. FOUNDATION — Z-Index Scale
	   ========================================================================== */
	--vyro-z-below:    -1;
	--vyro-z-base:     1;
	--vyro-z-card:     10;
	--vyro-z-overlay:  50;
	--vyro-z-dropdown: 100;
	--vyro-z-sticky:   500;
	--vyro-z-drawer:   1000;
	--vyro-z-modal:    1100;
	--vyro-z-popover:  1200;
	--vyro-z-toast:    1300;
	--vyro-z-top:      9999;

	/* ==========================================================================
	   7. SEMANTIC — Light Mode (Default)
	   ========================================================================== */

	/* Backgrounds & Surfaces */
	--vyro-color-background:        var(--vyro-color-white);
	--vyro-color-surface:           var(--vyro-color-soft-white);
	--vyro-color-surface-elevated:  var(--vyro-color-white);
	--vyro-color-surface-soft:      var(--vyro-color-light-surface);
	--vyro-color-surface-dark:      var(--vyro-color-near-black);
	--vyro-color-surface-inverse:   var(--vyro-color-near-black);
	--vyro-color-surface-hover:     rgba(139, 92, 246, 0.04);

	/* Text */
	--vyro-color-text:           var(--vyro-color-near-black);
	--vyro-color-text-secondary: var(--vyro-color-dark-gray);
	--vyro-color-text-muted:     var(--vyro-color-gray);
	--vyro-color-text-placeholder: var(--vyro-color-light-gray);
	--vyro-color-text-inverse:   var(--vyro-color-white);
	--vyro-color-text-on-accent: var(--vyro-color-white);

	/* Borders */
	--vyro-color-border:        rgba(0, 0, 0, 0.08);
	--vyro-color-border-subtle: rgba(0, 0, 0, 0.04);
	--vyro-color-border-strong: rgba(0, 0, 0, 0.16);
	--vyro-color-border-focus:  var(--vyro-color-violet-500);

	/* Brand Accent */
	--vyro-color-accent:       var(--vyro-color-violet-500);
	--vyro-color-accent-hover: var(--vyro-color-violet-700);
	--vyro-color-accent-soft:  var(--vyro-color-violet-200);
	--vyro-color-accent-glow:  rgba(139, 92, 246, 0.25);
	--vyro-color-inverse:      var(--vyro-color-white);

	/* Commerce Semantic */
	--vyro-color-success:       var(--vyro-color-emerald-500);
	--vyro-color-success-bg:    var(--vyro-color-emerald-50);
	--vyro-color-success-text:  var(--vyro-color-emerald-700);
	--vyro-color-sale:          var(--vyro-color-emerald-500);
	--vyro-color-sale-bg:       var(--vyro-color-emerald-50);
	--vyro-color-sale-text:     var(--vyro-color-emerald-700);
	--vyro-color-urgency:       var(--vyro-color-rose-500);
	--vyro-color-urgency-bg:    var(--vyro-color-rose-50);
	--vyro-color-urgency-text:  var(--vyro-color-rose-600);
	--vyro-color-warning:       var(--vyro-color-amber-500);
	--vyro-color-warning-bg:    var(--vyro-color-amber-50);
	--vyro-color-warning-text:  var(--vyro-color-amber-600);
	--vyro-color-error:         var(--vyro-color-rose-500);
	--vyro-color-error-bg:      var(--vyro-color-rose-50);
	--vyro-color-error-text:    var(--vyro-color-rose-600);
	--vyro-color-info:          var(--vyro-color-blue-500);
	--vyro-color-info-bg:       var(--vyro-color-blue-100);

	/* ==========================================================================
	   8. COMPONENT & LAYOUT TOKENS
	   ========================================================================== */

	/* Container Widths */
	--vyro-container:        1280px;
	--vyro-container-wide:   1536px;
	--vyro-container-narrow: 840px;
	--vyro-container-xs:     640px;
	--vyro-gutter:           clamp(1rem, 4vw, 2.5rem);
	--vyro-gutter-sm:        clamp(0.75rem, 2vw, 1.5rem);

	/* Header */
	--vyro-header-height:         72px;
	--vyro-header-height-scrolled: 60px;
	--vyro-tab-bar-height:         64px;
	--vyro-announcement-height:    40px;

	/* Semantic Radius Aliases */
	--vyro-radius-control: var(--vyro-radius-md);
	--vyro-radius-card:    var(--vyro-radius-lg);
	--vyro-radius-panel:   var(--vyro-radius-xl);
	--vyro-radius-modal:   var(--vyro-radius-xxl);
	--vyro-radius-spatial: var(--vyro-radius-pill);

	/* ==========================================================================
	   9. ELEVATION & SHADOW SYSTEM
	   ========================================================================== */
	--vyro-shadow-xs:       0 1px 3px 0 rgba(0, 0, 0, 0.05);
	--vyro-shadow-sm:       0 2px 8px -2px rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.04);
	--vyro-shadow-md:       0 8px 24px -4px rgba(0, 0, 0, 0.08), 0 2px 8px -1px rgba(0, 0, 0, 0.04);
	--vyro-shadow-lg:       0 16px 40px -8px rgba(0, 0, 0, 0.12), 0 4px 16px -2px rgba(0, 0, 0, 0.06);
	--vyro-shadow-xl:       0 24px 56px -12px rgba(0, 0, 0, 0.18), 0 8px 24px -4px rgba(0, 0, 0, 0.08);
	--vyro-shadow-2xl:      0 32px 72px -16px rgba(0, 0, 0, 0.24), 0 12px 32px -6px rgba(0, 0, 0, 0.10);

	/* Product-specific hover lift shadow */
	--vyro-shadow-product-hover: 0 20px 48px -8px rgba(0, 0, 0, 0.18), 0 8px 20px -4px rgba(0, 0, 0, 0.08);
	--vyro-shadow-card-lift:     0 12px 32px -6px rgba(0, 0, 0, 0.14), 0 4px 12px -2px rgba(0, 0, 0, 0.06);

	/* Accent / Spatial Glow Shadows */
	--vyro-shadow-accent-sm:  0 4px 16px -2px rgba(139, 92, 246, 0.30);
	--vyro-shadow-accent-md:  0 8px 28px -4px rgba(139, 92, 246, 0.35);
	--vyro-shadow-accent-lg:  0 16px 48px -8px rgba(139, 92, 246, 0.40);
	--vyro-shadow-accent-glow:0 0 40px rgba(139, 92, 246, 0.35);

	/* Sale / Urgency glows */
	--vyro-shadow-sale-glow:    0 4px 16px -2px rgba(16, 185, 129, 0.30);
	--vyro-shadow-urgency-glow: 0 4px 16px -2px rgba(244, 63, 94, 0.25);

	/* Named Elevation Aliases (backwards compatibility) */
	--vyro-elevation-0:       none;
	--vyro-elevation-1:       var(--vyro-shadow-sm);
	--vyro-elevation-2:       var(--vyro-shadow-md);
	--vyro-elevation-3:       var(--vyro-shadow-lg);
	--vyro-elevation-floating: var(--vyro-shadow-xl);
	--vyro-elevation-spatial:  0 24px 64px -12px rgba(0, 0, 0, 0.25), 0 0 32px 0 rgba(139, 92, 246, 0.20);

	/* ==========================================================================
	   10. GLASSMORPHISM & SPATIAL TOKENS
	   ========================================================================== */
	--vyro-glass-background:   rgba(255, 255, 255, 0.75);
	--vyro-glass-border:       rgba(255, 255, 255, 0.40);
	--vyro-glass-blur:         16px;
	--vyro-glass-blur-lg:      28px;
	--vyro-glass-opacity:      0.85;

	--vyro-glass-dark-background: rgba(18, 18, 28, 0.70);
	--vyro-glass-dark-border:     rgba(255, 255, 255, 0.10);

	--vyro-spatial-glow:        0 0 24px rgba(139, 92, 246, 0.30);
	--vyro-spatial-glow-soft:   0 0 16px rgba(139, 92, 246, 0.18);
	--vyro-spatial-glow-strong: 0 0 56px rgba(139, 92, 246, 0.50);
	--vyro-spatial-glow-xl:     0 0 80px rgba(139, 92, 246, 0.60);
	--vyro-spatial-blur:        20px;
	--vyro-spatial-depth:       1;
	--vyro-spatial-orbit:       360px;

	/* Ring animations */
	--vyro-ring-outer-size: 400px;
	--vyro-ring-inner-size: 280px;
}

/* ==========================================================================
   DARK SPATIAL ENVIRONMENT
   ========================================================================== */
[data-theme="dark"],
.vyro-dark,
.vyro-section--dark {
	--vyro-color-background:        var(--vyro-color-near-black);
	--vyro-color-surface:           var(--vyro-color-black);
	--vyro-color-surface-elevated:  #12121C;
	--vyro-color-surface-soft:      var(--vyro-color-dark-gray);
	--vyro-color-surface-dark:      #000000;
	--vyro-color-surface-inverse:   var(--vyro-color-white);
	--vyro-color-surface-hover:     rgba(139, 92, 246, 0.08);

	--vyro-color-text:           var(--vyro-color-soft-white);
	--vyro-color-text-secondary: var(--vyro-color-muted);
	--vyro-color-text-muted:     var(--vyro-color-gray);
	--vyro-color-text-placeholder: var(--vyro-color-mid-gray);
	--vyro-color-text-inverse:   var(--vyro-color-near-black);
	--vyro-color-text-on-accent: var(--vyro-color-white);

	--vyro-color-border:        rgba(255, 255, 255, 0.10);
	--vyro-color-border-subtle: rgba(255, 255, 255, 0.05);
	--vyro-color-border-strong: rgba(255, 255, 255, 0.20);
	--vyro-color-border-focus:  var(--vyro-color-violet-400);

	--vyro-color-accent:       var(--vyro-color-violet-500);
	--vyro-color-accent-hover: var(--vyro-color-violet-400);
	--vyro-color-accent-soft:  rgba(139, 92, 246, 0.18);
	--vyro-color-accent-glow:  rgba(139, 92, 246, 0.35);
	--vyro-color-inverse:      var(--vyro-color-near-black);

	--vyro-shadow-sm:       0 2px 8px -2px rgba(0, 0, 0, 0.40);
	--vyro-shadow-md:       0 8px 24px -4px rgba(0, 0, 0, 0.55);
	--vyro-shadow-lg:       0 16px 40px -8px rgba(0, 0, 0, 0.70);
	--vyro-shadow-xl:       0 24px 56px -12px rgba(0, 0, 0, 0.85);
	--vyro-shadow-card-lift:0 12px 32px -6px rgba(0, 0, 0, 0.55), 0 4px 12px -2px rgba(0, 0, 0, 0.30);
	--vyro-shadow-product-hover: 0 20px 48px -8px rgba(0, 0, 0, 0.70), 0 8px 20px -4px rgba(0, 0, 0, 0.40);

	--vyro-elevation-1:        0 2px 8px -2px rgba(0, 0, 0, 0.40);
	--vyro-elevation-2:        0 8px 24px -4px rgba(0, 0, 0, 0.55);
	--vyro-elevation-3:        0 16px 40px -8px rgba(0, 0, 0, 0.70);
	--vyro-elevation-floating: 0 24px 56px -12px rgba(0, 0, 0, 0.85);
	--vyro-elevation-spatial:  0 24px 64px -12px rgba(0, 0, 0, 0.80), 0 0 32px 0 rgba(139, 92, 246, 0.30);

	--vyro-glass-background: rgba(18, 18, 28, 0.70);
	--vyro-glass-border:     rgba(255, 255, 255, 0.10);

	--vyro-spatial-glow:        0 0 24px rgba(139, 92, 246, 0.40);
	--vyro-spatial-glow-strong: 0 0 64px rgba(139, 92, 246, 0.60);
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}