/* ============================================================================
 * BASE — reset, body defaults, themed scrollbar, selection, focus-visible.
 * ========================================================================== */

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

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: var(--app-font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--app-text-primary);
  background-color: var(--app-surface-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Thin, cool-tinted scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--app-border-strong) transparent;
}

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

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

*::-webkit-scrollbar-thumb {
  background-color: var(--app-border-strong);
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  background-clip: content-box;
}

/* Brand-tinted selection */
::selection {
  background-color: var(--brand-accent-soft);
  color: var(--app-text-primary);
}

/* Consistent focus-visible baseline (components refine this) */
:focus-visible {
  outline: none;
}

button {
  font-family: inherit;
}