/* SummitOS Design-Tokens — abgestimmt auf 365 Circle */
:root {
  --font-display: "Montserrat", system-ui, sans-serif;
  --font-body: "Montserrat", system-ui, sans-serif;
  --font-serif: "Lora", Georgia, serif;
  --font-mono: "Montserrat", ui-monospace, monospace;

  --radius: 0.5rem;
  --radius-card: 12px;
  --radius-pill: 999px;
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 6px 18px rgba(0, 0, 0, 0.1);

  /* Markenblau #0078D4 */
  --brand: hsl(207 100% 42%);
  --brand-hover: hsl(207 100% 37%);
  --m365-sky: var(--brand);
  --sky-300: hsl(207 100% 62%);
  --sky-50: hsl(207 100% 96%);
  --sky-700: hsl(207 100% 33%);
  --ring: var(--brand);

  --ink-900: hsl(222 47% 11%);
  --ink-700: hsl(215 20% 40%);
  --ink-600: hsl(215 16% 47%);
  --ink-300: hsl(214 20% 78%);

  --nav-bg: hsl(222 47% 11%);
  --nav-fg: hsl(210 40% 98%);
  --btn-solid: hsl(222 47% 11%);
  --btn-solid-fg: hsl(210 40% 98%);

  --surface: hsl(0 0% 100%);
  --surface-card: hsl(0 0% 100%);
  --surface-muted: hsl(210 20% 98%);
  --surface-sunken: hsl(214 20% 93%);

  --fg-1: hsl(222 47% 11%);
  --fg-2: hsl(215 25% 27%);
  --fg-3: hsl(215 16% 47%);
  --fg-4: hsl(215 14% 60%);
  --fg-link: var(--brand);

  --border: hsl(214 20% 88%);
  --border-subtle: hsl(214 25% 93%);
  --border-strong: hsl(214 18% 78%);

  --success: hsl(158 64% 38%);
  --success-bg: hsl(158 60% 95%);
  --warning: hsl(38 92% 40%);
  --warning-bg: hsl(43 96% 94%);
  --danger: hsl(0 72% 48%);
  --danger-bg: hsl(0 80% 96%);
}

.dark {
  --brand: hsl(205 95% 60%);
  --brand-hover: hsl(205 95% 68%);
  --m365-sky: var(--brand);
  --sky-300: hsl(205 95% 72%);
  --sky-50: hsl(205 60% 20%);
  --sky-700: hsl(205 95% 76%);
  --ring: var(--brand);

  --nav-bg: hsl(222 47% 8%);
  --nav-fg: hsl(210 40% 98%);
  --btn-solid: hsl(205 95% 60%);
  --btn-solid-fg: hsl(222 47% 11%);

  --surface: hsl(222 47% 11%);
  --surface-card: hsl(217 33% 16%);
  --surface-muted: hsl(222 47% 11%);
  --surface-sunken: hsl(217 33% 22%);

  --fg-1: hsl(210 40% 98%);
  --fg-2: hsl(210 30% 90%);
  --fg-3: hsl(214 20% 72%);
  --fg-4: hsl(214 16% 60%);
  --fg-link: var(--brand);

  --ink-900: hsl(222 47% 8%);
  --ink-700: hsl(214 20% 72%);
  --ink-600: hsl(214 20% 72%);
  --ink-300: hsl(217 20% 40%);

  --border: hsl(217 25% 27%);
  --border-subtle: hsl(217 28% 24%);
  --border-strong: hsl(217 20% 36%);

  --success: hsl(158 60% 60%);
  --success-bg: hsl(158 40% 20%);
  --warning: hsl(43 90% 66%);
  --warning-bg: hsl(38 50% 22%);
  --danger: hsl(0 80% 70%);
  --danger-bg: hsl(0 45% 24%);

  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-card-hover: 0 6px 18px rgba(0, 0, 0, 0.45);
}

html,
body {
  margin: 0;
  background: var(--surface-muted);
  color: var(--fg-2);
}

.muted { color: var(--fg-3); }
.mono { font-family: var(--font-mono); }
.serif { font-family: var(--font-serif); }
.right { text-align: right; }
.stack { display: grid; gap: 12px; }
.rowline { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.app-main h2 { font-family: var(--font-display); }
label.lbl { display: block; font-size: 13px; font-weight: 600; margin: 0 0 6px; color: var(--fg-1); }
.grp { margin-bottom: 14px; }
.err { color: var(--danger); font-size: 13px; }
.ok-msg { color: var(--success); font-size: 13px; }
select.field { appearance: auto; }
textarea.field { min-height: 110px; resize: vertical; }
blockquote,
.quote { font-family: var(--font-serif); font-size: 17px; line-height: 1.6; color: var(--fg-2); }