/* ============================================================
   KIRCHENWIRT DESIGN TOKENS
   Farben, Fonts, Abstaende - zentral hier aendern, der Rest
   der Seite zieht ueber die CSS-Variablen nach.
   ============================================================ */

/* ---- Self-hosted Fonts (kein Google-CDN-Request) ---- */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../fonts/fraunces-variable.woff2') format('woff2');
}

@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/kalam-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/kalam-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/karla-variable.woff2') format('woff2');
}

@font-face {
  font-family: 'Karla';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/karla-italic.woff2') format('woff2');
}

:root {

  /* ---- Primitive: rohe Werte ---- */

  --orange-500: #e07304;  /* Kirchenwirt-Orange, aus dem Logo */
  --orange-600: #b05f04;
  --orange-100: #fbe6ce;

  --wine-900: #341219;

  --sand-100: #f4ecdd;
  --sand-300: #e2d2b8;

  --brown-500: #3c2a1e;
  --brown-700: #241811;
  --near-black: #17100b;

  --cream: #fffaf3;

  /* ---- Semantic: Bedeutung statt Farbe ---- */

  --color-bg: var(--sand-100);
  --color-surface: var(--cream);
  --color-border: var(--sand-300);

  --color-ink: var(--brown-500);        /* Fliesstext */
  --color-ink-strong: var(--brown-700); /* Ueberschriften */

  --color-accent: var(--orange-500);         /* Buttons, Flaechen */
  --color-accent-hover: var(--orange-600);
  --color-accent-ink: #7d2e34;               /* Akzent-TEXT auf hellem Grund (Kicker, Preise) */
  --color-accent-tint: var(--orange-100);    /* Badges, sanfte Hervorhebung */

  /* ---- Fonts ---- */

  --font-accent: 'Kalam', 'Segoe Print', 'Bradley Hand', cursive;
  --font-heading: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-main: 'Karla', 'Helvetica Neue', Arial, sans-serif;

  /* ---- Spacing (Basis: ca. 8px) ---- */

  --space-1: 6px;
  --space-2: 12px;
  --space-3: 20px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 80px;

  /* ---- Radius ---- */

  --radius: 10px;
}