/* ============================================================
   01-TOKENS.CSS
   Design-Tokens für Wir Mahnen Für Dich
   ------------------------------------------------------------
   Helles Theme mit grüner Primärfarbe, dunkle Nav/Footer.

   Quelle: Corporate Identity »wirmahnenfuerdich« (ORANGEKIWI Studio)
   Stand:  Juni 2026
   ============================================================ */


/* ============================================================
   SCHRIFT — Urbanist (selbst gehostet, DSGVO-konform)
   ------------------------------------------------------------
   Ersetzt die im CD vorgesehene CODEC Pro (kommerziell/Zetafonts)
   durch die freie Google-Font »Urbanist« — geometrische Sans mit
   ähnlichem, modernem Charakter.

   Rollen (analog CD):
     H1 / Headlines            → 600 (Semibold)
     H2 (in VERSALIEN) + Copy  → 400 (Regular)

   Geladene Schnitte: 400, 500, 600, 800 (unter assets/fonts/urbanist/).
   Bezug: https://gwfh.mranftl.com/fonts/urbanist
   ============================================================ */

@font-face {
  font-display: swap;
  font-family: 'Urbanist';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/urbanist/urbanist-v18-latin-regular.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Urbanist';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/urbanist/urbanist-v18-latin-500.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Urbanist';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/urbanist/urbanist-v18-latin-600.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Urbanist';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/urbanist/urbanist-v18-latin-800.woff2') format('woff2');
}

:root {

    /* ────────────────────────────────────────────────────────
       FARBEN (aus CD)
       ────────────────────────────────────────────────────────
       #68A42B  Grün      Primär (Buttons, Links, Akzente)
       #79C944  Hellgrün  Akzent
       #232223  Dunkel    Text, dunkle Sektionen
       #17161C  Schwarz   Header/Footer
       ────────────────────────────────────────────────────────  */

    /* — Primär (Grün) ——————————————————————————————————————— */
    --cd-color-primary:           #68A42B;  /* Grün — Buttons, CTA, Links */
    --cd-color-primary-soft:      #557F22;  /* dunkleres Grün — Hover */
    --cd-color-primary-tint:      rgba(104, 164, 43, 0.08);  /* Grün 8 % — Flächen */

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

    /* — Akzent (Hellgrün, dosiert) —————————————————————————— */
    --cd-color-accent:            #79C944;  /* Hellgrün — Akzente, Highlights */
    --cd-color-accent-soft:       #68A42B;  /* Grün — Hover/Tiefe */

    /* — Dunkle Flächen (Header/Footer/Sektionen) ——————————— */
    --cd-color-dark:              #17161C;  /* Schwarz */
    --cd-color-dark-soft:         #232223;  /* Dunkel */

    /* — Funktional & Neutral ———————————————————————————————— */
    --cd-color-text-on-primary:   #FFFFFF;  /* Text auf Grün-Flächen */
    --cd-color-text-on-dark:      #FFFFFF;  /* Text auf dunklen Flächen */
    --cd-color-text-muted:        #6B6A6E;  /* Gedämpfter Text */
    --cd-color-border:            #E5E4E2;  /* Trennlinien, Card-Borders */

    /* — Warmer/heller Sektions-Hintergrund ————————————————— */
    --cd-color-cream:             #F3F5EC;  /* leicht grünliches Off-White */


    /* ────────────────────────────────────────────────────────
       TYPOGRAFIE — Urbanist (geometrische Sans, ersetzt CODEC Pro)
       ────────────────────────────────────────────────────────
       Verfügbare Schnitte: 400, 500, 600, 800 (kein 700).
       Headlines nutzen 600 (Semibold) — 700 wurde nicht geladen.
       ────────────────────────────────────────────────────────  */

    --cd-font-heading: "Urbanist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --cd-font-body:    "Urbanist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --cd-font-family:  var(--cd-font-body);

    /* — Font-Weights (an geladene Urbanist-Schnitte angepasst) — */
    --cd-fw-medium:               400;   /* Regular — Body, H2 */
    --cd-fw-semibold:             600;   /* Semibold — H1, Headlines, Buttons */

    /* — Schriftgrößen ———————————————————————————————————————— */
    --cd-fs-h1:                   3.5rem;    /* 56px */
    --cd-fs-h2:                   2.25rem;   /* 36px */
    --cd-fs-h3:                   1.75rem;   /* 28px */
    --cd-fs-h4:                   1.375rem;  /* 22px */
    --cd-fs-h5:                   1.125rem;  /* 18px */
    --cd-fs-h6:                   1rem;      /* 16px */
    --cd-fs-body:                 1rem;      /* 16px */
    --cd-fs-small:                0.875rem;  /* 14px */

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


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

    --cd-space-2xs:               0.25rem;
    --cd-space-xs:                0.5rem;
    --cd-space-sm:                1rem;
    --cd-space-md:                1.5rem;
    --cd-space-lg:                2rem;
    --cd-space-xl:                3rem;
    --cd-space-2xl:               4rem;
    --cd-space-3xl:               6rem;


    /* ────────────────────────────────────────────────────────
       BORDER-RADIUS (freundlich/rund → Pill-Buttons)
       ────────────────────────────────────────────────────────  */

    --cd-radius-sm:               0.375rem;
    --cd-radius-md:               0.75rem;
    --cd-radius-lg:               1.25rem;
    --cd-radius-pill:             999px;


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

    --cd-shadow-sm:               0 1px 2px rgba(35, 34, 35, 0.06);
    --cd-shadow-md:               0 4px 12px rgba(35, 34, 35, 0.08);
    --cd-shadow-lg:               0 12px 32px rgba(35, 34, 35, 0.12);


    /* ────────────────────────────────────────────────────────
       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);

}