/* ============================================================
   01-TOKENS.CSS
   Design-Tokens für Gourmet Broker
   ------------------------------------------------------------
   Dark-Theme (laut CD): dunkle Haupt-Hintergründe, helle Schrift,
   Gold als Akzent. Helle „Papier"-Sektionen als Variante.

   Quelle: Corporate Design »Gourmet Broker Brand Overview«
   Stand:  Juni 2026
   ============================================================ */


/* ============================================================
   SCHRIFT — Libre Baskerville (selbst gehostet, DSGVO-konform)
   ------------------------------------------------------------
   Eine Serifenschrift für alles (laut CD):
     Italic  → H1 / Display / Hero + Hervorhebungen, Zitate
     Regular → H2, Fließtext, Buttons
     Bold    → H3, Karten-Titel

   TODO: Schriftdateien laden (google-webfonts-helper):
         https://gwfh.mranftl.com/fonts/libre-baskerville
         Charset latin. Schnitte: regular, italic, 700, 700italic.
         Dateien → assets/fonts/libre-baskerville/
         Versionsnummer (v…) im Dateinamen ggf. an src anpassen.
   ============================================================ */

@font-face {
  font-display: swap;
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/libre-baskerville/libre-baskerville-v14-latin-regular.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Libre Baskerville';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/libre-baskerville/libre-baskerville-v14-latin-italic.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/libre-baskerville/libre-baskerville-v14-latin-700.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Libre Baskerville';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/libre-baskerville/libre-baskerville-v14-latin-700italic.woff2') format('woff2');
}

:root {

    /* ────────────────────────────────────────────────────────
       FARBEN (aus CD, mit den dort definierten Rollen)
       ────────────────────────────────────────────────────────
       #262122  Haupt-Hintergrund (Schwarz)
       #9E7659  Haupt-Hintergrund warm (Camel/Tan)
       #C89116  Akzent (Gold)
       #17262F  Copy/Text (Navy) — v.a. auf hellen Flächen
       #5F2B2A  Sekundär-Hintergrund (Bordeaux)
       #EBEBEC  Text hell (auf Dunkel)
       ────────────────────────────────────────────────────────  */

    /* — Grundflächen (dunkel) —————————————————————————————— */
    --cd-color-bg:                #262122;  /* Haupt-Hintergrund (Schwarz) */
    --cd-color-surface:           #322B2A;  /* leicht erhöhte Fläche (Cards, Inputs) */

    /* — Text (hell auf Dunkel) ————————————————————————————— */
    --cd-color-text:              #EBEBEC;  /* Standard-Text hell */
    --cd-color-text-muted:        #B7AFA6;  /* gedämpfter Text (warm) */

    /* — Primär / Akzent / Aktion (Gold) ———————————————————— */
    --cd-color-primary:           #C89116;  /* Gold — Buttons, Links, Akzente */
    --cd-color-primary-soft:      #A9790F;  /* dunkleres Gold — Hover */
    --cd-color-primary-tint:      rgba(200, 145, 22, 0.12);  /* Gold 12 % — Flächen */
    --cd-color-text-on-primary:   #262122;  /* dunkler Text auf Gold-Flächen */

    /* — Weitere Marken-Farben ——————————————————————————————— */
    --cd-color-burgundy:          #5F2B2A;  /* Sekundär-Hintergrund */
    --cd-color-tan:               #9E7659;  /* warmer Hintergrund/Akzent */
    --cd-color-navy:              #17262F;  /* tiefes Navy — Copy auf Hell, tiefe Flächen */

    /* — Rahmen (dezent auf Dunkel) ————————————————————————— */
    --cd-color-border:            rgba(235, 235, 236, 0.16);


    /* ────────────────────────────────────────────────────────
       HELLE „PAPIER"-SEKTIONEN (Editorial-Variante)
       ────────────────────────────────────────────────────────
       Für .cd-section--paper: heller Fond mit Navy-Copy.
       ────────────────────────────────────────────────────────  */

    --cd-color-paper:             #F3F0E9;  /* warmes Papier/Creme */
    --cd-color-paper-text:        #17262F;  /* Navy-Copy auf Papier */
    --cd-color-paper-muted:       #5B5048;  /* gedämpfte Copy auf Papier */
    --cd-color-paper-border:      #DED8CC;  /* Rahmen auf Papier */


    /* ────────────────────────────────────────────────────────
       TYPOGRAFIE — Libre Baskerville (Serif, für alles)
       ────────────────────────────────────────────────────────  */

    --cd-font-heading: "Libre Baskerville", Georgia, "Times New Roman", serif;
    --cd-font-body:    "Libre Baskerville", Georgia, "Times New Roman", serif;
    --cd-font-family:  var(--cd-font-body);

    /* — Font-Weights (Libre Baskerville: nur 400 / 700) — */
    --cd-fw-medium:               400;   /* Regular — Body, H2, Buttons */
    --cd-fw-semibold:             700;   /* Bold — H3, Karten-Titel */

    /* — Schriftgrößen (Baskerville läuft groß → moderat) — */
    --cd-fs-h1:                   3.25rem;   /* 52px */
    --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 (Serif braucht etwas mehr Luft) — */
    --cd-lh-tight:                1.2;    /* Headlines */
    --cd-lh-normal:               1.55;   /* Body */
    --cd-lh-relaxed:              1.75;   /* Lange Lesetexte */


    /* ────────────────────────────────────────────────────────
       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
       ────────────────────────────────────────────────────────
       Buttons als Pill (laut CD „Rounded Button"), Cards dezent.
       ────────────────────────────────────────────────────────  */

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


    /* ────────────────────────────────────────────────────────
       SCHATTEN (auf Dunkel: tiefer & satter)
       ────────────────────────────────────────────────────────  */

    --cd-shadow-sm:               0 1px 2px rgba(0, 0, 0, 0.30);
    --cd-shadow-md:               0 6px 18px rgba(0, 0, 0, 0.40);
    --cd-shadow-lg:               0 16px 40px rgba(0, 0, 0, 0.50);


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

}