:root {
  /* Color Tokens */
  --color-primary: #141433;
  --color-secondary: #C3A46A;
  --color-gold: var(--color-secondary);
  --color-accent: #A3583B;
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-border: rgba(195, 164, 106, 0.3);
  --color-text-rgb: 20, 20, 51;
  --color-primary-rgb: 20, 20, 51;
  --color-secondary-rgb: 195, 164, 106;
  --color-text: var(--color-primary);
  --color-bg: #F6F3EE;
  --color-slate-600: #6B7280;
  --color-slate-400: #8D8D8D;
  /* Breakpoints */
  --breakpoint-xs: 480px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;

  /* Spacing Scale */
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;

  /* Typography */
  --font-size-base: 16px;
  --line-height-base: 1.5;

  /* Z-Index Scale */
  --z-base: 1;
  --z-navigation: 1000;
  --z-sticky: 1020;
  --z-modal: 1040;
  --z-overlay: 1050;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;

  /* Legacy Spacing Aliases (for older utilities still using --space-*) */
  --space-1: var(--spacing-1);
  --space-2: var(--spacing-2);
  --space-3: var(--spacing-3);
  --space-4: var(--spacing-4);
  --space-5: var(--spacing-5);

  /* Semantic Surfaces & Borders */
  --surface-hover: rgba(195, 164, 106, 0.10);
  --surface-active: rgba(195, 164, 106, 0.08);
  --surface-subtle: rgba(195, 164, 106, 0.03);
  --surface-soft: rgba(195, 164, 106, 0.05);
  --overlay-scrim: rgba(var(--color-text-rgb), 0.50);
  --overlay-scrim-strong: rgba(var(--color-text-rgb), 0.85);
  --color-border-weak: rgba(195, 164, 106, 0.10);
  --color-border-subtle: rgba(195, 164, 106, 0.15);
  --color-border-mid: rgba(195, 164, 106, 0.20);
  --color-border-strong: rgba(195, 164, 106, 0.50);
  --color-border-bold: rgba(195, 164, 106, 0.40);

  /* Motion Tokens */
  --motion-duration-1: 0.2s;
  --motion-duration-2: 0.3s;
  --motion-duration-3: 0.35s;
  --motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-ease-emphasized: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Shadow Tokens */
  --shadow-color: rgba(var(--color-primary-rgb), 0.12);
  --shadow-sm: 0 2px 4px var(--shadow-color);
  --shadow-md: 0 4px 12px var(--shadow-color);
  --shadow-lg: 0 6px 20px rgba(var(--color-primary-rgb), 0.16);
  --shadow-xl: 0 20px 60px rgba(var(--color-primary-rgb), 0.28);
  --shadow-emphasis: 0 0 0 4px rgba(var(--color-secondary-rgb), 0.35), 0 8px 24px rgba(var(--color-primary-rgb), 0.22);
  --shadow-gold-sm: 0 2px 4px rgba(var(--color-secondary-rgb), 0.35);
  --shadow-gold-md: 0 4px 12px rgba(var(--color-secondary-rgb), 0.35);
  --shadow-gold-lg: 0 6px 20px rgba(var(--color-secondary-rgb), 0.35);
  --focus-ring: 0 0 0 3px var(--color-border-subtle);
  --focus-ring-strong: 0 0 0 4px var(--color-border-subtle);
  /* Directional & Status Shadows */
  /* Lateral drawer or side panels (left/right). Negative X for left, positive for right). */
  --shadow-drawer-side: -2px 0 16px rgba(var(--color-primary-rgb), 0.10);
  /* Popovers/menus with directional bias */
  --shadow-popover-down: 0 8px 20px rgba(var(--color-primary-rgb), 0.14);
  --shadow-popover-up: 0 -8px 20px rgba(var(--color-primary-rgb), 0.14);
  /* Status glows (subtle) for semantic feedback */
  --shadow-success: 0 2px 8px rgba(16, 185, 129, 0.28);
  --shadow-warning: 0 2px 8px rgba(245, 158, 11, 0.28);
  --shadow-error: 0 2px 8px rgba(239, 68, 68, 0.28);

  /* Dynamic Button Tokens (overridden via Customizer inline CSS) */
  --ts-btn-radius: 6px;
  --ts-btn-shadow: var(--shadow-sm);
  --ts-btn-border-width: 2px;
  --ts-btn-bg: var(--color-primary);
  --ts-btn-text: var(--color-white);
  --ts-btn-border: var(--color-primary);
  --ts-btn-bg-hover: var(--color-secondary);
  --ts-btn-text-hover: var(--color-white);
  --ts-btn-border-hover: var(--color-secondary);
  --ts-btn-bg-focus: var(--ts-btn-bg-hover);
  --ts-btn-text-focus: var(--ts-btn-text-hover);
  --ts-btn-border-focus: var(--ts-btn-border-hover);
  --ts-btn-bg-active: var(--ts-btn-bg);
  --ts-btn-text-active: var(--ts-btn-text);
  --ts-btn-border-active: var(--ts-btn-border);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* Explicitly disable non-essential pulses/spins beyond global shortening */
  .ts-shipping-progress-fill,
  .pulse,
  .ts-spinner,
  [class*="spin"],
  [data-anim="pulse"],
  .ts-loading { animation: none !important; }
}

/* ========================================
   Utility Classes (loaded early; optional to move to utilities.css)
   Elevation utilities
   ======================================== */
.elevation-sm { box-shadow: var(--shadow-sm); }
.elevation-md { box-shadow: var(--shadow-md); }
.elevation-lg { box-shadow: var(--shadow-lg); }
.elevation-xl { box-shadow: var(--shadow-xl); }
.elevation-success { box-shadow: var(--shadow-success); }
.elevation-warning { box-shadow: var(--shadow-warning); }
.elevation-error { box-shadow: var(--shadow-error); }

/* Spacing utilities (minimal core set; extend as needed) */
.u-m-0 { margin: 0 !important; }
.u-p-0 { padding: 0 !important; }
.u-p-1 { padding: var(--spacing-1) !important; }
.u-p-2 { padding: var(--spacing-2) !important; }
.u-p-3 { padding: var(--spacing-3) !important; }
.u-p-4 { padding: var(--spacing-4) !important; }
.u-p-6 { padding: var(--spacing-6) !important; }
.u-px-4 { padding-left: var(--spacing-4) !important; padding-right: var(--spacing-4) !important; }
.u-py-4 { padding-top: var(--spacing-4) !important; padding-bottom: var(--spacing-4) !important; }
.u-mb-2 { margin-bottom: var(--spacing-2) !important; }
.u-mb-4 { margin-bottom: var(--spacing-4) !important; }
.u-mb-6 { margin-bottom: var(--spacing-6) !important; }
.u-mt-2 { margin-top: var(--spacing-2) !important; }
.u-mt-4 { margin-top: var(--spacing-4) !important; }
.u-mt-6 { margin-top: var(--spacing-6) !important; }
.u-gap-4 { gap: var(--spacing-4) !important; }
.u-gap-6 { gap: var(--spacing-6) !important; }

/* Responsive helpers (use with @media queries) */
@media (min-width: var(--breakpoint-md)) {
  .md\:u-p-4 { padding: var(--spacing-4) !important; }
  .md\:u-flex { display: flex !important; }
}

@media (min-width: var(--breakpoint-lg)) {
  .lg\:u-p-6 { padding: var(--spacing-6) !important; }
  .lg\:u-grid { display: grid !important; }
}