/* Design-Tokens – gleiche Werte wie in der App (kotlin-app/.../ui/theme/Theme.kt) */
:root {
  --primary: #7B5EA7;
  --on-primary: #FFFFFF;
  --primary-container: #EBDCFF;
  --on-primary-container: #2E1452;
  --error: #BA1A1A;
  --error-container: #FFDAD6;
  --on-error-container: #410002;
  --background: #FEF7FF;
  --on-background: #1D1A20;
  --surface-container: #F2ECF5;
  --on-surface-variant: #4A4550;
  --outline-variant: #CBC4CF;

  --space-xs: 4px;
  --space-s: 8px;
  --space-m: 16px;
  --space-l: 24px;
  --space-xl: 40px;

  --radius-card: 28px;
  --radius-full: 999px;
  --icon-badge: 96px;
  --icon-size: 48px;
  --content-width: 440px;

  --font: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary: #D4BBFF;
    --on-primary: #3F2A63;
    --primary-container: #56417F;
    --on-primary-container: #EBDCFF;
    --error: #FFB4AB;
    --error-container: #93000A;
    --on-error-container: #FFDAD6;
    --background: #151218;
    --on-background: #E7E0E8;
    --surface-container: #221E25;
    --on-surface-variant: #CBC4CF;
    --outline-variant: #4A4550;
  }
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-l) var(--space-m);
  background: var(--background);
  color: var(--on-background);
  font-family: var(--font);
  line-height: 1.5;
}

.card {
  width: 100%;
  max-width: var(--content-width);
  padding: var(--space-xl) var(--space-l);
  border-radius: var(--radius-card);
  background: var(--surface-container);
  text-align: center;
}

.badge {
  width: var(--icon-badge);
  height: var(--icon-badge);
  margin: 0 auto var(--space-l);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-container);
  color: var(--on-primary-container);
}
.badge.error {
  background: var(--error-container);
  color: var(--on-error-container);
}
.badge svg {
  width: var(--icon-size);
  height: var(--icon-size);
  fill: currentColor;
}

/* M3 Headline small / Body large */
h1 {
  margin: 0 0 var(--space-s);
  font-size: 24px;
  line-height: 32px;
  font-weight: 400;
}
p {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--on-surface-variant);
}

.brand {
  margin-top: var(--space-xl);
  padding-top: var(--space-m);
  border-top: 1px solid var(--outline-variant);
  font-size: 14px;
  letter-spacing: 0.1px;
  color: var(--on-surface-variant);
}

[hidden] { display: none !important; }