/* ecke.lt Design System v1
 *
 * Public, versioned foundation for ecke.lt and Deskleaf web surfaces.
 * Import this file only; individual token files are implementation details.
 */
@import url("./tokens/fonts.css");
@import url("./tokens/colors.css");
@import url("./tokens/typography.css");
@import url("./tokens/spacing.css");
@import url("./tokens/diagram.css");
@import url("./components.css");

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

html {
  font-size: var(--font-root);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  text-rendering: optimizeLegibility;
}

a {
  color: var(--accent);
  text-underline-offset: 0.16em;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--accent-hover);
}

:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
}

button,
input,
select,
textarea {
  font: inherit;
}

/* Applied by v1/mermaid.js. The wrapper is normally supplied by the host
 * documentation page, but diagrams should never overflow a narrow viewport. */
.ecke-mermaid svg {
  display: block;
  height: auto;
  max-width: 100%;
}

.ecke-mermaid-error {
  color: var(--danger);
  font-family: var(--font-mono);
  white-space: pre-wrap;
}