/* ==========================================================================
   SkillStreet — Base styles
   Reset, typography scale (design.md §1), theme transition (§10),
   focus & reduced-motion (§11)
   ========================================================================== */

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

html, body { height: 100%; }

body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  font-weight: 400;
  background: var(--bg);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }

button { background: none; border: none; cursor: pointer; }

ul, ol { list-style: none; }

a { color: var(--accent); text-decoration: none; }

/* --------------------------------------------------------------------------
   Typography scale — 700 reserved for display numbers and page titles only
   -------------------------------------------------------------------------- */
.text-display {
  font-size: var(--text-display); line-height: var(--lh-display); font-weight: 700;
  letter-spacing: -0.02em;
}
h1, .text-h1 {
  font-size: var(--text-h1); line-height: var(--lh-h1); font-weight: 700;
  letter-spacing: -0.01em;
}
h2, .text-h2 {
  font-size: var(--text-h2); line-height: var(--lh-h2); font-weight: 600;
}
h3, .text-h3 {
  font-size: var(--text-h3); line-height: var(--lh-h3); font-weight: 600;
}
.text-body {
  font-size: var(--text-body); line-height: var(--lh-body); font-weight: 400;
}
.text-body-sm {
  font-size: var(--text-body-sm); line-height: var(--lh-body-sm); font-weight: 400;
  color: var(--text-secondary);
}
.text-caption {
  font-size: var(--text-caption); line-height: var(--lh-caption); font-weight: 500;
}
.text-caption--upper {
  text-transform: uppercase; letter-spacing: 0.04em;
}
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }

/* 700 stays reserved for display numbers and page titles; inline emphasis
   and stat values read at semibold with steady (tabular) digits */
strong {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Scrollbars - slim, token-driven, and shared by every scrollable surface
   -------------------------------------------------------------------------- */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

*::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

*::-webkit-scrollbar-track {
  border-radius: var(--radius-pill);
  background: var(--scrollbar-track);
}

*::-webkit-scrollbar-thumb {
  min-height: var(--scrollbar-min-thumb);
  border: var(--scrollbar-inset) solid transparent;
  border-radius: var(--radius-pill);
  background: var(--scrollbar-thumb);
  background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  background-clip: content-box;
}

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

/* --------------------------------------------------------------------------
   Theme switch — colors transition smoothly; shadows swap without transition
   (design.md §10)
   -------------------------------------------------------------------------- */
body, .card, .sidebar, .topbar, .bottom-nav, .nav-item, .btn, .pill,
.icon-badge, .segmented, .segmented__btn, .modal__panel, .toast,
.divider, .divider--dashed, .progress-track, .avatar, .topbar-profile, .topbar-dropdown {
  transition: background-color var(--motion-duration-base) var(--motion-ease-standard),
              color var(--motion-duration-base) var(--motion-ease-standard),
              border-color var(--motion-duration-base) var(--motion-ease-standard);
}

/* --------------------------------------------------------------------------
   Focus — visible ring, never removed without replacement (design.md §11)
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: var(--focus-ring-width) solid var(--accent);
  outline-offset: var(--focus-ring-width);
}

/* --------------------------------------------------------------------------
   Reduced motion — fall back to simple opacity fades only (design.md §10)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: var(--motion-duration-reduced) !important;
    animation-iteration-count: 1 !important;
    transition-duration: var(--motion-duration-reduced) !important;
  }
}