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

/* ===============================
   Root + Base
================================ */
html,
body {
  height: 100%;
  background-color: #0b0f14;
  color: #e6e8eb;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  line-height: 1.6;
}

/* ===============================
   Scrollbars
================================ */
* {
  scrollbar-width: thin;
  scrollbar-color: #2a3343 transparent;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-thumb {
  background-color: #2a3343;
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #364158;
}

/* ===============================
   Typography Helpers
================================ */
.text-muted {
  color: #9aa3b2;
}

.text-subtle {
  color: #7d8696;
}

/* ===============================
   Surface + Borders
================================ */
.bg-surface {
  background-color: #111722;
}

.bg-surfaceAlt {
  background-color: #0f141d;
}

.border-border {
  border-color: #1e2533;
}

/* ===============================
   Media / Card UX
================================ */
.media-hover {
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.media-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.55);
  border-color: #2b3446;
}

/* ===============================
   Buttons & Focus
================================ */
.focus-ring:focus-visible {
  outline: 2px solid #3ea6ff;
  outline-offset: 2px;
}

button,
a {
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

/* ===============================
   Subtle Dividers
================================ */
.hr-soft {
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    #1e2533,
    transparent
  );
}

/* ===============================
   Selection
================================ */
::selection {
  background-color: rgba(62, 166, 255, 0.25);
  color: #ffffff;
}