/* ============================================================================
   DESIGN SYSTEM — BASE  (Stage 1)
   ----------------------------------------------------------------------------
   Global element styling + typography + focus + scrollbars.
   Consumes tokens from variables.css. Purely visual — no layout/direction
   changes (RTL is owned by custom.css).
   ========================================================================= */

/* --- Typography baseline ------------------------------------------------- */
body {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* App canvas — the scrollable content area behind cards. */
.content-wrapper {
  background-color: var(--background);
}

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

p { line-height: var(--line-height-base); }

small, .small { font-size: var(--font-size-sm); }

.text-muted { color: var(--text-muted) !important; }

/* --- Links --------------------------------------------------------------- */
a {
  color: var(--link-color);
  transition: color var(--animation-speed) var(--ease);
}
a:hover {
  color: var(--link-hover);
  text-decoration: none;
}

/* --- Selection ----------------------------------------------------------- */
::selection {
  background: var(--primary-soft-strong);
  color: var(--text-primary);
}

/* --- Accessible focus ring (keyboard users) ------------------------------ */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.custom-select:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* --- Custom scrollbars (WebKit + Firefox) -------------------------------- */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-color-strong) transparent;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: var(--border-color-strong);
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--text-muted);
  background-clip: content-box;
}

/* --- Horizontal rules ---------------------------------------------------- */
hr {
  border-top-color: var(--border-color);
}