/* ==========================================================================
   Džemat Fedžr — Design-Tokens
   Alle Farben, Abstände und Schriftgrößen der Seite stehen NUR hier.
   Wer das Aussehen ändern will, ändert diese Datei — nicht site.css.
   ========================================================================== */

:root {
  /* --- Farben: Tiefgrün (Ruhe, Moschee), Messinggold (Kalligrafie), Creme (Papier) --- */
  --ink:            #081813;   /* tiefstes Grün, fast schwarz */
  --green-900:      #0D2A21;
  --green-800:      #123729;
  --green-700:      #1A5244;
  --green-600:      #236956;
  --green-400:      #4E9280;

  --gold-700:       #8C6E22;
  --gold-600:       #A8862F;
  --gold-500:       #C6A24B;   /* Leitakzent */
  --gold-400:       #D8BC77;
  --gold-300:       #E3CC92;
  --gold-100:       #F4EBD4;

  --cream:          #FBF8F1;   /* Seitenhintergrund */
  --sand:           #F2EADB;
  --sand-300:       #E5D9C3;
  --sand-500:       #CBBCA0;

  --text:           #18211E;
  --text-muted:     #5C6862;
  --text-faint:     #8A958F;
  --on-dark:        #F1EBDD;
  --on-dark-muted:  #AEBDB4;

  --white:          #FFFFFF;
  --focus:          #7FD1B9;

  /* --- Flächen --- */
  --surface:        var(--cream);
  --surface-raised: var(--white);
  --surface-sunken: var(--sand);
  --border:         color-mix(in srgb, var(--green-700) 16%, transparent);
  --border-strong:  color-mix(in srgb, var(--green-700) 34%, transparent);
  --border-gold:    color-mix(in srgb, var(--gold-500) 45%, transparent);

  /* --- Schrift ---
     Bewusst ohne Google Fonts: keine externen Requests, DSGVO-unkritisch.
     Ersetzbar durch selbst gehostete Schriften, siehe README. */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
                  "URW Palladio L", "Georgia", "Times New Roman", serif;
  --font-body:    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
                  Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Typo-Skala. Obergrenzen sind absichtlich moderat: deutsche Komposita
     ("Mitgliedschaftsantrag") brauchen mehr Zeilenbreite als bosnische Wörter. */
  --step--2: clamp(0.75rem, 0.73rem + 0.10vw, 0.8125rem);
  --step--1: clamp(0.875rem, 0.85rem + 0.14vw, 0.9375rem);
  --step-0:  clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
  --step-1:  clamp(1.1875rem, 1.12rem + 0.34vw, 1.4375rem);
  --step-2:  clamp(1.5rem, 1.34rem + 0.78vw, 2rem);
  --step-3:  clamp(1.875rem, 1.58rem + 1.42vw, 2.75rem);
  --step-4:  clamp(2.25rem, 1.77rem + 2.30vw, 3.875rem);
  --step-5:  clamp(2.625rem, 1.92rem + 3.40vw, 5rem);
  --step-6:  clamp(3rem, 1.90rem + 5.30vw, 6.75rem);

  /* --- Abstände (4px-Raster) --- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.75rem;
  --sp-8: 3.5rem;
  --sp-9: 5rem;
  --sp-10: 7rem;
  --sp-11: 9.5rem;

  /* Vertikaler Rhythmus der Abschnitte */
  --section-y:      clamp(3.5rem, 2rem + 6vw, 7.5rem);
  --section-y-lg:   clamp(5rem, 2.5rem + 9vw, 10.5rem);

  /* --- Breiten --- */
  --wrap:        75rem;   /* 1200px Standard */
  --wrap-wide:   92rem;   /* 1472px für Bildbänder */
  --wrap-narrow: 46rem;   /* 736px für Lesetexte */
  --gutter:      clamp(1.25rem, 0.6rem + 2.6vw, 2.75rem);

  /* --- Radien: Bogen (Moscheefenster) als Leitform --- */
  --r-1: 3px;
  --r-2: 6px;
  --r-3: 12px;
  --r-4: 20px;
  --r-arch: 50vw 50vw var(--r-2) var(--r-2);   /* Rundbogen oben */
  --r-pill: 999px;

  /* --- Schatten: warm getönt, nie grau --- */
  --sh-1: 0 1px 2px color-mix(in srgb, var(--green-900) 8%, transparent);
  --sh-2: 0 6px 18px -6px color-mix(in srgb, var(--green-900) 20%, transparent);
  --sh-3: 0 18px 44px -14px color-mix(in srgb, var(--green-900) 28%, transparent);
  --sh-4: 0 34px 80px -24px color-mix(in srgb, var(--green-900) 38%, transparent);

  /* --- Bewegung --- */
  --ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:   140ms;
  --t-med:    280ms;
  --t-slow:   620ms;

  /* --- Konstanten des Layouts --- */
  --header-h: 5rem;
  --motif: url("../img/motif-girih.svg");
  --motif-star: url("../img/motif-star.svg");
  --grain: url("../img/grain.svg");

  /* --- Effektschicht: Korn, Glanz, Bogenkante ---
     Hier lässt sich die Wirkung dosieren. --grain-opacity auf 0 setzt die
     Korntextur ab, --arch-h steuert die Höhe der Bogenkanten. */
  --grain-opacity: 0.045;
  --arch-h: clamp(2.5rem, 5vw, 6rem);
  --glow-gold: 0 0 60px -12px rgb(198 162 75 / 0.55);
  --glass: blur(18px) saturate(1.4);
}

@media (max-width: 40rem) {
  :root { --header-h: 4.25rem; }
}