/* ============================================================
   TechCommerce "Ultra Label" design tokens.
   Brutalist clarity × soft luxury. Theme switch via data-theme.
   ============================================================ */
:root {
  /* Brand core — Ultra (default) */
  --clr-primary:        #1A1A2E;
  --clr-accent:         #E94560;
  --clr-accent-soft:    #FF7096;
  --clr-gold:           #F5A623;

  /* Surface */
  --clr-bg:             #F8F7F4;
  --clr-surface:        #FFFFFF;
  --clr-surface-2:      #F2F0EC;
  --clr-border:         #E8E5DF;

  /* Text */
  --clr-text-primary:   #0D0D0D;
  --clr-text-secondary: #6B6860;
  --clr-text-muted:     #A8A49C;
  --clr-on-primary:     #FFFFFF;
  --clr-on-accent:      #FFFFFF;

  /* Semantic */
  --clr-success: #2ECC71;
  --clr-warning: #F39C12;
  --clr-danger:  #E74C3C;
  --clr-info:    #3498DB;

  /* Typography */
  --font-display: 'Syne', sans-serif;
  --font-ui: 'Inter', system-ui, sans-serif;
  --text-display-xl: clamp(2.5rem, 6vw, 4.5rem);
  --text-display-lg: clamp(2rem, 4vw, 3rem);
  --text-display-md: clamp(1.5rem, 3vw, 2rem);
  --text-xl: 1.25rem; --text-lg: 1.125rem; --text-md: 1rem;
  --text-sm: .875rem; --text-xs: .75rem;

  /* Spacing (8px base) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px;

  /* Radius */
  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px;
  --radius-xl: 32px; --radius-full: 9999px;

  /* Shadows */
  --shadow-card:  0 2px 16px rgba(0,0,0,.06), 0 1px 4px rgba(0,0,0,.04);
  --shadow-modal: 0 24px 80px rgba(0,0,0,.16);
  --shadow-float: 0 8px 32px rgba(233,69,96,.18);

  /* Layout */
  --header-h: 70px;
  --header-h-compact: 52px;
  --bottomnav-h: 60px;
  --container: 1280px;
}

/* ---------- Themes ---------- */
[data-theme="sakura"] {
  --clr-primary: #4A2545; --clr-accent: #E84A8A; --clr-accent-soft: #F8A8C8;
  --clr-gold: #D9A441;
  --clr-bg: #FDF6F8; --clr-surface: #FFFFFF; --clr-surface-2: #FAEAF0;
  --clr-border: #F2D9E3;
  --clr-text-primary: #2D1226; --clr-text-secondary: #8A6478; --clr-text-muted: #BFA3B2;
  --shadow-float: 0 8px 32px rgba(232,74,138,.18);
}

[data-theme="dark-bazaar"] {
  --clr-primary: #0F0F14; --clr-accent: #00E5A0; --clr-accent-soft: #5CFFCB;
  --clr-gold: #FFD166; --clr-on-accent: #06231A;
  --clr-bg: #0F0F14; --clr-surface: #1A1A24; --clr-surface-2: #232330;
  --clr-border: #2E2E3E;
  --clr-text-primary: #F2F2F7; --clr-text-secondary: #A0A0B8; --clr-text-muted: #6C6C84;
  --shadow-card: 0 2px 16px rgba(0,0,0,.4); --shadow-modal: 0 24px 80px rgba(0,0,0,.6);
  --shadow-float: 0 8px 32px rgba(0,229,160,.22);
}

[data-theme="emerald"] {
  --clr-primary: #14342B; --clr-accent: #0E8A5F; --clr-accent-soft: #7BCBA8;
  --clr-gold: #C8A24B;
  --clr-bg: #F6F8F4; --clr-surface: #FFFFFF; --clr-surface-2: #EAF1E8;
  --clr-border: #DCE7D8;
  --clr-text-primary: #11231C; --clr-text-secondary: #5E7268; --clr-text-muted: #9AAA9F;
  --shadow-float: 0 8px 32px rgba(14,138,95,.2);
}

[data-theme="sunset"] {
  --clr-primary: #4F2A1D; --clr-accent: #F2643B; --clr-accent-soft: #FFA987;
  --clr-gold: #F5A623;
  --clr-bg: #FCF6F0; --clr-surface: #FFFFFF; --clr-surface-2: #FAEBDF;
  --clr-border: #F2DECB;
  --clr-text-primary: #331A10; --clr-text-secondary: #8C6E5C; --clr-text-muted: #C2A793;
  --shadow-float: 0 8px 32px rgba(242,100,59,.22);
}

[data-theme="mono"] {
  --clr-primary: #000000; --clr-accent: #000000; --clr-accent-soft: #444444;
  --clr-gold: #777777;
  --clr-bg: #FFFFFF; --clr-surface: #FFFFFF; --clr-surface-2: #F4F4F4;
  --clr-border: #DDDDDD;
  --clr-text-primary: #000000; --clr-text-secondary: #555555; --clr-text-muted: #999999;
  --shadow-float: 0 8px 32px rgba(0,0,0,.18);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}