/* ============================================
   Zain Fonts
   ============================================ */
@font-face {
  font-family: 'Zain-Black';
  src: url('../fonts/Zain-Black-BF66ac52d77ca46.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: 'Zain-Bold';
  src: url('../fonts/Zain-Bold-BF66ac52d79a893.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'Zain-ExtraBold';
  src: url('../fonts/Zain-ExtraBold-BF66ac52d7dd4b3.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: 'Zain-ExtraLight';
  src: url('../fonts/Zain-ExtraLight-BF66ac52d83dd47.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: 'Zain-Italic';
  src: url('../fonts/Zain-Italic-BF66ac52d836794.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: 'Zain-Light';
  src: url('../fonts/Zain-Light-BF66ac52d83384b.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Zain-LightItalic';
  src: url('../fonts/Zain-LightItalic-BF66ac52d84f25c.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: 'Zain-Regular';
  src: url('../fonts/Zain-Regular-BF66ac52d73eb10.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* ============================================
   Design Tokens — "Warmes Schwarz" Theme
   Einziger Ort, an dem Farben/Fonts/Spacing
   definiert werden. Alles andere greift nur
   noch auf diese Variablen zu.
   ============================================ */
:root {
  /* Fonts */
  --font-display: "Zain-Black", sans-serif;   /* Headlines, Buttons */
  --font-heading: "Zain-Bold", sans-serif;     /* Sub-Headlines, Labels */
  --font-body: "Zain-Regular", sans-serif;     /* Fließtext */

  /* Background */
  --color-bg: #100d0b;
  --color-bg-glow: #f2a25c;

  /* Cards / Surfaces */
  --color-card: #1c1712;
  --color-card-hover: #241d15;
  --color-border: rgba(242, 162, 92, 0.15);
  --color-border-hover: rgba(242, 162, 92, 0.35);

  /* Text */
  --color-text: #ece4d8;
  --color-text-muted: #9a9a9a;
  --color-text-on-accent: #ffffff;

  /* Accent (Cookie-Orange, etwas klarer als vorher) */
  --color-accent: #f2a25c;
  --color-accent-strong: #ffb673;
  --color-accent-hover: #a3692f;
  --color-accent-soft: rgba(242, 162, 92, 0.12);
  --color-accent-soft-hover: rgba(242, 162, 92, 0.2);

  /* Effects */
  --glow-accent: 0 0 8px rgba(242, 162, 92, 0.55);
  --shadow-hover: drop-shadow(0 0 10px rgba(255, 123, 0, 1));
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.35);

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* Spacing */
  --section-gap-mobile: 3rem;
  --section-gap-desktop: 5rem;
}