/* ============================================================
   GamePay · Design Tokens
   Soft Cyber Editorial — dark base, single-accent neon, mono metadata
   ============================================================ */

:root {
  /* PALETTE — ACID (default) */
  --bg-0: #07070a;        /* deepest */
  --bg-1: #0c0d11;        /* page */
  --bg-2: #14161c;        /* card */
  --bg-3: #1c1f27;        /* hover/elevated */
  --bg-4: #262a34;        /* line/divider strong */
  --line: rgba(255,255,255,.07);
  --line-2: rgba(255,255,255,.12);

  --ink-1: #f4f5f0;       /* primary text */
  --ink-2: #c8cabd;       /* secondary */
  --ink-3: #8b8d80;       /* tertiary / mono */
  --ink-4: #4f5046;       /* muted */

  --acc: #c5ff3a;         /* signature neon */
  --acc-ink: #0a0c00;     /* text on acc */
  --acc-glow: 197 255 58; /* rgb triplet */

  --warn: #ffb547;
  --bad:  #ff5a6e;
  --good: #2dd4bf;

  /* Effects */
  --shadow-1: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px rgba(0,0,0,.5);
  --shadow-2: 0 1px 0 rgba(255,255,255,.06) inset, 0 24px 60px rgba(0,0,0,.6);
  --shadow-acc: 0 0 0 1px rgb(var(--acc-glow) / .25), 0 0 40px rgb(var(--acc-glow) / .15);

  /* Type — set on body via JS-tweakable variables */
  --font-display: "Big Shoulders Display", "Saira Condensed", "Bebas Neue", "Anton", "Noto Sans SC", sans-serif;
  --font-body: "Space Grotesk", "Noto Sans SC", system-ui, sans-serif;
  --font-zh: "Noto Sans SC", "Space Grotesk", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* Radii */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 14px;
  --r-4: 22px;
  --r-pill: 999px;

  /* Spacing scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* Motion */
  --ease: cubic-bezier(.2,.8,.2,1);
  --ease-snap: cubic-bezier(.5,1.6,.4,1);
  --t-fast: 120ms;
  --t-base: 220ms;
  --t-slow: 420ms;

  /* Layout */
  --container: 1320px;
  --header-h: 64px;
  --rail: 56px;
}

/* ───── PALETTES ───── */
[data-palette="acid"] {
  --acc: #c5ff3a; --acc-ink: #0a0c00; --acc-glow: 197 255 58;
}
[data-palette="magenta"] {
  --bg-0: #08060c; --bg-1: #0e0a14; --bg-2: #18121f; --bg-3: #221a2c; --bg-4: #2c2238;
  --acc: #ff2bd6; --acc-ink: #1a0014; --acc-glow: 255 43 214;
}
[data-palette="plasma"] {
  --bg-0: #04060a; --bg-1: #080c14; --bg-2: #0f1420; --bg-3: #161e2e; --bg-4: #1d2740;
  --acc: #4cd0ff; --acc-ink: #001220; --acc-glow: 76 208 255;
}
[data-palette="infrared"] {
  --bg-0: #08060a; --bg-1: #0d0a0d; --bg-2: #15101a; --bg-3: #1d1620; --bg-4: #261d28;
  --acc: #ff5a3a; --acc-ink: #150400; --acc-glow: 255 90 58;
}
[data-palette="mono"] {
  --bg-0: #050505; --bg-1: #0a0a0a; --bg-2: #131313; --bg-3: #1c1c1c; --bg-4: #262626;
  --acc: #ffe600; --acc-ink: #0a0900; --acc-glow: 255 230 0;
}

/* ───── LIGHT MODE ───── */
[data-theme="light"] {
  --bg-0: #f3f3ee;
  --bg-1: #f8f8f3;
  --bg-2: #ffffff;
  --bg-3: #f0f0e8;
  --bg-4: #e3e3d8;
  --line: rgba(0,0,0,.07);
  --line-2: rgba(0,0,0,.14);
  --ink-1: #0c0d11;
  --ink-2: #2d2e2a;
  --ink-3: #5d5f55;
  --ink-4: #95968a;
  --shadow-1: 0 1px 0 rgba(255,255,255,.6) inset, 0 6px 18px rgba(0,0,0,.06);
  --shadow-2: 0 1px 0 rgba(255,255,255,.6) inset, 0 18px 40px rgba(0,0,0,.08);
}
[data-theme="light"][data-palette="acid"]    { --acc: #4d7a00; --acc-ink: #f4ffd8; }
[data-theme="light"][data-palette="magenta"] { --acc: #c500a0; --acc-ink: #fff0fb; }
[data-theme="light"][data-palette="plasma"]  { --acc: #006fa5; --acc-ink: #e6f7ff; }
[data-theme="light"][data-palette="infrared"]{ --acc: #cc3a14; --acc-ink: #fff0ec; }
[data-theme="light"][data-palette="mono"]    { --acc: #1a1a1a; --acc-ink: #ffe600; }

/* ───── MOTION INTENSITY ───── */
[data-motion="off"] *, [data-motion="off"] *::before, [data-motion="off"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}
[data-motion="lite"] {
  --t-base: 140ms; --t-slow: 240ms;
}

/* ───── DENSITY ───── */
[data-density="compact"] {
  --s-3: 8px; --s-4: 12px; --s-5: 18px; --s-6: 24px; --s-7: 36px;
}
[data-density="comfy"] {
  --s-3: 16px; --s-4: 20px; --s-5: 28px; --s-6: 40px; --s-7: 56px;
}