/* The page every Kairo app starts from: the ink aliases the system's theme
   does not name, the three typeface aliases, the body on ivory, Turbo's seam,
   the lime selection and the one focus ring. Loaded after kairo/tokens.css
   and before an app's own sheets. */

:root {
  /* Ink regions — the dashboard's rail and headline bands — need three shades
     the system's ink theme does not name: a rule, a lifted surface, and a
     secondary text that still clears 4.5:1 on ink. #465067 is the border the
     system's own k-theme-ink uses. */
  --ink-line: #465067;
  --ink-raised: #232e47;
  --ink-muted: #a3abc2;
  --ink-faint: #8a93ad;
  /* The warning hue for ink: the system's own is a brown that vanishes on it. */
  --ink-amber: #f3c46b;

  --sans: "Manrope", system-ui, sans-serif;
  --display: "Space Grotesk", "Manrope", sans-serif;
  --mono: "DM Mono", ui-monospace, monospace;
}

body {
  margin: 0;
  min-height: 100dvh;
  background-color: var(--k-color-ivory);
  color: var(--k-color-ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* A frame is a seam for Turbo, not a box: it must not change the layout of
   the section it wraps. */
turbo-frame {
  display: contents;
}

::selection {
  background: var(--k-color-lime);
  color: var(--k-color-ink);
}

/* Every control, not only the text inputs that styled it themselves. A list
   is largely tabbing between one-word links inside table rows, and the UA's
   default ring is a dark halo that disappears against ivory. The system's
   focus is deep violet on light and lime on ink; the dashboard's ink regions
   restate it. No `border-radius` here: at one class of specificity it would
   beat `.button`'s own and square the button off the moment it took focus. */
:focus-visible {
  outline: 3px solid var(--k-color-violet-deep);
  outline-offset: 3px;
}