/* ============================================
   ClothingV-UPC — Design System Foundation
   ============================================ */

/* --- Reset --- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit;border:none;background:none}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}

/* --- CSS Variables (Design Tokens) --- */
:root{
  /* Backgrounds (narco.city dark) */
  --bg:#0a0a0a;
  --bg2:#050505;
  --panel:rgba(255,255,255,.035);
  --panel2:rgba(255,255,255,.05);
  --panel-solid:#111111;

  /* Borders & Lines */
  --line:rgba(255,255,255,.07);
  --line2:rgba(255,255,255,.04);

  /* Text */
  --text:rgba(255,255,255,.90);
  --muted:rgba(255,255,255,.55);
  --dim:rgba(255,255,255,.35);

  /* Accent (default: blue) */
  --accent-r:48; --accent-g:128; --accent-b:255;
  --accent:rgb(var(--accent-r),var(--accent-g),var(--accent-b));
  --accent2:#6ba3ff;
  --accent3:#9dc2ff;
  --accent-dim:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.15);
  --accent-glow:rgba(var(--accent-r),var(--accent-g),var(--accent-b),.18);

  /* Status */
  --green:#8dffc4;
  --gold:#ffd16a;
  --red:#ff4d4d;
  --red2:#ff7b7b;
  --silver:#f2f4f8;
  --steel:#bcc4d2;

  /* Shadows & Glows */
  --shadow:0 24px 70px rgba(0,0,0,.55);
  --glow:0 0 40px var(--accent-glow);
  --glow-intense:0 0 60px rgba(var(--accent-r),var(--accent-g),var(--accent-b),.35),0 0 120px rgba(var(--accent-r),var(--accent-g),var(--accent-b),.15);

  /* Radius */
  --r-xl:30px;
  --r-lg:24px;
  --r-md:18px;
  --r-sm:12px;
  --r-xs:8px;

  /* Transitions */
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-bounce:cubic-bezier(.34,1.56,.64,1);
  --t-fast:.15s;
  --t-normal:.25s;
  --t-slow:.4s;

  /* Z-layers */
  --z-base:1;
  --z-nav:100;
  --z-modal:500;
  --z-toast:900;
  --z-overlay:1000;
}

/* --- Typography --- */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&family=Quantico:wght@400;700&display=swap');

body{
  font-family:'Open Sans',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:15px;
  font-weight:400;
  line-height:1.6;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3,h4,h5,h6,.font-display{
  font-family:'Quantico','Impact',sans-serif;
  font-weight:400;
  letter-spacing:.06em;
  line-height:1.1;
}

.text-xs{font-size:12px} .text-sm{font-size:13px} .text-base{font-size:15px}
.text-lg{font-size:18px} .text-xl{font-size:22px} .text-2xl{font-size:28px}
.text-3xl{font-size:36px} .text-4xl{font-size:48px} .text-5xl{font-size:64px}
.text-muted{color:var(--muted)} .text-dim{color:var(--dim)} .text-accent{color:var(--accent)}

/* --- Background --- */
body{
  background:var(--bg);
  min-height:100vh;
  overflow-x:hidden;
}
body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(circle at 18% 18%,rgba(var(--accent-r),var(--accent-g),var(--accent-b),.08),transparent 28%),
    radial-gradient(circle at 82% 16%,rgba(255,255,255,.02),transparent 22%),
    radial-gradient(circle at 50% 84%,rgba(var(--accent-r),var(--accent-g),var(--accent-b),.05),transparent 34%),
    linear-gradient(180deg,#0e0e0e 0%,var(--bg) 56%,#050505 100%);
  animation:bgShift 20s ease-in-out infinite;
}

/* --- Glassmorphism Panels --- */
.glass{
  background:var(--panel);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
}
.glass-strong{
  background:var(--panel2);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
}

/* --- Buttons --- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 28px;
  border-radius:var(--r-sm);
  font-weight:600;
  font-size:14px;
  letter-spacing:.03em;
  cursor:pointer;
  transition:all var(--t-normal) var(--ease);
  position:relative;
  overflow:hidden;
}
.btn-primary{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;
  box-shadow:0 4px 20px var(--accent-glow);
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 32px rgba(var(--accent-r),var(--accent-g),var(--accent-b),.35);
}
.btn-secondary{
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  color:var(--text);
}
.btn-secondary:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.15);
}
.btn-ghost{
  color:var(--muted);
  padding:8px 16px;
}
.btn-ghost:hover{color:var(--text)}

/* Neon sweep on buttons */
.btn-primary::after{
  content:'';
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);
  transform:translateX(-120%);
}
.btn-primary:hover::after{
  animation:neonSweep 1s ease;
}

