/* ============================================================
   Retourenmaster – Design-Tokens (Single Source of Truth)
   ------------------------------------------------------------
   Werte am Branding von retourenmaster24.com ausgerichtet
   (WordPress/WooCommerce). Markenbild: heller Shop mit weißem
   Header, Grün als Primärfarbe/Akzent, dunkler Footer
   (Navy→Petrol-Verlauf) als roter Faden, Montserrat als Schrift,
   pillenförmige Buttons.
   ALLE Marken-/Layoutwerte leben hier – niemals Hex/px direkt
   in Komponenten, immer var(--rm-…).
   WICHTIG: Elementor → Site Settings → Global Colors & Fonts
   mit exakt denselben Werten pflegen.
   ============================================================ */

:root {
  /* Marke – Werte aus den Elementor Global Colors + Custom-CSS von retourenmaster24.com */
  --rm-primary:        #79394f;   /* Beere/Bordeaux – Hauptmarke: Topbar, Suche, Warenkorb, Footer, Akzente */
  --rm-primary-dark:   #b27e8c;   /* Hover zu primary (Mauve – wie #inquiry-button:hover der Live-Seite) */
  --rm-primary-deep:   #5e2b3d;   /* dunklere Beere – Verläufe / Footer-Ende */
  --rm-primary-soft:   #f6edf0;   /* zarte Beere-Fläche – Navi-Hintergrund, Suchfeld, Tints */

  /* Sekundär & Akzent (warme Erdtöne der Live-Seite) */
  --rm-secondary:      #775146;   /* Braun – Elementor „primary", klassische Buttons */
  --rm-secondary-dark: #cb946d;   /* Karamell – Button-Hover (submit/button:hover) */
  --rm-accent:         #cb946d;   /* Karamell – Akzent (= Elementor „secondary") */

  /* Markenverlauf für dunkle Sektionen/Footer – Beere statt Navy (roter Faden) */
  --rm-gradient-dark:  linear-gradient(160deg, var(--rm-primary) 0%, var(--rm-primary-deep) 100%);

  /* Neutrale (Light-Flächen: Karten, Formulare, Shop-Tabellen) */
  --rm-ink:    #525252;   /* Haupttext auf hell (= secondary/dark der Live-Seite) */
  --rm-ink-on-dark: #f5f7fa;   /* Text auf dunklen Flächen */
  --rm-muted:  #707070;   /* Sekundärtext / Labels */
  --rm-muted-2:#9b9b9b;   /* noch zurückhaltender (gray-dark) */
  --rm-border: #ebebeb;
  --rm-bg:     #ffffff;
  --rm-bg-soft:#f5f7fa;   /* Karten/Panels (= light/gray-light) */

  /* Status (exakt wie Live-Seite) */
  --rm-success: #1c871e;
  --rm-danger:  #b90000;
  --rm-warning: #a56823;

  /* Typografie */
  --rm-font: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --rm-fs-300: .8125rem; --rm-fs-400: 1rem; --rm-fs-500: 1.125rem;
  --rm-fs-600: 1.375rem; --rm-fs-700: 1.875rem;   /* h1 der Live-Seite */
  --rm-weight-medium: 500; --rm-weight-bold: 700;

  /* Spacing */
  --rm-space-1:.25rem; --rm-space-2:.5rem; --rm-space-3:.75rem; --rm-space-4:1rem;
  --rm-space-5:1.5rem; --rm-space-6:2rem; --rm-space-7:3rem;

  /* Form & Layout */
  --rm-radius:8px;          /* Felder, kleine Flächen (Checkout der Live-Seite) */
  --rm-radius-lg:14px;      /* Karten/Panels */
  --rm-radius-btn:20px;     /* Buttons – pillenförmig wie auf der Live-Seite */
  --rm-radius-pill:999px;
  --rm-shadow:0 2px 6px rgba(0,0,0,.05); --rm-shadow-lg:0 10px 30px rgba(0,0,0,.12);
  --rm-tap:44px;            /* Mindest-Tap-Fläche mobil */
  --rm-container:1250px;    /* zentrale Inhaltsbreite (Header, Footer, Widgets) */

  /* Header / Footer (Layout-Höhen & Töne) */
  --rm-topbar-bg:    var(--rm-primary);   /* Beere-Servicezeile oben */
  --rm-topbar-ink:   var(--rm-ink-on-dark);
  --rm-header-bg:    var(--rm-bg);        /* weißer Hauptheader */
  --rm-header-ink:   var(--rm-primary);   /* Beere: Navi, Konto, Warenkorb, Burger */
  --rm-header-h:     76px;                /* Höhe Hauptheader (Logo-Zeile) */
  --rm-nav-bg:       var(--rm-primary-soft); /* zarte Beere-Fläche der Kategorienavigation */
  --rm-nav-border:   #ecd9df;             /* zarte Beere-Trennlinie */
  --rm-mega-bg:      var(--rm-primary);   /* Beere-Panel des Mega-Menüs */
  --rm-mega-ink:     #ffffff;             /* weiße Links im Mega-Menü */
  --rm-mega-hover:   #ffffff;             /* Weiß + Unterstrich als Hover im Mega-Menü (kein Orange) */
  --rm-footer-bg:    var(--rm-primary-soft); /* heller Footer mit zarter Beere */
  --rm-footer-ink:   var(--rm-primary);      /* Beere-Text/Links */
  --rm-footer-muted: var(--rm-primary);      /* Fließtext im Footer (Beere) */
  --rm-z-header:     1000;                /* Sticky-Header über Inhalt */
}