/*
 * Global stylesheet — reset, base typography, the accessible focus ring, and
 * scrollbar polish. Port of frontend/src/index.css (the React reference loaded
 * it via main.tsx; the CLJS bundle links it from index.html). Most styling
 * lives in the design-token-driven inline styles in src/app/ui.cljs — this
 * file only holds what can't be expressed there. Colour values MUST match
 * app.ui/colors (CSS can't read the CLJS map, so they're duplicated; change
 * one, change the other).
 */

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

html, body, #app {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #12243A;        /* app.ui/colors :text-primary — navy */
  background: #ffffff;   /* app.ui/colors :bg — white */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color-scheme: light;
}

input, button, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Accessible focus ring — turquoise outline on keyboard focus only. */
:focus {
  outline: none;
}
:focus-visible {
  outline: 2px solid #1A9E8F; /* app.ui/colors :focus-ring */
  outline-offset: 2px;
}

/* Scrollbar polish — subtle by default, stronger on hover. */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #cbd3df;       /* app.ui/colors :border-strong */
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #8a96a8;       /* app.ui/colors :text-muted */
}

/* Selection — turquoise tint to match the brand accent. */
::selection {
  background: rgba(26, 158, 143, 0.25);
  color: #12243A;
}