/* Design-Tokens 1:1 aus der Figma-Datei „Neues Webdesign KGCranzahl", Seite „🎨 Design"
   (Variablen geprüft per Figma-Variablen-Export). Präfix --f- = Figma. */

:root {
  /* Neutral Colors */
  --f-n100: #fdfdfd;
  --f-n200: #f7f7f7;
  --f-n400: #cccccc;
  --f-n500: #a5a5a5;
  --f-n600: #545454;
  --f-n700: #333333;
  --f-n800: #0a0a0a;
  --f-n-e8: #e8e8e8; /* Fließtext auf Dunkel (Pastors Section) */

  /* Primary Colors */
  --f-accent: #fdb52a;
  /* Gold für Text auf hellem Grund (WCAG 2.2 AA): große Schrift ab 3:1, kleine Schrift ab 4,5:1.
     Auf dunklem Grund bleibt --f-accent (über --f-script-farbe, siehe components.css). */
  --f-accent-text: #b07a00;
  --f-accent-text-klein: #8a5d00;

  /* Other */
  --f-overlay-60: rgba(0, 0, 0, 0.6);

  /* General/Shadow 02 */
  --f-shadow-02: 0 2px 12px rgba(0, 0, 0, 0.04);

  /* Fonts */
  --f-font: var(--font-clarity), "Helvetica Neue", Arial, sans-serif;
  --f-font-script: var(--font-caveat), cursive;

  /* Typografie — Desktop-Werte aus Figma, auf kleinen Viewports fluid skaliert.
     Special Headings/Display 1–4, Headings/Typography Size 2–3, Special/300 */
  --f-d1-size: clamp(44px, 6.95vw, 100px);
  --f-d1-lh: 1.08;
  --f-d2-size: clamp(38px, 5vw, 72px);
  --f-d2-lh: 1.1667; /* 84/72 */
  --f-h64-size: clamp(36px, 4.45vw, 64px); /* Believe Section Titel */
  --f-d3-size: clamp(30px, 3.06vw, 44px);
  --f-d3-lh: 1.1818; /* 52/44 */
  --f-h2-size: clamp(28px, 2.64vw, 38px);
  --f-h2-lh: 1.3158; /* 50/38 */
  --f-d4-size: clamp(22px, 1.95vw, 28px);
  --f-d4-lh: 1.4286; /* 40/28 */
  --f-h3-size: 24px;
  --f-h3-lh: 34px;
  --f-script-size: clamp(34px, 3.34vw, 48px);
  --f-script-lh: 1.1667; /* 56/48 */
  /* Sichtbarer Abstand Handschrift-Zeile zu Titel (Buchstabenunterkante bis Versalhöhe): 0,4 der
     Special/300-Größe, also 19px am Desktop, 14px am Handy. Unterlängen bleiben so auch bei der
     größeren Special/400-Schrift (68px) über dem Titel. Siehe .f-title in components.css. */
  --f-script-gap: calc(var(--f-script-size) * 0.4);

  /* Paragraph/Default, Text Single … */
  --f-p-size: 18px;
  --f-p-lh: 30px;
  --f-t200-size: 18px;
  --f-t200-lh: 20px;
  --f-t100-size: 16px;
  --f-t100-lh: 18px;
  --f-upper-tracking: 1.08px;

  /* Radien */
  --f-r-button: 16px;
  --f-r-button-s: 14px;
  --f-r-square: 20px;
  --f-r-card: 32px;

  /* Layout: Frame 1440, Content 1268 (86px Rand) */
  --f-container: 1268px;
  /* Einheitlicher Bildstil für Farbfotos ohne eigene Maske (docs/bildstil.md, Variante A):
     Wärme 8 %, Sättigung 80 %, Kontrast 105 %, Helligkeit 99 % */
  --f-bildstil: sepia(0.08) saturate(0.8) contrast(1.05) brightness(0.99);
  --f-gutter: clamp(16px, 5.97vw, 86px);
  --f-section-y: clamp(96px, 18vw, 260px);
}

/* Handy (bis 600px, z. B. iPhone 15 Pro mit 393px): die Desktop-Mindestgrößen aus Figma sind dort
   zu groß (Überschriften liefen über, Texte überlappten). Eigene, ruhigere Stufen fürs Handy. */
@media (max-width: 600px) {
  :root {
    --f-d1-size: clamp(30px, 8.4vw, 36px);
    --f-d1-lh: 1.1;
    --f-d2-size: clamp(28px, 8.2vw, 34px);
    --f-d2-lh: 1.15;
    --f-h64-size: clamp(26px, 7.6vw, 32px);
    --f-d3-size: clamp(24px, 7vw, 28px);
    --f-d3-lh: 1.2;
    --f-h2-size: clamp(22px, 6.2vw, 24px);
    --f-h2-lh: 1.3;
    --f-d4-size: 20px;
    --f-d4-lh: 1.4;
    --f-h3-size: 20px;
    --f-h3-lh: 28px;
    --f-script-size: clamp(26px, 7.4vw, 30px);
    --f-p-size: 16px;
    --f-p-lh: 26px;
    --f-t200-size: 16px;
    --f-t200-lh: 20px;
    --f-section-y: clamp(64px, 18vw, 96px);
  }
}