/* --- Cards --- */
.card{
  background:var(--panel);
  backdrop-filter:blur(12px);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:24px;
  transition:all var(--t-normal) var(--ease);
}
.card:hover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,.12);
  box-shadow:0 20px 50px rgba(0,0,0,.35),0 0 28px var(--accent-glow);
}
.card-active{
  border-color:var(--accent) !important;
  box-shadow:0 0 0 1px var(--accent),var(--glow) !important;
}

/* --- Inputs --- */
.input{
  width:100%;
  padding:12px 16px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  border-radius:var(--r-xs);
  color:var(--text);
  font-size:14px;
  transition:border-color var(--t-fast);
  outline:none;
}
.input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-dim);
}
.input::placeholder{color:var(--dim)}

.label{
  display:block;
  font-size:13px;
  font-weight:500;
  color:var(--muted);
  margin-bottom:6px;
  letter-spacing:.02em;
}

/* --- Badges --- */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 12px;
  border-radius:20px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.03em;
}
.badge::before{
  content:'';
  width:6px;height:6px;
  border-radius:50%;
  animation:pulseDot 2.2s ease-in-out infinite;
}
.badge-green{background:rgba(141,255,196,.12);color:var(--green)}
.badge-green::before{background:var(--green)}
.badge-gold{background:rgba(255,209,106,.12);color:var(--gold)}
.badge-gold::before{background:var(--gold)}
.badge-red{background:rgba(255,77,77,.12);color:var(--red)}
.badge-red::before{background:var(--red)}
.badge-accent{background:var(--accent-dim);color:var(--accent)}
.badge-accent::before{background:var(--accent)}

/* --- Toggle Switch --- */
.toggle{
  position:relative;
  width:44px;height:24px;
  background:rgba(255,255,255,.10);
  border-radius:12px;
  cursor:pointer;
  transition:background var(--t-normal);
  flex-shrink:0;
}
.toggle.active{background:var(--accent)}
.toggle::after{
  content:'';
  position:absolute;
  top:3px;left:3px;
  width:18px;height:18px;
  background:#fff;
  border-radius:50%;
  transition:transform var(--t-normal) var(--ease-bounce);
  box-shadow:0 2px 6px rgba(0,0,0,.3);
}
.toggle.active::after{transform:translateX(20px)}

/* --- Scrollbar --- */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.20)}

/* --- Animations --- */
@keyframes bgShift{
  0%,100%{opacity:.8}
  50%{opacity:1}
}
@keyframes neonSweep{
  0%{transform:translateX(-120%)}
  100%{transform:translateX(120%)}
}
@keyframes pulseDot{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.35;transform:scale(.7)}
}
@keyframes fadeIn{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes slideInRight{
  from{opacity:0;transform:translateX(30px)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes slideInLeft{
  from{opacity:0;transform:translateX(-30px)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes scaleIn{
  from{opacity:0;transform:scale(.92)}
  to{opacity:1;transform:scale(1)}
}
@keyframes toastIn{
  from{opacity:0;transform:scale(.88) translateY(12px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}
@keyframes toastProgress{
  from{width:100%}
  to{width:0}
}
@keyframes spin{
  to{transform:rotate(360deg)}
}
@keyframes shimmer{
  0%{background-position:-200% 0}
  100%{background-position:200% 0}
}
@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}

/* --- Utility --- */
.flex{display:flex} .flex-col{flex-direction:column}
.items-center{align-items:center} .justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.gap-xs{gap:6px} .gap-sm{gap:10px} .gap-md{gap:16px} .gap-lg{gap:24px} .gap-xl{gap:32px}
.w-full{width:100%} .h-full{height:100%}
.relative{position:relative} .absolute{position:absolute}
.hidden{display:none !important}
.pointer{cursor:pointer}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grid{display:grid}