@tailwind base;
@tailwind components;
@tailwind utilities;

/* Theme tokens */
:root {
  --bg: 255 255 255;
  --surface: 248 250 252;
  --text: 17 24 39;
  --primary: 255 115 0;
  --accent: 14 165 233;
  --muted: 100 116 139;
}
.dark {
  --bg: 2 6 23;
  --surface: 15 23 42;
  --text: 241 245 249;
  --primary: 255 140 66;
  --accent: 56 189 248;
  --muted: 148 163 184;
}

@layer base {
  html { font-family: Inter, system-ui, ui-sans-serif, sans-serif; }
  body { @apply bg-[rgb(var(--bg))] text-[rgb(var(--text))] antialiased; }
}

@layer components {
  .card { @apply rounded-2xl bg-[rgb(var(--surface))]/80 backdrop-blur-xl shadow-lg; }
  /* Consistent glassmorphism card for light/dark */
  /* More transparent + stronger blur for true glass effect */
  .glass-card { @apply rounded-2xl backdrop-blur-2xl backdrop-saturate-150 shadow-xl border bg-white/25 dark:bg-white/5 border-white/30 dark:border-white/10; }
  /* Solid card (no transparency), uses theme surface */
  .solid-card { @apply rounded-2xl bg-[rgb(var(--surface))] shadow-xl border border-slate-200/70 dark:border-white/10; }
  .btn { @apply inline-flex items-center justify-center rounded-xl px-4 py-2 font-medium transition; }
  .btn-primary { @apply btn bg-[rgb(var(--primary))] text-white hover:brightness-110 active:brightness-90; }
  .input { @apply w-full rounded-xl border border-slate-200/60 bg-white/60 px-3 py-2 outline-none focus:ring-2 focus:ring-[rgb(var(--accent))]; }
}

/* micro animations used by alerts */
@keyframes shakeX { 
  0%,100%{transform:translateX(0)} 
  20%{transform:translateX(-2px)} 
  40%{transform:translateX(2px)} 
  60%{transform:translateX(-2px)} 
  80%{transform:translateX(2px)} 
}
.alert-anim { 
  animation: fadeIn .18s ease, shakeX .24s ease; 
}
@keyframes fadeIn { 
  from{opacity:0; transform:translateY(-2px)} 
  to{opacity:1; transform:translateY(0)} 
}