/* ═══════════════════════════════════════════════
   TALI · VARIABLES & RESET
═══════════════════════════════════════════════ */
:root {
  --bg:        #f0f2f5;
  --surface:   #ffffff;
  --surface2:  #e8ecf2;
  --border:    #d0d5e0;
  --border2:   #c4cad8;
  --white:     #111118;
  --gray:      #666680;
  --gray2:     #888899;
  --green:     #22c55e;
  --yellow:    #f59e0b;
  --orange:    #ff8c00;
  --cyan:      #00d4ff;
  --pink:      #ff6eb4;
  --accent:    #22c55e;
  --radius:    14px;
  --radius-sm: 10px;
  --radius-lg: 20px;
  --shadow:    0 4px 24px rgba(0,0,0,.5);
  --shadow-sm: 0 2px 12px rgba(0,0,0,.4);
  --app-h: 100vh;
  --app-h: 100dvh;
}

/* Dark mode */
body.dark {
  --bg:       #050508;
  --surface:  #0f0f18;
  --surface2: #1a1a28;
  --border:   #2a2a40;
  --border2:  #3a3a55;
  --white:    #f5f5ff;
  --gray:     #7a7a9a;
  --gray2:    #aaaacc;
}

*,*::before,*::after {
  box-sizing: border-box;
  margin: 0; padding: 0;
  -webkit-tap-highlight-color: transparent;
}
html { height: 100%; overflow: hidden; }
body {
  height: var(--app-h);
  overflow: hidden;
  background: var(--bg);
  color: var(--white);
  font-family: 'DM Sans', sans-serif;
  transition: background .3s, color .3s;
  -webkit-font-smoothing: antialiased;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes popIn {
  from { opacity: 0; transform: scale(.5); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes ldot {
  0%,80%,100% { transform: scale(.4); opacity: .3; }
  40%          { transform: scale(1);  opacity: 1;  }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}