/* =====================================================================
   PlayX Shop — Design tokens (single source of truth).
   The admin editor (Phase 9) exposes a subset of these to the client.
   Refined in Phase 1 from the approved mockup using researched dark-UI technique.
   ===================================================================== */
:root {
  /* --- Dark scale: layered tonal elevation, deep charcoal (not pure black) --- */
  --bg:          #0A0A0C;   /* base canvas */
  --surface-1:   #101015;   /* sunken sections */
  --surface:     #16161C;   /* default card */
  --surface-2:   #1C1C24;   /* raised / hover */
  --surface-3:   #23232C;   /* popovers / highest */
  --border:      rgba(255,255,255,0.08);   /* hairline */
  --border-2:    rgba(255,255,255,0.14);   /* hover hairline */
  --lit-edge:    inset 0 1px 0 rgba(255,255,255,0.05);  /* top highlight on cards */

  /* --- Text: off-white primary (≈14:1 on --bg), never pure white --- */
  --text:        #ECECF2;   /* primary body */
  --text-muted:  #ABABBA;   /* secondary (≈6.4:1) */
  --text-dim:    #71717F;   /* tertiary / meta (≈3.2:1, non-essential only) */

  /* --- Neon accents (brand identity; vivid for small accents, glow for focal) --- */
  --neon-blue:    #22DBFF;
  --neon-green:   #34E27A;
  --neon-magenta: #FF3DA6;
  --neon-purple:  #A86BFF;
  --neon-yellow:  #FFD64A;

  /* --- Primary CTA gradient (magenta → purple) --- */
  --grad-primary: linear-gradient(135deg, #FF3DA6 0%, #A86BFF 100%);
  --grad-logo:    linear-gradient(90deg,#FF3DA6 0%,#FFD64A 28%,#34E27A 52%,#22DBFF 76%,#A86BFF 100%);

  /* --- Glow tokens (layered, restrained — focal elements only) --- */
  --glow-magenta: 0 0 24px -6px rgba(255,61,166,0.55);
  --glow-purple:  0 0 26px -6px rgba(168,107,255,0.45);
  --glow-blue:    0 0 22px -6px rgba(34,219,255,0.45);
  --shadow-card:  0 1px 2px rgba(0,0,0,0.4), 0 12px 28px -14px rgba(0,0,0,0.7);

  /* --- Radii (single family) --- */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* --- Spacing scale (8px base, 4px half-steps) --- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;
  --gap: var(--sp-4);
  --pad: var(--sp-5);

  /* --- Fluid type scale (clamp, ~1.25 modular; rem-based for a11y) --- */
  --fs-100: clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem);   /* meta / eyebrow */
  --fs-200: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);  /* small */
  --fs-300: 0.9375rem;                                    /* UI label */
  --fs-400: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);     /* body 16–17 */
  --fs-500: clamp(1.125rem, 1.07rem + 0.25vw, 1.25rem);   /* lead */
  --fs-600: clamp(1.35rem, 1.25rem + 0.5vw, 1.6rem);      /* h3 */
  --fs-700: clamp(1.7rem, 1.5rem + 1vw, 2.15rem);         /* h2 */
  --fs-800: clamp(2.1rem, 1.7rem + 1.9vw, 3rem);          /* section title */
  --fs-900: clamp(2.6rem, 1.9rem + 3.4vw, 4.6rem);        /* hero */

  /* --- Type families & weights --- */
  --font-display: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --font-body:    "DM Sans", system-ui, -apple-system, sans-serif;

  /* --- Motion tokens (gentle, purposeful) --- */
  --t-fast: 140ms;
  --t:      200ms;
  --t-slow: 320ms;
  --ease:     cubic-bezier(.4, 0, .2, 1);     /* standard */
  --ease-out: cubic-bezier(.2, .7, .2, 1);    /* decelerate (hover lifts) */

  /* --- Layout --- */
  --maxw: 1280px;
}