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

/* ===== Theme Variables ===== */
:root {
  /* Dark theme (default) */
  --bg: #0b0e13;
  --s1: #12161e;
  --s2: #181d28;
  --bd: #262d3d;
  --ac: #3b82f6;
  --acD: #1c3a5f;
  --gr: #22c55e;
  --yl: #eab308;
  --rd: #ef4444;
  --pr: #a78bfa;
  --or: #f97316;
  --gold: #f59e0b;
  --t1: #e8ecf4;
  --t2: #8696ad;
  --t3: #4a5a72;
  --scrollbar-track: #12161e;
  --scrollbar-thumb: #262d3d;
  --date-invert: 0.7;
}

:root[data-theme='light'] {
  --bg: #eef2f8;
  --s1: #ffffff;
  --s2: #e2e8f0;
  --bd: #cbd5e1;
  --ac: #1d4ed8;
  --acD: #1e3a8a;
  --gr: #15803d;
  --yl: #a16207;
  --rd: #b91c1c;
  --pr: #6d28d9;
  --or: #c2410c;
  --gold: #b45309;
  --t1: #0f172a;
  --t2: #334155;
  --t3: #64748b;
  --scrollbar-track: #e2e8f0;
  --scrollbar-thumb: #94a3b8;
  --date-invert: 0;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--t1);
  transition: background-color 0.6s cubic-bezier(0.4, 0, 0.2, 1), color 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }

input, select, textarea { outline: none; }

input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(var(--date-invert));
}

/* Theme transition overlay (circular reveal) */
.theme-transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.theme-transition-overlay.active {
  opacity: 1;
}

/* Smooth color transitions across all themed surfaces */
body, [class*="bg-"], [class*="text-"], [class*="border-"], aside, main, button, input, select, textarea {
  transition-property: background-color, color, border-color, fill, stroke;
  transition-duration: 0.4s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Slow down transition for interactive elements when hovering */
button:hover, a:hover {
  transition-duration: 0.15s;
}
