/* =========================================================
   NTX Pinball — TOKENS + THEMES (ntx-tokens.css)
   - ONLY variables + theme overrides
========================================================= */

/* =========================
   1) THEME TOKENS
========================= */
:root{
  /* Single source of truth for the "gap" between fixed chrome and page content */
  --ntx-page-gap:10px; /* EXACT gap under header and above footer */

  --ntx-ui-border:var(--ntx-border);
  --ntx-ui-muted:color-mix(in srgb, var(--ntx-text) 82%, transparent);
  --ntx-ui-text:var(--ntx-text);
  --ntx-popover-bg:var(--ntx-bg);
  --ntx-header-bg:var(--ntx-bg);

  --ntx-safe-bottom:env(safe-area-inset-bottom, 0px);
  --ntx-safe-top:env(safe-area-inset-top, 0px);

  /* IMPORTANT: body reserves space for fixed header/footer + EXACT gap */
  --ntx-body-pad-top:calc(var(--ntx-header-h, 165px) + var(--ntx-page-gap));
  --ntx-body-pad-bottom:calc(var(--ntx-footer-h, 160px) + var(--ntx-page-gap));

  /* Font families */
  --ntx-font-body: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --ntx-font-display: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;

  /* Radii */
  --ntx-radius:20px;
  --ntx-radius-sm:14px;
  --ntx-btn-radius:999px;

  /* Focus ring */
  --ntx-focus:0 0 0 4px color-mix(in srgb, var(--ntx-accent) 40%, transparent);

  /* Default pattern variables (themes override) */
  --ntx-body-bg:#0b0d12;
  --ntx-body-bg-grad:linear-gradient(180deg, #0b0d12 0%, #050608 100%);
  --ntx-body-bg-pattern:
    repeating-linear-gradient(45deg, rgba(255,255,255,.050) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.035) 0 1px, transparent 1px 22px);
  --ntx-body-bg-pattern-opacity:.35;

  /* Base surfaces */
  --ntx-bg:#0b0d12;
  --ntx-surface:rgba(8,10,14,.92);
  --ntx-surface-2:rgba(20,24,30,.92);

  /* Text */
  --ntx-text:#e9eef7;
  --ntx-heading:#ffffff;
  --ntx-muted:rgba(233,238,247,.72);
  --ntx-muted-strong:rgba(233,238,247,.88);

  /* Borders/shadows */
  --ntx-border:rgba(255,255,255,.14);
  --ntx-shadow:0 18px 55px rgba(0,0,0,.40);

  /* Accent system */
  --ntx-accent:#23A1DA;
  --ntx-accent-2:#F2E931;
  --ntx-accent-a:#23A1DA;
  --ntx-accent-b:#F2E931;
  --ntx-accent-grad:linear-gradient(90deg, var(--ntx-accent-a), var(--ntx-accent-b));

  /* Buttons (theme picker previews + gradients) */
  --ntx-btn-left:#23A1DA;
  --ntx-btn-right:#F24BB1;
  --ntx-btn-mid:color-mix(in srgb, var(--ntx-btn-left) 52%, var(--ntx-btn-right) 48%);
  --ntx-on-primary:#07101B;
  --ntx-on-secondary:#07101B;
  --ntx-on-tertiary:#07101B;

  /* Button shadows */
  --ntx-btn-shadow:0 12px 22px rgba(0,0,0,.24);
  --ntx-btn-shadow-hover:0 14px 26px rgba(0,0,0,.30);
  --ntx-btn-shadow-press:0 10px 18px rgba(0,0,0,.24);

  /* Nav menu */
  --ntx-navmenu-bg:rgba(10,12,18,.96);
  --ntx-navmenu-border:rgba(255,255,255,.14);
  --ntx-navmenu-item:var(--ntx-text);
  --ntx-navmenu-item-hover-bg:color-mix(in srgb, var(--ntx-accent) 18%, transparent);
  --ntx-navmenu-item-hover-text:var(--ntx-text);
  --ntx-navmenu-item-press:inset 0 2px 0 rgba(255,255,255,.06), inset 0 -12px 20px rgba(0,0,0,.28);

  /* Panel + card surfaces */
  --ntx-panel-surface:var(--ntx-surface);
  --ntx-panel-top-grad:var(--ntx-accent-grad);
  --ntx-card-surface:var(--ntx-surface-2);
  --ntx-card-outline:var(--ntx-border);

  /* Card stage (inside panels) */
  --ntx-cardstage-bg:rgba(255,255,255,.03);
  --ntx-cardstage-border:rgba(255,255,255,.10);

  /* Tables */
  --ntx-table-head-grad:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  --ntx-table-row-bg:rgba(255,255,255,.02);
  --ntx-table-row-bg-alt:rgba(255,255,255,.03);
  --ntx-table-row-hover:rgba(255,255,255,.06);

  /* Stat cards */
  --ntx-stat-border:rgba(255,255,255,.16);
  --ntx-stat-label:rgba(255,255,255,.86);
  --ntx-stat-hint:rgba(255,255,255,.72);
  --ntx-stat-shadow:0 16px 32px rgba(0,0,0,.22);
  --ntx-stat-shadow-hover:0 18px 40px rgba(0,0,0,.28);

  --ntx-stat-bg-1:linear-gradient(180deg, rgba(35,161,218,.24), rgba(0,0,0,.0));
  --ntx-stat-bg-2:linear-gradient(180deg, rgba(242,233,49,.22), rgba(0,0,0,.0));
  --ntx-stat-bg-3:linear-gradient(180deg, rgba(242,75,177,.20), rgba(0,0,0,.0));
  --ntx-stat-bg-4:linear-gradient(180deg, rgba(0,255,214,.18), rgba(0,0,0,.0));

  /* Inputs */
  --ntx-input-bg:rgba(255,255,255,.08);
  --ntx-input-border:rgba(255,255,255,.16);
  --ntx-input-focus:var(--ntx-focus);

  /* Links */
  --ntx-link:color-mix(in srgb, var(--ntx-accent) 84%, #fff 16%);
  --ntx-link-hover:color-mix(in srgb, var(--ntx-accent) 92%, #fff 8%);
}

/* =========================
   2) THEME: LIGHT
========================= */
html[data-theme="light"]{
  /* Background */
  --ntx-body-bg:#f7fbff;
  --ntx-body-bg-grad:linear-gradient(180deg, #f7fbff 0%, #eaf4ff 100%);
  --ntx-body-bg-pattern:
    repeating-linear-gradient(0deg, rgba(11,94,215,.050) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(11,94,215,.050) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(45deg, rgba(11,94,215,.045) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(-45deg, rgba(11,94,215,.035) 0 1px, transparent 1px 22px);
  --ntx-body-bg-pattern-opacity:.55;

  /* Surfaces */
  --ntx-bg:#ffffff;
  --ntx-surface:rgba(255,255,255,.92);
  --ntx-surface-2:rgba(247,250,255,.92);

  /* Text */
  --ntx-text:#0b1020;
  --ntx-heading:#0b1020;
  --ntx-muted:rgba(11,16,32,.70);
  --ntx-muted-strong:rgba(11,16,32,.86);

  /* Borders/shadows */
  --ntx-border:rgba(2,10,28,.14);
  --ntx-shadow:0 16px 44px rgba(2,10,28,.10);

  /* Accent system (blue) */
  --ntx-accent:#0b5ed7;
  --ntx-accent-2:#22b3ff;
  --ntx-accent-a:#22b3ff;
  --ntx-accent-b:#0b1f5b;
  --ntx-accent-grad:linear-gradient(90deg, var(--ntx-accent-a), var(--ntx-accent-b));

  /* Buttons (theme picker previews) */
  --ntx-btn-left:#22b3ff;
  --ntx-btn-right:#0b1f5b;
  --ntx-btn-mid:color-mix(in srgb, var(--ntx-btn-left) 58%, var(--ntx-btn-right) 42%);

  --ntx-on-primary:#ffffff;
  --ntx-on-secondary:#ffffff;
  --ntx-on-tertiary:#0b5ed7;

  /* Nav menu */
  --ntx-navmenu-bg:rgba(255,255,255,.96);
  --ntx-navmenu-border:rgba(2,10,28,.12);
  --ntx-navmenu-item:rgba(11,16,32,.92);
  --ntx-navmenu-item-hover-bg:rgba(11,94,215,.10);
  --ntx-navmenu-item-hover-text:#0b1020;

  /* Card stage */
  --ntx-cardstage-bg:rgba(11,94,215,.06);
  --ntx-cardstage-border:rgba(11,94,215,.18);

  /* Tables */
  --ntx-table-head-grad:linear-gradient(180deg, rgba(11,94,215,.10), rgba(11,94,215,.04));
  --ntx-table-row-bg:rgba(11,94,215,.02);
  --ntx-table-row-bg-alt:rgba(11,94,215,.03);
  --ntx-table-row-hover:rgba(11,94,215,.06);

  /* Inputs */
  --ntx-input-bg:rgba(11,94,215,.06);
  --ntx-input-border:rgba(11,94,215,.18);

  /* Links */
  --ntx-link:#0b5ed7;
  --ntx-link-hover:#0a52bf;
}

/* =========================
   3) THEME: MIN (fixed + cross-hatch)
========================= */
html[data-theme="min"]{
  /* Minimal grayscale theme (valid CSS) */
  --ntx-body-bg:#0b0d12;
  --ntx-body-bg-grad:linear-gradient(180deg, #0b0d12 0%, #050608 100%);
  --ntx-body-bg-pattern:
    repeating-linear-gradient(45deg, rgba(255,255,255,.060) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.045) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.040) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.040) 0 1px, transparent 1px 34px);
  --ntx-body-bg-pattern-opacity:.55;

  --ntx-bg:#0b0d12;
  --ntx-surface:rgba(0,0,0,.94);
  --ntx-surface-2:rgba(18,18,18,.94);

  --ntx-panel-surface:var(--ntx-surface);
  --ntx-card-surface:var(--ntx-surface-2);
  --ntx-cardstage-bg:rgba(255,255,255,.04);
  --ntx-cardstage-border:rgba(255,255,255,.14);

  --ntx-text:#ffffff;
  --ntx-heading:#ffffff;
  --ntx-muted:rgba(255,255,255,.72);
  --ntx-muted-strong:rgba(255,255,255,.90);

  --ntx-border:rgba(255,255,255,.18);
  --ntx-card-outline:rgba(255,255,255,.18);

  --ntx-shadow:0 18px 55px rgba(0,0,0,.55);
  --ntx-btn-shadow:0 12px 22px rgba(0,0,0,.55);
  --ntx-btn-shadow-hover:0 14px 26px rgba(0,0,0,.62);
  --ntx-btn-shadow-press:0 10px 18px rgba(0,0,0,.55);

  --ntx-accent:#ffffff;
  --ntx-accent-2:#ffffff;
  --ntx-accent-a:#e5e5e5;
  --ntx-accent-b:#6b7280;
  --ntx-accent-grad:linear-gradient(90deg, var(--ntx-accent-a), var(--ntx-accent-b));

  --ntx-link:#ffffff;
  --ntx-link-hover:#ffffff;

  /* Theme selector preview */
  --ntx-btn-left:#0b0d12;
  --ntx-btn-right:#4b5563;
  --ntx-btn-mid:color-mix(in srgb, var(--ntx-btn-left) 55%, var(--ntx-btn-right) 45%);

  --ntx-on-primary:#ffffff;
  --ntx-on-secondary:#ffffff;
  --ntx-on-tertiary:#ffffff;

  --ntx-navmenu-bg:rgba(0,0,0,.94);
  --ntx-navmenu-border:rgba(255,255,255,.12);
  --ntx-navmenu-item:#ffffff;
  --ntx-navmenu-item-hover-bg:rgba(255,255,255,.10);
  --ntx-navmenu-item-hover-text:#ffffff;

  --ntx-panel-top-grad:var(--ntx-accent-grad);
}

/* =========================
   4) THEME: PIXEL PLUNGE
========================= */
html[data-theme="pixel-plunge"]{
  --ntx-body-bg:#0a0a12;
  --ntx-body-bg-grad:radial-gradient(1200px 800px at 20% 0%, rgba(255,81,189,.22), transparent 55%),
                      radial-gradient(1100px 780px at 90% 20%, rgba(0,255,214,.20), transparent 55%),
                      linear-gradient(180deg, #0b0d12 0%, #050608 100%);
  --ntx-body-bg-pattern:
    repeating-linear-gradient(45deg, rgba(255,81,189,.08) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(-45deg, rgba(0,255,214,.06) 0 1px, transparent 1px 22px);
  --ntx-body-bg-pattern-opacity:.40;

  --ntx-accent:#ff51bd;
  --ntx-accent-2:#00ffd6;
  --ntx-accent-a:#ff51bd;
  --ntx-accent-b:#00ffd6;

  --ntx-btn-left:#ff51bd;
  --ntx-btn-right:#00ffd6;

  --ntx-link:color-mix(in srgb, #ff51bd 78%, #fff 22%);
  --ntx-link-hover:color-mix(in srgb, #00ffd6 78%, #fff 22%);
}

/* =========================
   5) THEME: VAPORWAVE BACKBOX
========================= */
html[data-theme="vaporwave-backbox"]{
  --ntx-body-bg:#070815;
  --ntx-body-bg-grad:radial-gradient(1200px 800px at 25% 0%, rgba(155,92,255,.22), transparent 55%),
                      radial-gradient(1100px 780px at 85% 18%, rgba(255,75,177,.18), transparent 55%),
                      linear-gradient(180deg, #090a18 0%, #04050a 100%);
  --ntx-body-bg-pattern:
    repeating-linear-gradient(45deg, rgba(155,92,255,.06) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(-45deg, rgba(255,75,177,.05) 0 1px, transparent 1px 24px);
  --ntx-body-bg-pattern-opacity:.36;

  --ntx-accent:#9b5cff;
  --ntx-accent-2:#ff4bb1;
  --ntx-accent-a:#9b5cff;
  --ntx-accent-b:#ff4bb1;

  --ntx-btn-left:#9b5cff;
  --ntx-btn-right:#ff4bb1;
}

/* =========================
   6) THEME: MINT MADNESS
========================= */
html[data-theme="mint-madness"]{
  --ntx-body-bg:#04110d;
  --ntx-body-bg-grad:radial-gradient(1200px 800px at 25% 0%, rgba(77,255,193,.18), transparent 55%),
                      radial-gradient(1100px 780px at 85% 18%, rgba(37,161,218,.16), transparent 55%),
                      linear-gradient(180deg, #04110d 0%, #020806 100%);
  --ntx-body-bg-pattern:
    repeating-linear-gradient(45deg, rgba(77,255,193,.06) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(-45deg, rgba(37,161,218,.05) 0 1px, transparent 1px 26px);
  --ntx-body-bg-pattern-opacity:.34;

  --ntx-accent:#4dffc1;
  --ntx-accent-2:#23A1DA;
  --ntx-accent-a:#4dffc1;
  --ntx-accent-b:#23A1DA;

  --ntx-btn-left:#4dffc1;
  --ntx-btn-right:#23A1DA;
}

/* =========================
   7) THEME: CITRUS BLAST
========================= */
html[data-theme="citrus-blast"]{
  --ntx-body-bg:#0d0c05;
  --ntx-body-bg-grad:radial-gradient(1200px 800px at 20% 0%, rgba(242,233,49,.18), transparent 55%),
                      radial-gradient(1100px 780px at 85% 20%, rgba(255,106,0,.14), transparent 55%),
                      linear-gradient(180deg, #0d0c05 0%, #050402 100%);
  --ntx-body-bg-pattern:
    repeating-linear-gradient(45deg, rgba(242,233,49,.06) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(-45deg, rgba(255,106,0,.05) 0 1px, transparent 1px 26px);
  --ntx-body-bg-pattern-opacity:.34;

  --ntx-accent:#F2E931;
  --ntx-accent-2:#ff6a00;
  --ntx-accent-a:#F2E931;
  --ntx-accent-b:#ff6a00;

  --ntx-btn-left:#F2E931;
  --ntx-btn-right:#ff6a00;
}

/* =========================
   8) THEME: COSMIC JACKPOT
========================= */
html[data-theme="cosmic-jackpot"]{
  --ntx-body-bg:#050611;
  --ntx-body-bg-grad:radial-gradient(1200px 800px at 18% 0%, rgba(59,130,246,.18), transparent 55%),
                      radial-gradient(1100px 780px at 88% 18%, rgba(242,75,177,.14), transparent 55%),
                      linear-gradient(180deg, #07081a 0%, #03040a 100%);
  --ntx-body-bg-pattern:
    repeating-linear-gradient(45deg, rgba(59,130,246,.06) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(-45deg, rgba(242,75,177,.05) 0 1px, transparent 1px 26px);
  --ntx-body-bg-pattern-opacity:.34;

  --ntx-accent:#3b82f6;
  --ntx-accent-2:#ff4bb1;
  --ntx-accent-a:#3b82f6;
  --ntx-accent-b:#ff4bb1;

  --ntx-btn-left:#3b82f6;
  --ntx-btn-right:#ff4bb1;
}

/* =========================
   9) THEME: NEON NOIR
========================= */
html[data-theme="neon-noir"]{
  --ntx-body-bg:#02070a;
  --ntx-body-bg-grad:radial-gradient(1200px 800px at 18% 0%, rgba(0,245,255,.20), transparent 55%),
                      radial-gradient(1100px 780px at 88% 18%, rgba(182,255,0,.16), transparent 55%),
                      linear-gradient(180deg, #02070a 0%, #010305 100%);
  --ntx-body-bg-pattern:
    repeating-linear-gradient(45deg, rgba(0,245,255,.06) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(-45deg, rgba(182,255,0,.05) 0 1px, transparent 1px 24px);
  --ntx-body-bg-pattern-opacity:.36;

  --ntx-accent:#00f5ff;
  --ntx-accent-2:#b6ff00;
  --ntx-accent-a:#00f5ff;
  --ntx-accent-b:#b6ff00;

  --ntx-btn-left:#00f5ff;
  --ntx-btn-right:#b6ff00;
}

/* =========================
   10) THEME: ARCADE SUNSET
========================= */
html[data-theme="arcade-sunset"]{
  --ntx-body-bg:#100508;
  --ntx-body-bg-grad:radial-gradient(1200px 800px at 20% 0%, rgba(255,106,0,.20), transparent 55%),
                      radial-gradient(1100px 780px at 88% 20%, rgba(255,43,214,.16), transparent 55%),
                      linear-gradient(180deg, #110509 0%, #060204 100%);
  --ntx-body-bg-pattern:
    repeating-linear-gradient(45deg, rgba(255,106,0,.06) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(-45deg, rgba(255,43,214,.05) 0 1px, transparent 1px 24px);
  --ntx-body-bg-pattern-opacity:.36;

  --ntx-accent:#ff6a00;
  --ntx-accent-2:#ff2bd6;
  --ntx-accent-a:#ff6a00;
  --ntx-accent-b:#ff2bd6;

  --ntx-btn-left:#ff6a00;
  --ntx-btn-right:#ff2bd6;
}

/* =========================
   11) THEME: ICE ROYALE
========================= */
html[data-theme="ice-royale"]{
  --ntx-body-bg:#020814;
  --ntx-body-bg-grad:radial-gradient(1200px 800px at 18% 0%, rgba(59,130,246,.18), transparent 55%),
                      radial-gradient(1100px 780px at 88% 18%, rgba(154,230,255,.14), transparent 55%),
                      linear-gradient(180deg, #020814 0%, #01040b 100%);
  --ntx-body-bg-pattern:
    repeating-linear-gradient(45deg, rgba(59,130,246,.05) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(-45deg, rgba(154,230,255,.04) 0 1px, transparent 1px 26px);
  --ntx-body-bg-pattern-opacity:.34;

  --ntx-accent:#3b82f6;
  --ntx-accent-2:#9ae6ff;
  --ntx-accent-a:#3b82f6;
  --ntx-accent-b:#9ae6ff;

  --ntx-btn-left:#3b82f6;
  --ntx-btn-right:#9ae6ff;
}

/* =========================
   12) THEME: CANDY CABINET
========================= */
html[data-theme="candy-cabinet"]{
  /* (existing content unchanged — left as-is) */
  --ntx-body-bg:#0e0710;
  --ntx-body-bg-grad:radial-gradient(1200px 800px at 18% 0%, rgba(255,79,216,.20), transparent 55%),
                      radial-gradient(1100px 780px at 88% 18%, rgba(255,213,74,.16), transparent 55%),
                      linear-gradient(180deg, #0e0710 0%, #050206 100%);
  --ntx-body-bg-pattern:
    repeating-linear-gradient(45deg, rgba(255,79,216,.06) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(-45deg, rgba(255,213,74,.05) 0 1px, transparent 1px 24px);
  --ntx-body-bg-pattern-opacity:.36;

  --ntx-accent:#ff4fd8;
  --ntx-accent-2:#ffd54a;
  --ntx-accent-a:#ff4fd8;
  --ntx-accent-b:#ffd54a;

  --ntx-btn-left:#ff4fd8;
  --ntx-btn-right:#ffd54a;
}