/* ═══════════════════════════════════════════════════════════════
   base.css  —  CCSHOP shared foundation
   Import in every page:
     <link rel="stylesheet" href="/shop/css/base.css">
   ═══════════════════════════════════════════════════════════════ */

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

/* ── CSS Variables (single source of truth) ─────────────────── */
:root{
  /* Brand colours */
  --purple:#7C3AED;--purple-light:#A78BFA;--purple-dim:rgba(124,58,237,0.12);
  --blue:#2563EB;--blue-light:#60A5FA;
  --red:#E11D48;--red-light:#FB7185;--red-dim:rgba(225,29,72,0.12);
  --orange:#EA580C;--orange-light:#FB923C;--orange-dim:rgba(234,88,12,0.12);
  --green-light:#4ADE80;--green-dim:rgba(22,163,74,0.1);

  /* Backgrounds */
  --bg:#03020A;--bg2:#07050F;--bg3:#0D0B1A;--bg4:#130F26;
  --surface:rgba(124,58,237,0.08);

  /* Borders */
  --border:rgba(124,58,237,0.25);--border2:rgba(255,255,255,0.07);

  /* Text */
  --text:#F5F0FF;--text2:#CCC4E8;--muted:#7A6F9A;

  /* Glows */
  --glow-purple:0 0 30px rgba(124,58,237,0.6),0 0 80px rgba(124,58,237,0.25),0 0 120px rgba(124,58,237,0.1);
  --glow-red:0 0 30px rgba(225,29,72,0.6),0 0 80px rgba(225,29,72,0.25),0 0 120px rgba(225,29,72,0.1);
  --glow-orange:0 0 30px rgba(234,88,12,0.6),0 0 80px rgba(234,88,12,0.25);

  /* Spacing / radius */
  --radius:12px;--radius-sm:6px;

  /* Easing */
  --ease-out-expo:cubic-bezier(0.16,1,0.3,1);
  --ease-in-out:cubic-bezier(0.4,0,0.2,1);

  /* Theme accent (overrideable) */
  --accent:#7C3AED;--accent-light:#A78BFA;--accent-dim:rgba(124,58,237,0.12);
  --accent2:#E11D48;--accent2-light:#FB7185;
}

/* ── Base body ──────────────────────────────────────────────── */
html{scroll-behavior:auto;-webkit-font-smoothing:antialiased}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
  min-height:100vh;
}

/* ── Scanlines overlay ──────────────────────────────────────── */
body::before{
  content:'';position:fixed;inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.06) 2px,rgba(0,0,0,0.06) 3px);
  pointer-events:none;z-index:9990;
}

/* ── Noise texture overlay ──────────────────────────────────── */
body::after{
  content:'';position:fixed;inset:0;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events:none;z-index:9989;
}

/* ── Grid background ────────────────────────────────────────── */
.grid-bg{
  position:fixed;inset:0;
  background-image:
    linear-gradient(rgba(124,58,237,0.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(124,58,237,0.06) 1px,transparent 1px);
  background-size:48px 48px;
  pointer-events:none;z-index:0;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,black 40%,transparent 100%);
}

/* ── Common typography helpers ──────────────────────────────── */
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}