/* ============================================================
   FABULAR — MAIN CSS ENTRY POINT
   Order matters: tokens → reset → typography → layout → components → animations
   ============================================================ */

@import './tokens.css';
@import './reset.css';
@import './typography.css';
@import './layout.css';
@import './components.css';
@import './animations.css';

/* ============================================================
   PAGE-SPECIFIC GLOBAL STYLES
   ============================================================ */

/* Selection */
::selection {
  background-color: var(--ember);
  color: var(--paper);
}

/* Scrollbar (Chromium) */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--paper);
}
::-webkit-scrollbar-thumb {
  background: var(--ash);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--ash-dark);
}

/* Focus ring */
:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
}

/* --- Background helpers ------------------------------------ */
.bg-ink   { background-color: var(--ink); color: var(--paper); }
.bg-paper { background-color: var(--paper); color: var(--ink); }
.bg-ash   { background-color: #EEEDE8; color: var(--ink); }

/* --- Spacing utilities ------------------------------------- */
.mt-auto { margin-top: auto; }
.mb-4    { margin-bottom: var(--space-4); }
.mb-6    { margin-bottom: var(--space-6); }
.mb-8    { margin-bottom: var(--space-8); }
.mb-12   { margin-bottom: var(--space-12); }
.mb-16   { margin-bottom: var(--space-16); }
.mt-4    { margin-top: var(--space-4); }
.mt-6    { margin-top: var(--space-6); }
.mt-8    { margin-top: var(--space-8); }
.mt-12   { margin-top: var(--space-12); }

/* --- Text alignment --------------------------------------- */
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* --- Position --------------------------------------------- */
.relative { position: relative; }
.absolute { position: absolute; }
.sticky   { position: sticky; top: 0; }