/*
 * ithrion UI baseline
 *
 * Framework-free foundations shared by every Flask/Jinja page. Keep this file
 * limited to tokens, normalization, accessibility, and low-specificity
 * primitives. Product-specific visual styling belongs in style.css or
 * editor.css.
 */

:root {
  color-scheme: light;

  /* Neutral palette */
  --ui-canvas: #f5f4ef;
  --ui-surface: #ffffff;
  --ui-surface-subtle: #eeede7;
  --ui-ink: #151513;
  --ui-ink-muted: #66665f;
  --ui-border: #d8d7d0;
  --ui-border-strong: #9a9991;
  --ui-accent: #c6ff4a;
  --ui-danger: #b42318;

  /* Typography. The site is deliberately one typeface: hierarchy comes from
     weight and size, never from a second family. `--ui-font-sans` is the single
     definition, so retiring or replacing the face is a one-line change. */
  --ui-font-sans: "DM Sans", Arial, sans-serif;
  --ui-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  /* Spacing */
  --ui-space-1: 0.25rem;
  --ui-space-2: 0.5rem;
  --ui-space-3: 0.75rem;
  --ui-space-4: 1rem;
  --ui-space-5: 1.5rem;
  --ui-space-6: 2rem;
  --ui-space-7: 3rem;
  --ui-space-8: 4rem;

  /* Shape and depth */
  --ui-radius-sm: 0.25rem;
  --ui-radius-md: 0.5rem;
  --ui-radius-lg: 0.75rem;
  --ui-shadow-sm: 0 1px 2px rgb(21 21 19 / 8%);
  --ui-shadow-md: 0 12px 32px rgb(21 21 19 / 10%);

  /* Layout and interaction */
  --ui-container: 73.75rem;
  --ui-gutter: clamp(1rem, 4vw, 2.5rem);
  --ui-control-height: 2.75rem;
  --ui-focus-ring: 0 0 0 3px rgb(198 255 74 / 65%);
  --ui-duration-fast: 140ms;
  --ui-duration-normal: 220ms;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

:where(img, svg, video, canvas) {
  display: block;
  max-width: 100%;
}

:where(button, input, select, textarea) {
  margin: 0;
  color: inherit;
  font: inherit;
}

:where(button, [type="button"], [type="submit"], [type="reset"]) {
  -webkit-appearance: button;
}

:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ui-ink);
  outline-offset: 3px;
}

:where([hidden]) {
  display: none !important;
}

:where([disabled], [aria-disabled="true"]) {
  cursor: not-allowed;
}

::selection {
  color: var(--ui-ink);
  background: var(--ui-accent);
}

/* Accessible text that remains available to screen readers. */
.ui-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/*
 * Low-specificity primitives. Pages may adopt these incrementally without
 * coupling templates to a JavaScript framework.
 */
.ui-container {
  width: min(var(--ui-container), calc(100% - (2 * var(--ui-gutter))));
  margin-inline: auto;
}

.ui-stack {
  display: flex;
  flex-direction: column;
  gap: var(--ui-stack-gap, var(--ui-space-4));
}

.ui-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ui-cluster-gap, var(--ui-space-3));
}

.ui-surface {
  color: var(--ui-ink);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
}

.ui-control {
  min-height: var(--ui-control-height);
  padding-inline: var(--ui-space-4);
  color: var(--ui-ink);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}