/* CoupleMinutes - Design-Tokens
 *
 * ERZEUGT AUS design/tokens.json - Aenderungen hier gehen verloren.
 * Erzeugt am 27.08.2026 mit scripts/design-tokens.ps1
 *
 * Herkunft der Werte: Elementor-Kit #41 auf coupleminutes.de
 */

:root {

  /* --- Farbe ------------------------------------------------- */
  /* Textfarbe der Seite und Farbe des Haupt-Buttons */
  --cm-color-ink: #25323A;
  /* Grundflaeche, Karten, Text auf farbigem Grund */
  --cm-color-surface: #FFFFFF;
  /* gedaempfte Variante von ink, sehr sparsam eingesetzt */
  --cm-color-ink-muted: #546763;
  /* Produktlinie 'Lighthearted moments' - Salbei */
  --cm-color-product-lighthearted: #74958E;
  /* Produktlinie 'Heartfelt moments' - Koralle. Zusaetzlich Grund des Kundenstimmen-Abschnitts */
  --cm-color-product-heartfelt: #E9795E;
  /* Produktlinie 'Intimate moments' - Flieder */
  --cm-color-product-intimate: #9192B6;
  /* Hervorhebung: Grund des Bundle-Abschnitts 'The trio', Akzente in der Kopfzeile */
  --cm-color-signal: #F79E4B;
  /* dunkle Variante von signal, einmal eingesetzt */
  --cm-color-signal-strong: #9B3A21;
  /* helle Flaeche, warm */
  --cm-color-tint-peach: #FFE3C8;
  /* helle Flaeche, rosé - der haeufigste Flaechenton nach Weiss */
  --cm-color-tint-blush: #FCEBE7;
  /* helle Flaeche, gelb */
  --cm-color-tint-lemon: #FBE77E;
  /* product-lighthearted mit 17 % Deckung, als Auflage ueber Bildern */
  --cm-color-tint-sage: #74958E2B;

  /* --- Schriftfamilien --------------------------------------- */
  --cm-font-body: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --cm-font-display: "ClickClack", "Fira Sans", Georgia, serif;

  /* --- Schriftgroessen --------------------------------------- */
  --cm-size-xs: 11px;
  --cm-size-sm: 13px;
  --cm-size-md: 15px;
  --cm-size-lg: 17px;
  --cm-size-h7: 24px;
  --cm-size-h6: 15px;
  --cm-size-h5: 20px;
  --cm-size-h4: 25px;
  --cm-size-h3: 33px;
  --cm-size-h2: 48px;
  --cm-size-h1: 55px;

  /* --- Zeilenhoehen ------------------------------------------ */
  --cm-leading-xs: 11px;
  --cm-leading-sm: 18px;
  --cm-leading-md: 20px;
  --cm-leading-lg: 22px;
  --cm-leading-h7: 24px;
  --cm-leading-h6: 20px;
  --cm-leading-h5: 23px;
  --cm-leading-h4: 25px;
  --cm-leading-h3: 33px;
  --cm-leading-h2: 50px;
  --cm-leading-h1: 61px;

  /* --- Schriftstaerken --------------------------------------- */
  --cm-weight-regular: 400;
  --cm-weight-medium: 500;
  --cm-weight-bold: 700;

  /* --- Masse ------------------------------------------------- */
  --cm-content-width: 1200px;
  --cm-content-width-mail: 600px;
  --cm-radius-pill: 100px;

  /* --- Schriftstile als Kurzform ----------------------------- */
  /* Benutzung:  font: var(--cm-text-h2); */
  --cm-text-body: 400 15px/20px var(--cm-font-body);
  --cm-text-body-bold: 700 15px/23px var(--cm-font-body);
  --cm-text-lead: 400 17px/22px var(--cm-font-body);
  --cm-text-lead-bold: 700 17px/22px var(--cm-font-body);
  --cm-text-small: 400 13px/18px var(--cm-font-body);
  --cm-text-small-bold: 500 13px/20px var(--cm-font-body);
  --cm-text-caption: 400 11px/11px var(--cm-font-body);
  --cm-text-button: 700 17px/17px var(--cm-font-body);
  --cm-text-h1: 400 55px/61px var(--cm-font-display);
  --cm-text-h2: 400 48px/50px var(--cm-font-display);
  --cm-text-h3: 400 33px/33px var(--cm-font-display);
  --cm-text-h4: 400 25px/25px var(--cm-font-display);
  --cm-text-h5: 400 20px/23px var(--cm-font-display);
  --cm-text-h6: 400 15px/20px var(--cm-font-display);
  --cm-text-h7: 700 24px/24px var(--cm-font-body);
}

@media (max-width: 767px) {

  :root {
    --cm-text-body: 400 14px/19px var(--cm-font-body);
    --cm-text-body-bold: 700 14px/23px var(--cm-font-body);
    --cm-text-lead: 400 14px/19px var(--cm-font-body);
    --cm-text-lead-bold: 700 14px/19px var(--cm-font-body);
    --cm-text-small: 400 12px/17px var(--cm-font-body);
    --cm-text-small-bold: 500 12px/20px var(--cm-font-body);
    --cm-text-caption: 400 10px/10px var(--cm-font-body);
    --cm-text-button: 700 15px/17px var(--cm-font-body);
    --cm-text-h1: 400 36px/39px var(--cm-font-display);
    --cm-text-h2: 400 34px/37px var(--cm-font-display);
    --cm-text-h3: 400 29px/29px var(--cm-font-display);
    --cm-text-h4: 400 23px/23px var(--cm-font-display);
    --cm-text-h5: 400 19px/22px var(--cm-font-display);
    --cm-text-h6: 400 14px/19px var(--cm-font-display);
    --cm-text-h7: 700 21px/21px var(--cm-font-body);
  }
}