/* =====================================================================
   tokens.css — Design-Tokens Kita Familya
   Spiegelt 02-Designsystem.md Abschnitt 10. Diese Werte entsprechen 1:1
   den späteren theme.json-Presets eines WordPress-Block-Themes.
   ===================================================================== */

/* --- Schriften lokal einbinden (kein Google-Fonts-CDN, DSGVO + Performance) --- */
@font-face {
  font-family: "Mulish";
  src: url("../fonts/mulish-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mulish";
  src: url("../fonts/mulish-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mulish";
  src: url("../fonts/mulish-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mulish";
  src: url("../fonts/mulish-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Primär — Petrol-Blau (Markenkern) --- */
  --color-primary-900: #0E3A44;
  --color-primary-700: #155E6B;
  --color-primary-600: #1A7585;
  --color-primary-300: #8FC4CD;
  --color-primary-100: #E2F0F2;

  /* --- Sekundär — Mandarine/Aprikose (Wärme & CTA) --- */
  --color-accent-700: #B5491B;
  --color-accent-500: #E0682A;
  --color-accent-300: #F5B98A;
  --color-accent-100: #FBE8DA;

  /* --- Akzent — Wiesengrün / Sonnengelb --- */
  --color-green-700: #3B6B2E;
  --color-green-500: #5A9145;
  --color-green-100: #E6F0E0;
  --color-yellow-500: #F2B705;
  --color-yellow-100: #FBEFC4;
  --color-yellow-text: #7A5A00;

  /* --- Neutral — warme Grautöne & Cremegrund --- */
  --color-bg: #FBF8F3;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F3EDE3;
  --color-border: #E4DCCF;
  --color-border-strong: #B9AE9A;
  --color-text: #2A2622;
  --color-text-muted: #5C544A;
  --color-text-on-dark: #FBF8F3;

  /* --- Statusfarben (funktional) --- */
  --color-success: #2F7D32;
  --color-success-bg: #E6F0E0;
  --color-warning: #9A6B00;
  --color-warning-bg: #FBEFC4;
  --color-error: #C0301A;
  --color-error-bg: #FBE3DF;
  --color-info: #155E6B;
  --color-info-bg: #E2F0F2;
  --color-focus: #1A7585;

  /* --- Platz-Ampel Status --- */
  --status-free-text: #3B6B2E;
  --status-free-bg: #E6F0E0;
  --status-wait-text: #9A6B00;
  --status-wait-bg: #FBEFC4;
  --status-full-text: #8A3520;
  --status-full-bg: #F4E0D8;

  /* --- Eckenradien --- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 36px;
  --radius-pill: 999px;

  /* --- Spacing-Skala (8-px-Basis) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* --- Schatten (weich, warm getönt) --- */
  --shadow-sm: 0 1px 3px rgba(42, 38, 34, 0.06);
  --shadow-md: 0 6px 20px rgba(42, 38, 34, 0.08);
  --shadow-lg: 0 14px 40px rgba(42, 38, 34, 0.12);

  /* --- Typografie --- */
  --font-display: "Fraunces", "Georgia", "Times New Roman", serif;
  --font-body: "Mulish", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* --- Layout --- */
  --container: 1200px;
  --container-narrow: 720px;
  --container-wide: 1360px;
  --gutter: 20px;

  /* --- Bewegung --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --transition: 180ms var(--ease-out);
}

@media (min-width: 768px) {
  :root { --gutter: 32px; }
}
@media (min-width: 1024px) {
  :root { --gutter: 48px; }
}