// =============================================================================
// Global stylesheet — imported exactly once, in main.tsx. Contains only
// truly app-wide rules: the theme tokens and a minimal reset/base styling
// that every page inherits. Anything specific to one component or page
// belongs in a .scss file colocated next to that component/page instead.
// =============================================================================

@use "./theme";

// Include borders/padding in an element's declared width/height everywhere,
// rather than the browser default of adding them on top.
*,
*::before,
*::after {
  box-sizing: border-box;
}

// Minimal reset: remove the default body margin so pages can control their
// own layout without fighting the browser's default 8px margin.
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: 1.55;
  color: var(--color-text);
  background: var(--color-background);
}

// Headings use the condensed "label" face app-wide — see _theme.scss for
// the rationale. `text-wrap: balance` avoids a lone short word wrapping
// onto its own line in multi-line titles.
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  text-wrap: balance;
}

// Default to the page-title size; a heading used as a smaller component
// title (e.g. the auth card's <h1>) overrides this in its own stylesheet.
h1 {
  font-size: var(--font-size-2xl);
}

// A visible, consistent focus ring for keyboard navigation — the browser
// default varies a lot between elements and browsers.
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}