/* ===== variables.css ===== */
:root {
  /* ── BACKGROUNDS — deep layered darks ─────────────────────────── */
  --bg:  #070A12;
  --bg2: #0C0F1A;
  --bg3: #111525;
  --bg4: #171C2E;
  --bg5: #1D2238;

  /* ── BORDERS ────────────────────────────────────────────────────── */
  --bd:  rgba(255,255,255,0.055);
  --bd2: rgba(255,255,255,0.095);
  --bd3: rgba(255,255,255,0.15);

  /* ── GOLD — primary accent ──────────────────────────────────────── */
  --g:   #D4A843;
  --g2:  #F0C866;
  --g3:  #8C6A18;
  --gb:  rgba(212,168,67,0.10);
  --gb2: rgba(212,168,67,0.18);
  --gb3: rgba(212,168,67,0.05);

  /* ── SEMANTIC ───────────────────────────────────────────────────── */
  --ok:  #0FD47D; --okb: rgba(15,212,125,0.10); --okbd: rgba(15,212,125,0.25);
  --er:  #FF4D6A; --erb: rgba(255,77,106,0.10);  --erbd: rgba(255,77,106,0.25);
  --wa:  #FFAD1F; --wab: rgba(255,173,31,0.10);  --wabd: rgba(255,173,31,0.25);
  --in:  #7B7FF5; --inb: rgba(123,127,245,0.10); --inbd: rgba(123,127,245,0.25);
  --pu:  #B060F0; --pub: rgba(176,96,240,0.10);

  /* ── TEXT ───────────────────────────────────────────────────────── */
  --t1: #F0F3FF;
  --t2: #7E8BA8;
  --t3: #424E6A;
  --t4: #242D45;

  /* ── TYPOGRAPHY ─────────────────────────────────────────────────── */
  --ff: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif;
  --fm: 'SF Mono', 'JetBrains Mono', 'Fira Code', monospace;

  /* ── RADII ───────────────────────────────────────────────────────── */
  --r4:4px; --r6:6px; --r8:8px; --r10:10px;
  --r12:12px; --r14:14px; --r16:16px; --r20:20px; --r24:24px;

  /* ── SHADOWS ─────────────────────────────────────────────────────── */
  --sh:  0 2px 8px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.3);
  --sh2: 0 8px 32px rgba(0,0,0,0.65), 0 2px 8px rgba(0,0,0,0.4);
  --sh3: 0 20px 60px rgba(0,0,0,0.75), 0 4px 16px rgba(0,0,0,0.5);
  --gsh: 0 4px 20px rgba(212,168,67,0.22), 0 1px 4px rgba(212,168,67,0.12);

  /* ── LAYOUT ──────────────────────────────────────────────────────── */
  --topH: 60px;
  --botH: 68px;
  --sb:   env(safe-area-inset-bottom, 0px);
}

/* Light theme */
[data-theme="light"] {
  --bg:#F0F2FA; --bg2:#FFFFFF; --bg3:#E8EBF5; --bg4:#DDE0EE; --bg5:#D2D5E4;
  --bd:rgba(20,28,70,0.07); --bd2:rgba(20,28,70,0.12); --bd3:rgba(20,28,70,0.20);
  --t1:#0A0D1C; --t2:#3D4A6B; --t3:#7E8BA8; --t4:#B8BDCE;
  --g:#8A5F10; --g2:#B8840A; --g3:#6B480A;
  --gb:rgba(138,95,16,0.10); --gb2:rgba(138,95,16,0.16); --gb3:rgba(138,95,16,0.05);
  --sh:0 2px 8px rgba(0,0,0,0.07); --sh2:0 6px 24px rgba(0,0,0,0.10); --sh3:0 16px 48px rgba(0,0,0,0.14);
  --gsh:0 3px 14px rgba(138,95,16,0.16);
  --ok:#0A9A5B; --er:#D62E4A; --wa:#C07A00; --in:#5458D4;
}

/* ── Animations ──────────────────────────────────────────────────────── */
@keyframes fadeUp  { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn  { from{opacity:0} to{opacity:1} }
@keyframes slideUp { from{transform:translateY(100%)} to{transform:translateY(0)} }
@keyframes toastIn { from{transform:translateY(10px) scale(.94);opacity:0} to{transform:none;opacity:1} }
@keyframes spin    { to{transform:rotate(360deg)} }
@keyframes pulse   { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes bounce  { 0%,80%,100%{transform:scale(.55);opacity:.3} 40%{transform:scale(1);opacity:1} }
@keyframes glow    { 0%,100%{box-shadow:0 0 10px rgba(212,168,67,.25)} 50%{box-shadow:0 0 24px rgba(212,168,67,.55)} }
@keyframes shimmer { from{background-position:-200% 0} to{background-position:200% 0} }
@keyframes pop     { 0%{transform:scale(.94)} 60%{transform:scale(1.03)} 100%{transform:scale(1)} }
@keyframes ripple  { from{transform:scale(0);opacity:.4} to{transform:scale(2.5);opacity:0} }

/* ── Base reset ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { font-family:var(--ff); background:var(--bg); color:var(--t1); -webkit-font-smoothing:antialiased; }
body { margin:0; overflow-x:hidden; }
button { cursor:pointer; border:none; background:none; padding:0; font-family:var(--ff); }
input, textarea, select { font-family:var(--ff); }
a { color:inherit; text-decoration:none; }


/* ── Visibility utility ─────────────────────────────────── */
.hidden { display:none !important; }