/* ============================================================
   01-TOKENS.CSS
   Design-Tokens für ewly
   ------------------------------------------------------------
   Diese Datei enthält alle zentralen Design-Werte als
   CSS Custom Properties (Variablen). Alle weiteren Module
   referenzieren ausschließlich diese Variablen.

   WICHTIG: Bei einem neuen Kunden wird im Idealfall NUR
   diese Datei ausgetauscht — die Architektur bleibt gleich.

   Quelle: Moodboard ewly (Farben geschätzt, keine exakten
           Hex-Werte vorgegeben).
   Stand:  Juni 2026
   ============================================================ */


/* ============================================================
   SCHRIFTEN — selbst gehostet (DSGVO-konform)
   ------------------------------------------------------------
   Zwei-Schriften-System laut Moodboard:
     - Source Serif 4 → Headlines / Display
     - Inter          → Fließtext / UI

   TODO: Schriftdateien herunterladen (google-webfonts-helper):
         https://gwfh.mranftl.com/fonts/source-serif-4
         https://gwfh.mranftl.com/fonts/inter
         Charset latin. Dateien unter assets/fonts/<schrift>/ ablegen.
         Versionsnummer (v…) im Dateinamen ggf. an die hier
         hinterlegten src-Pfade anpassen.
   ============================================================ */

/* — Source Serif 4 (Headlines) — */
@font-face {
  font-display: swap;
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/source-serif-4/source-serif-4-v14-latin-regular.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/source-serif-4/source-serif-4-v14-latin-600.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/source-serif-4/source-serif-4-v14-latin-700.woff2') format('woff2');
}

/* — Inter (Fließtext / UI) — */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/inter/inter-v20-latin-regular.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/inter/inter-v20-latin-500.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/inter/inter-v20-latin-700.woff2') format('woff2');
}

:root {

    /* ────────────────────────────────────────────────────────
       FARBEN (aus Moodboard geschätzt)
       ────────────────────────────────────────────────────────
       Petrol/Teal #2D6E73  — Hauptfarbe (Logo, Buttons, Links)
       Salbeigrün  #9FB49C  — Akzent (Flächen, Tagline)
       Creme       #F1EBDD  — warmer Hintergrund
       Anthrazit   #2E3A38  — Text & Headlines
       ────────────────────────────────────────────────────────  */

    /* — Primär / Aktionsfarbe (Petrol) ————————————————————— */
    --cd-color-primary:           #2D6E73;  /* Teal — Buttons, CTA, Links */
    --cd-color-primary-soft:      #245A5E;  /* Dunkleres Teal — Hover */
    --cd-color-primary-tint:      rgba(45, 110, 115, 0.08);  /* Teal 8 % — Flächen */

    /* — Foundation ———————————————————————————————————————————— */
    --cd-color-text:              #2E3A38;  /* Anthrazit — Text & Headlines */
    --cd-color-bg:                #FFFFFF;  /* Weiß — Standard-Hintergrund */

    /* — Akzent (Salbeigrün, dosiert) ———————————————————————— */
    --cd-color-accent:            #9FB49C;  /* Salbei — Flächen, Akzente */
    --cd-color-accent-soft:       #87A085;  /* Dunkleres Salbei — Hover/Tiefe */

    /* — Creme (warmer Sekundär-Hintergrund) ————————————————— */
    --cd-color-cream:             #F1EBDD;  /* Creme — Section-Hintergründe */

    /* — Funktional & Neutral (abgeleitet) ——————————————————— */
    --cd-color-text-on-primary:   #FFFFFF;  /* Text auf Teal-Flächen */
    --cd-color-text-muted:        #6E7A76;  /* Gedämpfter Text */
    --cd-color-border:            #E4E1D6;  /* Trennlinien, Card-Borders */


    /* ────────────────────────────────────────────────────────
       TYPOGRAFIE — Zwei-Schriften-System
       ────────────────────────────────────────────────────────
       Headlines: Source Serif 4 (Serif)
       Fließtext: Inter (Sans-Serif)
       ────────────────────────────────────────────────────────  */

    --cd-font-heading: "Source Serif 4", Georgia, "Times New Roman", serif;
    --cd-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Generischer Alias — Module ohne explizite Headline nutzen Body. */
    --cd-font-family: var(--cd-font-body);

    /* — Font-Weights —————————————————————————————————————— */
    --cd-fw-medium:               400;   /* Body-Text (Inter Regular) */
    --cd-fw-semibold:             700;   /* Headlines, Hervorhebungen */

    /* — Schriftgrößen (Standard-Web-Skala) ————————————————— */
    --cd-fs-h1:                   3.5rem;    /* 56px */
    --cd-fs-h2:                   2.5rem;    /* 40px */
    --cd-fs-h3:                   2rem;      /* 32px */
    --cd-fs-h4:                   1.5rem;    /* 24px */
    --cd-fs-h5:                   1.25rem;   /* 20px */
    --cd-fs-h6:                   1.125rem;  /* 18px */
    --cd-fs-body:                 1rem;      /* 16px */
    --cd-fs-small:                0.875rem;  /* 14px */

    /* — Line-Heights ——————————————————————————————————————— */
    --cd-lh-tight:                1.15;   /* Headlines */
    --cd-lh-normal:               1.5;    /* Body */
    --cd-lh-relaxed:              1.7;    /* Lange Lesetexte */


    /* ────────────────────────────────────────────────────────
       SPACING (8-Punkt-Skala)
       ────────────────────────────────────────────────────────  */

    --cd-space-2xs:               0.25rem;   /* 4px  */
    --cd-space-xs:                0.5rem;    /* 8px  */
    --cd-space-sm:                1rem;      /* 16px */
    --cd-space-md:                1.5rem;    /* 24px */
    --cd-space-lg:                2rem;      /* 32px */
    --cd-space-xl:                3rem;      /* 48px */
    --cd-space-2xl:               4rem;      /* 64px */
    --cd-space-3xl:               6rem;      /* 96px */


    /* ────────────────────────────────────────────────────────
       BORDER-RADIUS
       ────────────────────────────────────────────────────────
       Weiche, runde Markenwelt → Pill-Buttons, rundliche Cards.
       ────────────────────────────────────────────────────────  */

    --cd-radius-sm:               0.5rem;    /* 8px  — Inputs */
    --cd-radius-md:               1rem;      /* 16px — Cards */
    --cd-radius-lg:               1.5rem;    /* 24px — größere Container */
    --cd-radius-pill:             999px;     /* Pill-Buttons */


    /* ────────────────────────────────────────────────────────
       SCHATTEN
       ────────────────────────────────────────────────────────  */

    --cd-shadow-sm:               0 1px 2px rgba(46, 58, 56, 0.06);
    --cd-shadow-md:               0 4px 12px rgba(46, 58, 56, 0.10);
    --cd-shadow-lg:               0 12px 32px rgba(46, 58, 56, 0.14);


    /* ────────────────────────────────────────────────────────
       TRANSITIONS
       ────────────────────────────────────────────────────────  */

    --cd-transition-fast:         150ms ease;
    --cd-transition-base:         250ms ease;
    --cd-transition-slow:         400ms ease;


    /* ────────────────────────────────────────────────────────
       LAYOUT
       ────────────────────────────────────────────────────────  */

    --cd-container-max:           1200px;
    --cd-container-padding:       var(--cd-space-md);

}