/* Phase-0-Platzhalter-Tokens. Das echte Token-Set wird in Phase 3 aus dem
 * SCSS-Primitive-System des Bestands übernommen. Mechanik ist bereits final:
 * globale CSS Custom Properties, umgeschaltet über html[data-core-theme]
 * (Light DOM — Werte greifen in jede Komponente durch, kein Shadow DOM). */

:root,
html[data-core-theme='light'] {
  --core-color-bg: #f4f6f8;
  --core-color-surface: #ffffff;
  --core-color-text: #1c2430;
  --core-color-text-muted: #5b6774;
  --core-color-accent-blue: #1f6fd6;
  --core-color-border: #d4dbe3;
}

html[data-core-theme='dark'] {
  --core-color-bg: #10151c;
  --core-color-surface: #1a2230;
  --core-color-text: #e8edf3;
  --core-color-text-muted: #9aa7b5;
  --core-color-accent-blue: #5aa2f0;
  --core-color-border: #2c3a4d;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--core-color-bg);
  color: var(--core-color-text);
}

/* Demo-Element (Light-DOM-Klassenkonvention: vc-<element>__<teil>) */
.vc-hello {
  display: grid;
  place-items: center;
  min-height: 100dvh;
}

.vc-hello__card {
  background: var(--core-color-surface);
  border: 1px solid var(--core-color-border);
  border-radius: 12px;
  padding: 2rem 2.5rem;
  max-width: 28rem;
}

.vc-hello__badge {
  display: inline-block;
  background: var(--core-color-accent-blue);
  color: var(--core-color-on-accent, var(--surface));
  border-radius: 999px;
  padding: 0.2rem 0.8rem;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.vc-hello__title {
  margin: 0.8rem 0 0.4rem;
  font-size: 1.6rem;
}

.vc-hello__text {
  margin: 0;
  color: var(--core-color-text-muted);
  line-height: 1.5;
}