/**
 * base.css
 * Global reset + typography rules. No component-specific styling here —
 * that belongs in each component's own stylesheet under ui/.
 */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap");

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  /* The sidebar drawer + dialogs use fixed-position/off-canvas elements
     on phones (see Sidebar.css) — clamp horizontal overflow app-wide so
     a stray wide element never creates a sideways-scrolling page. */
  overflow-x: hidden;
}

body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* iOS/Android show a double-tap-to-zoom gesture by default; on the
     inventory grid this hijacked what was meant to be an "edit this
     item" double-tap. Buttons/links don't need pinch-to-zoom's
     "double-tap zoom" shortcut, so this removes that ambiguity for the
     whole app rather than special-casing every clickable element. */
  touch-action: manipulation;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}

code,
.mono {
  font-family: var(--font-mono);
}

button {
  font-family: inherit;
}

a {
  color: inherit;
}

/* Visible keyboard focus, app-wide. Mouse/touch clicks never trigger
   this — only :focus-visible does — so it costs nothing visually for
   pointer users while keeping the app fully navigable by keyboard. */
:focus-visible {
  outline: 2px solid var(--accent-copper-bright);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

::selection {
  background: var(--accent-copper);
  color: var(--bg-base);
}

/* Visible keyboard focus everywhere — accessibility floor */
:focus-visible {
  outline: 2px solid var(--accent-teal-bright);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

#app-root {
  height: 100%;
  display: flex;
  flex-direction: column;
}