/* --- Base ------------------------------------------------------------------ */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body, header, .card, .sheet, .page, button, input, select, textarea {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font: inherit; }

::selection { background: color-mix(in srgb, var(--accent) 26%, transparent); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--text-muted); }

:is(button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
}

/* --- Icons ----------------------------------------------------------------- */
/* One sprite, one class. Icons inherit colour and scale with their type size,
   so a 12px label and a 20px heading get proportionate glyphs for free. */

.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.ic {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  vertical-align: -0.22em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
  pointer-events: none;
}

/* icons sitting directly beside a text label want a touch of air */
.ic + span, .ic + b, .ic + strong { margin-left: 0; }

.ic.solid { fill: currentColor; stroke-width: 1.2; }
.ic.thin  { stroke-width: 1.4; }
.ic.bold  { stroke-width: 2.1; }
.ic.lg    { width: 1.4em; height: 1.4em; }
.ic.xl    { width: 2.1em; height: 2.1em; stroke-width: 1.35; }
.ic.spin  { animation: ic-spin .9s linear infinite; }

@keyframes ic-spin { to { transform: rotate(360deg); } }

/* an icon that carries a semantic colour of its own */
.ic.ok   { color: var(--accent); }
.ic.warn { color: var(--amber); }
.ic.bad  { color: var(--red); }

/* --- Motion ---------------------------------------------------------------- */

:root {
  --ease-out: cubic-bezier(.22, .78, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .48, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 460ms;
}

@keyframes fade-in      { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise-in      { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes rise-in-sm   { from { opacity: 0; transform: translateY(5px); }  to { opacity: 1; transform: none; } }
@keyframes pop-in       { from { opacity: 0; transform: translateY(14px) scale(.975); } to { opacity: 1; transform: none; } }
@keyframes slide-in-left{ from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes sheet-in     { from { opacity: 0; transform: translateY(26px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toast-in     { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes pulse-ring   { 0% { box-shadow: 0 0 0 0 var(--ring); } 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes shimmer      { to { background-position: 200% 0; } }

/* honour the OS "reduce motion" setting — everything still works, it just stops moving */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}