/* Gemeinsames Aussehen des Screens 01_login — Farben, Schrift, Grundwerte. Die Farbwerte folgen
   site/02_catalog/styles/base.css; wo das Aussehen aller Screens steht, ist offen (site/CLAUDE.md). */

:root {
  --c-bg: #f5f4f0;
  --c-surface: #ffffff;
  --c-border: #e2dfd7;
  --c-border-strong: #cfcac0;
  --c-text: #1d1c1a;
  --c-text-muted: #6a655c;
  --c-accent: #3a55c8;
  --c-accent-hover: #2d45aa;
  --c-accent-soft: #e8ecfb;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --radius-m: 10px;
  --radius-l: 14px;
  --shadow-raised: 0 10px 28px rgb(29 28 26 / 0.1), 0 2px 6px rgb(29 28 26 / 0.06);
  --focus-ring: 0 0 0 3px rgb(58 85 200 / 0.3);
}

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

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

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
}

button,
input {
  font: inherit;
  color: inherit;
}

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

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}