/* ============================================================================
   NOVAchild · ZENTRALE BRAND-/CORPORATE-DESIGN-STEUERUNG  ·  Design Heizungen
   ----------------------------------------------------------------------------
   White-Label Farb-Token-System. ALLE Markenfarben werden hier zentral gesetzt;
   custom.css, checkout-premium.css und checkout-onepage.css referenzieren
   ausschließlich diese Tokens über var(--token). In den CSS-Dateien gibt es
   KEINE hartkodierten Markenfarben mehr.

   >>> FÜR EINEN NEUEN SHOP: NUR DIESE DATEI + custom/brand_config.tpl ÄNDERN. <<<

   Diese Datei wird in layout/header.tpl als ERSTES Stylesheet geladen, damit
   alle nachfolgenden CSS-Dateien die Tokens kennen.

   Jedes Token ist mit den Flächen beschriftet, die es steuert – so ist sofort
   sichtbar, was sich beim Ändern verändert.
   ============================================================================ */

:root {

  /* ==========================================================================
     1) BRAND CORE  –  die tragenden Markenfarben (steuern die gesamte UI)
     ========================================================================== */

  /* PRIMÄRFARBE der Marke.
     Steuert: Primär-/CTA-Buttons, „In den Warenkorb" (ATC), roter Haupt-Header,
     Links, Preis-Highlight, aktive Variante, Checkout-Primärbutton, Akzentlinien. */
  --brand-primary:        #930a08;

  /* Gleiche Farbe als RGB-Tripel – für halbtransparente Schatten/Glow/Focus via rgba().
     WICHTIG: bei Farbwechsel synchron zu --brand-primary anpassen. */
  --brand-primary-rgb:    147, 10, 8;

  /* HOVER / ACTIVE.
     Steuert: Hover- und Aktiv-Zustände ALLER Buttons (inkl. ATC + Checkout),
     Link-Hover, gedrückte Zustände. */
  --brand-primary-dark:   #7a0806;

  /* Tiefste Abstufung – für Verläufe und tiefe Schatten. */
  --brand-primary-deep:   #760705;

  /* Textfarbe AUF der Brandfarbe (weiße Schrift/Icon auf rotem Button). */
  --brand-on-primary:     #ffffff;

  /* Sekundärer Marken-Akzent (edles Gold/Beige, z. B. Versand-Hinweis Mobile). */
  --brand-accent:         #C3996B;


  /* ==========================================================================
     2) TOPBAR  –  dunkle obere Promo-/Trust-Leiste
     ========================================================================== */

  /* Hintergrundfarbe der oberen dunklen Topbar (#header-top-bar / .dh-topbar). */
  --brand-topbar-bg:      #020713;

  /* Gleiche Farbe als RGB-Tripel (für rgba-Overlays auf der Topbar). */
  --brand-topbar-rgb:     2, 7, 19;

  /* Textfarbe in der Topbar. */
  --brand-topbar-text:    #ffffff;


  /* ==========================================================================
     3) STATUS / SEMANTIK
     ========================================================================== */

  /* Positiv / „auf Lager" / „Kostenloser Versand" / sichere Zahlung (grün-teal). */
  --brand-success:        #007665;

  /* Highlight-Akzent.
     Steuert: Warenkorb-Zähler-Badge, aktive Checkbox/Radio, Hinweis-Badges.
     Auf die Markenfarbe (Rot) gesetzt. Für ein Gold-Badge stattdessen:
       --brand-highlight: #f8bf00; --brand-highlight-rgb: 248,191,0; --brand-on-highlight: #525252; */
  --brand-highlight:      var(--brand-primary);
  --brand-highlight-rgb:  var(--brand-primary-rgb);   /* für Focus-Ring rgba() */
  --brand-on-highlight:   #ffffff;                    /* weiße Zahl/Text auf rotem Badge */

  /* Helle Marken-Tints – für Rahmen/Hintergründe von ausgewählten/aktiven/Info-
     Elementen (leiten sich aus der Primärfarbe ab, immer dezent rot statt blau). */
  --brand-tint-soft:      rgba(var(--brand-primary-rgb), .10);
  --brand-tint:           rgba(var(--brand-primary-rgb), .20);
  --brand-tint-strong:    rgba(var(--brand-primary-rgb), .32);


  /* ==========================================================================
     4) NEUTRALE PALETTE  (Text & Flächen)
     Markenneutral – in der Regel unverändert lassen, pro Shop optional anpassbar.
     ========================================================================== */
  --color-text:           #111827;   /* Haupttext / Überschriften */
  --color-text-muted:     #4b5563;   /* Fließtext gedämpft */
  --color-text-soft:      #6b7280;   /* sekundär */
  --color-line:           #e5e7eb;   /* Standard-Trennlinien */
  --color-surface:        #ffffff;   /* Kartenflächen */
  --color-surface-soft:   #f7f8fa;   /* leicht abgesetzte Flächen */

  /* === TYPOGRAFIE (markenweit) =========================================
     Display = Überschriften/Menü/Buttons, Body = Fließtext/UI.
     Geladen in layout/header.tpl via Google Fonts. Für neuen Shop hier tauschen. */
  --font-display: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;


  /* ==========================================================================
     5) EIGENE FARBEN ERGÄNZEN
     Hier können pro Shop zusätzliche Marken-/Akzentfarben definiert und in
     custom.css über var(--mein-token) verwendet werden. Beispiel:
       --brand-secondary:   #2f7d46;
       --brand-special:     #ffd166;
     ========================================================================== */


  /* ==========================================================================
     6) VORLAGE: NEUEN SHOP UMFÄRBEN
     Für einen kompletten Rebrand genügt es, die folgenden Kernwerte zu ersetzen –
     Buttons, ATC, Hover, Links, Header, Topbar, Checkout folgen automatisch.

       Beispiel „grüne Marke":
         --brand-primary:      #1f7a3d;
         --brand-primary-rgb:  31, 122, 61;
         --brand-primary-dark: #18632f;
         --brand-primary-deep: #124c24;
         --brand-accent:       #e0a423;
         --brand-topbar-bg:    #0c1f14;
         --brand-topbar-rgb:   12, 31, 20;
     ========================================================================== */
}