@charset "UTF-8";

/* Tailwind Layer (aktiv, wenn Vite-Build genutzt wird) */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* ---- CI: CSS-Variablen (funktionieren auch ohne Tailwind-Build) ---- */
:root{
  --mh-color-primary:   #3A3A3A; /* Graphit-Grau */
  --mh-color-accent:    #D8B8A0; /* Roségold (matt) */
  --mh-color-offwhite:  #F7F6F4; /* Hintergrund hell */
  --mh-color-nude:      #E9DAD3; /* Sekundärfläche */
  --mh-color-bluegrey:  #BFC9D5; /* UI-Akzent */

  --mh-font-heading: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mh-font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---- Base Styles (greifen sofort, unabhängig vom Build) ---- */
html, body{
  background-color: var(--mh-color-offwhite);
  color: var(--mh-color-primary);
  font-family: var(--mh-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.mh-heading{
  font-family: var(--mh-font-heading);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.mh-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.75rem 1.25rem; border-radius: .75rem;
  background: var(--mh-color-primary);
  color:#fff; text-decoration:none; font-weight:500;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  transition: transform .06s ease, box-shadow .2s ease;
}
.mh-btn:hover{ transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,.12); }

.mh-btn--ghost{
  background: transparent; color: var(--mh-color-primary);
  border: 1px solid var(--mh-color-bluegrey);
}

.mh-card{
  background:#fff; border:1px solid rgba(0,0,0,.05);
  border-radius: 1rem; padding:1.25rem; box-shadow: 0 6px 24px rgba(0,0,0,.06);
}

.mh-badge{
  display:inline-block; padding:.25rem .5rem; border-radius:.5rem;
  background: color-mix(in srgb, var(--mh-color-accent) 18%, white);
  color: #5a4639; border: 1px solid color-mix(in srgb, var(--mh-color-accent) 35%, white);
  font-size:.75rem; font-weight:600;
}

/* Hilfsklassen für Farben (sofort nutzbar ohne Tailwind) */
.text-primary{ color: var(--mh-color-primary); }
.text-accent{ color: var(--mh-color-accent); }
.bg-offwhite{ background-color: var(--mh-color-offwhite); }
.bg-nude{ background-color: var(--mh-color-nude); }
.border-bluegrey{ border-color: var(--mh-color-bluegrey); }