/* ==========================================================================
   MyVibeID Brand Tokens
   --------------------------------------------------------------------------
   Wird via <link rel="stylesheet"> nur auf MyVibeID-Domains geladen
   (app.myvibeid.com und Stages dev/alpha/beta). Definiert die semantischen
   Token-Werte, die von den brand-agnostischen Utility-Klassen in globals.css
   (z.B. .btn-primary, .text-accent, .border-primary) konsumiert werden.

   Source-Code referenziert NIE die konkreten Farben — nur die Utility-Klassen.
   Dadurch kann diese Datei bei Brand-Split isoliert mitgenommen oder
   ersetzt werden, ohne .tsx-Files anzufassen.
   ========================================================================== */

:root {
  /* Primary — Hauptinteraktionsfarbe (Buttons, Fokus, Selektion) */
  --color-primary: #6fa491;
  --color-primary-hover: #003e52;
  --color-primary-text: #ffffff;
  --color-primary-hover-text: #ffffff;

  /* Accent — Emphasis-Farbe (Links, Preise, Highlights)
     Bei MyVibeID deckt Primary auch Accent-Rolle ab (dezente Palette) */
  --color-accent: #6fa491;
  --color-accent-hover: #003e52;

  /* Textfarben */
  --color-heading: #003e52;
  --color-body-text: #072c33;
  --color-text-secondary: #c5d9d2;
  --color-text-on-dark: #ffffff;
  --color-text-on-primary: #ffffff;

  /* Borders */
  --color-border-secondary: #c5d9d2;

  /* Solid Surface-Backgrounds */
  --color-bg-secondary: #c5d9d2;
  --color-bg-dark: #003e52;
  --color-bg-light: #f0f7f4;

  /* Transparente Surface-Tints für subtile Hintergründe/Hover-States */
  --color-primary-subtle: rgba(111, 164, 145, 0.1);
  --color-primary-muted: rgba(111, 164, 145, 0.3);
  --color-accent-subtle: rgba(111, 164, 145, 0.1);
  --color-accent-muted: rgba(111, 164, 145, 0.3);

  /* Dark-Mode-Varianten für subtle Surface-Tints */
  --color-primary-subtle-dark: rgba(111, 164, 145, 0.3);
  --color-accent-subtle-dark: rgba(170, 198, 137, 0.2);

  /* Geometry */
  --radius-box: 10px;
  --radius-pill: 9999px;

  /* Typography — Headline-Block (Hero/Section-Titles) */
  --font-headline: var(--font-red-hat-display), "Red Hat Display", sans-serif;
  --font-headline-weight: 700;
  --font-headline-size: 1.8rem;
  --font-headline-transform: none;
  --font-headline-spacing: normal;

  /* Brand-Gradient (für Hero-/Product-Image-Fallback-Flächen) */
  --bg-gradient-brand: linear-gradient(
    155deg,
    #aac689 7%,
    #6fa491 40%,
    #6fa491 60%,
    #003e52 100%
  );
}