@import './tokens.css';
@import './components/buttons.css';
@import './components/forms.css';
@import './components/badges.css';
@import './components/tables.css';
@import './components/modals.css';
@import './components/layout.css';
@import './components/animations.css';
@import './components/overview.css';

/* Geom font via Fontsource CDN (geometric sans for headings, conveying precision) */
@import url('https://cdn.jsdelivr.net/npm/@fontsource/geom@5/latin-400.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/geom@5/latin-600.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/geom@5/latin-700.css');

/* Global Base Reset & Typography */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  font-family: var(--font-sans);
  background-color: var(--bg-canvas);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text-primary);
  font-weight: 600;
  line-height: 1.25;
}

h1 {
  font-size: 1.5rem;
  font-weight: 700;
  font-family: var(--font-display);
}

h2 {
  font-size: 1.25rem;
  font-family: var(--font-display);
}

h3 {
  font-size: 1.0rem;
}

p {
  color: var(--text-secondary);
}

a {
  color: var(--brand-primary);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--brand-primary-hover);
  text-decoration: underline;
}

code,
.font-mono {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background-color: var(--bg-surface-subtle);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}

:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

/* ==========================================================================
   Ultra-Minimal Floating Pill Scrollbar System (Linear / macOS Aesthetic)
   ========================================================================== */

/* Standard smooth scroll & thin scrollbar for modern browsers */
html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(62, 104, 164, 0.3) transparent;
}

/* Global Floating Scrollbar Track */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

/* Floating Pill Thumb */
::-webkit-scrollbar-thumb {
  background-color: rgba(62, 104, 164, 0.28);
  border-radius: var(--radius-full);
  transition: background-color var(--duration-fast) var(--ease-out);
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(62, 104, 164, 0.7);
}

::-webkit-scrollbar-thumb:active {
  background-color: var(--brand-primary);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* Dark Surface Scrollbars (Sidebar Navigation) */
.sidebar,
.sidebar-nav {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.sidebar-nav::-webkit-scrollbar {
  width: 4px;
}

.sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-full);
  transition: background-color var(--duration-fast) var(--ease-out);
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.35);
}

/* Table Containers & Modal Body Scroll Containment */
.table-responsive,
.modal-body {
  scrollbar-width: thin;
  scrollbar-color: rgba(62, 104, 164, 0.28) transparent;
  overscroll-behavior: contain;
}