@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --surface-page: #F6F5F3;
  --surface-card: #FFFFFF;
  --surface-inverse: #2B2622;
  --ink: #241E1A;
  --ink-muted: #6F675D;
  --ink-on-inverse: #FFFFFF;
  --ink-muted-on-inverse: #B5ADA5;
  --border: #E5E0D9;
  --brand: #C23B3B;
  --brand-text: #B23434;
  --brand-on-inverse: #EC6664;
  --on-brand: #FFFFFF;
  --success: #3B6D11;
  --success-bg: #EAF1E1;
  --warning: #8F5C0F;
  --warning-bg: #FBF1DE;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-14: 56px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-card: 0 2px 8px rgba(36, 30, 26, 0.07);
  --shadow-card-hover: 0 6px 16px rgba(36, 30, 26, 0.1);

  --font-sans: "Manrope", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-page: #1A1613;
    --surface-card: #26211D;
    --ink: #F3EEE8;
    --ink-muted: #B0A79E;
    --border: #3A342F;
    --brand-text: #EE6B69;
    --success: #9CCB63;
    --success-bg: #22301A;
    --warning: #E3A94E;
    --warning-bg: #35291A;
  }
}

:root[data-theme="dark"] {
  --surface-page: #1A1613;
  --surface-card: #26211D;
  --ink: #F3EEE8;
  --ink-muted: #B0A79E;
  --border: #3A342F;
  --brand-text: #EE6B69;
  --success: #9CCB63;
  --success-bg: #22301A;
  --warning: #E3A94E;
  --warning-bg: #35291A;
}

/* Logo (Kompakt-Zeile, invers) im dunklen Kopfbereich */
.hg-logo-img { display: block; height: 44px; width: auto; flex-shrink: 0; }
@media (max-width: 420px) { .hg-logo-img { height: 38px; } }