/* ============================================================
   WEAR6ixMEN - base.css
   Shared design system. Loaded by EVERY page before its own
   stylesheet. Holds the design tokens, reset, shared body
   defaults, and the film-grain overlay. Page-specific rules
   live in each page's own file (home.css, shop.css, ...).
   ============================================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --deep:   #05090f;
  --navy:   #0b1628;
  --mid:    #122040;
  --silver: #b8c8dc;
  --white:  #eef2f8;
  --blue:   #2563eb;
  --fd: 'Barlow Condensed', sans-serif;
  --fb: 'Barlow', sans-serif;
}

body {
  background: var(--deep);
  color: var(--white);
  font-family: var(--fb);
  font-weight: 300;
}

/* GRAIN - animated film-grain overlay (every page) */
.grain {
  position: fixed; inset: -50%; width: 200%; height: 200%;
  pointer-events: none; z-index: 1; opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .4s steps(1) infinite;
}
@keyframes grain {
  0%,100%{transform:translate(0,0)} 10%{transform:translate(-2%,-3%)} 20%{transform:translate(3%,2%)}
  30%{transform:translate(-1%,3%)} 40%{transform:translate(3%,-1%)} 50%{transform:translate(-3%,2%)}
  60%{transform:translate(1%,-3%)} 70%{transform:translate(-2%,1%)} 80%{transform:translate(2%,3%)} 90%{transform:translate(-3%,-1%)}
}