/* ==========================================================================
   DX STUDIOS — THEME
   Single source of truth for all colors, text, backgrounds, glass & mood.
   Edit ONLY this file to re-theme the entire site.
   60 — dominant surface (neutral/white) | 30 — green | 10 — red
   Dark is default. Light is alternate via [data-theme="light"].
   Never use deep blue/deep hues — only neutral variants + green/red.
   ========================================================================== */

/* Tailwind neutral palette reference
   neutral-50 #fafafa  100 #f5f5f5  200 #e5e5e5  300 #d4d4d4
   400 #a3a3a3  500 #737373  600 #525252  700 #404040
   800 #262626  900 #171717  950 #0a0a0a
*/

:root {
  /* ---- brand ---- */
  --white: #ffffff;
  --green-400: #4ade80;
  --green-500: #22c55e;
  --green-600: #16a34a;
  --green-700: #15803d;
  --red-400: #f87171;
  --red-500: #ef4444;
  --red-600: #dc2626;

  /* 60-30-10 applied as surfaces */
  --ratio-60: var(--white);
  --ratio-30: var(--green-600);
  --ratio-10: var(--red-500);

  /* ---- dark (DEFAULT) ---- */
  --bg: #0a0a0a;              /* neutral-950 — 60% dominant */
  --bg-soft: #171717;         /* neutral-900 */
  --bg-muted: #262626;        /* neutral-800 card */
  --bg-elevated: #1a1a1a;
  --surface: rgba(23,23,23,0.72); /* glass base */
  --surface-strong: rgba(38,38,38,0.85);
  --line: rgba(255,255,255,0.08);
  --line-strong: rgba(255,255,255,0.14);

  --text: #fafafa;            /* neutral-50 — lightest */
  --text-soft: #e5e5e5;        /* neutral-200 */
  --text-muted: #a3a3a3;       /* neutral-400 */
  --text-faint: #737373;       /* neutral-500 */

  --green: var(--green-500);
  --green-soft: rgba(34,197,94,0.12);
  --green-line: rgba(34,197,94,0.28);
  --red: var(--red-500);
  --red-soft: rgba(239,68,68,0.12);

  --radius: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --shadow-soft: 0 8px 32px rgba(0,0,0,0.45);
  --shadow-card: 0 14px 48px rgba(0,0,0,0.55);
}

[data-theme="light"] {
  --bg: #fafafa;
  --bg-soft: #f5f5f5;
  --bg-muted: #ffffff;
  --bg-elevated: #ffffff;
  --surface: rgba(255,255,255,0.72);
  --surface-strong: rgba(255,255,255,0.88);
  --line: rgba(23,23,23,0.08);
  --line-strong: rgba(23,23,23,0.14);

  --text: #171717;            /* neutral-900 — lightest on light? actually darkest */
  --text-soft: #262626;
  --text-muted: #737373;
  --text-faint: #a3a3a3;

  --green: var(--green-600);
  --green-soft: rgba(22,163,74,0.10);
  --green-line: rgba(22,163,74,0.22);
  --red: var(--red-600);

  --shadow-soft: 0 8px 32px rgba(0,0,0,0.08);
  --shadow-card: 0 14px 48px rgba(0,0,0,0.12);
}

/* ---- base ---- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { background: var(--bg); color: var(--text); }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  transition: background .35s, color .35s;
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--green); color: var(--white); }

/* ---- glass ---- */
.glass {
  background: var(--surface);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--line);
}
.glass-strong {
  background: var(--surface-strong);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  border: 1px solid var(--line-strong);
}
.glass-green {
  background: var(--green-soft);
  border: 1px solid var(--green-line);
  backdrop-filter: blur(14px);
}

/* ---- type scales — all text pulls from theme vars ---- */
h1,h2,h3 { color: var(--text); letter-spacing: -0.04em; line-height: 0.98; }
p, li, small { color: var(--text-soft); }
span:not(.word):not(.word *):not([class*="text-"]) { color: var(--text-soft); }
.word, .word * { color: inherit; }
.muted { color: var(--text-muted) !important; }
.faint { color: var(--text-faint) !important; }

/* ---- pixel accent ---- */
.pixel { font-family: 'Press Start 2P', monospace; letter-spacing: -0.02em; }
.pixel-grid {
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 32px 32px;
}
.dot-grid {
  background-image: radial-gradient(circle, var(--line) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* ---- buttons — 60/30/10 enforcement ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: var(--radius-pill);
  font-weight: 700; font-size: 0.92rem; letter-spacing: -0.01em;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .2s, color .2s, border-color .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-green { background: var(--green); color: var(--white); box-shadow: 0 8px 20px rgba(34,197,94,0.28); }
.btn-green:hover { background: var(--green-700); }
.btn-white { background: var(--text); color: var(--bg); } /* 60% white surfaces as CTA */
.btn-white:hover { background: var(--text-soft); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--surface); }
.btn-red { background: var(--red); color: var(--white); }
.btn-red:hover { filter: brightness(1.08); }

/* ---- container ---- */
.container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px){ .container{ padding: 0 16px; } }

/* ---- subtle scanline for game feel ---- */
.scanline::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.04;
  background: repeating-linear-gradient(0deg, transparent 0 2px, var(--text) 2px 3px);
  mix-blend-mode: overlay;
}