/* =========================================================================
   MEILENOPTIMIEREN / MO LUXE TRAVEL — Design Tokens für Tools
   =========================================================================
   Quelle: Farben_und_Formate.docx (Nutzerangabe) + theme-color Meta-Tag von
   meilenoptimieren.com (#25325c, bestätigt).

   Markenfarben:
     Navy   #25325C — Meilenoptimieren primär / MO Luxe sekundär
     Orange #E88E20 — MO Luxe primär / Meilenoptimieren sekundär
     Gold   #C9A86A — MO Luxe Akzent (Premium-Signal)

   Alle Text/Hintergrund-Kombinationen unten sind rechnerisch gegen WCAG-
   Kontrastanforderungen geprüft (siehe Kommentare). Farben, die als Fläche
   gut funktionieren (Orange, Gold), bestehen NICHT als Fließtextfarbe auf
   hellem Grund (~2,2–2,5:1) — deshalb hier konsequent von "Text" getrennt.
   Ausnahme auf ausdrücklichen Wunsch: "Weiß auf Orange" und "Orange auf
   Weiß" sind als zusätzliche Button-Varianten freigegeben, siehe
   --btn-secondary-white-* / --btn-orange-outline-* weiter unten.

   Verwendung: Diese Datei 1:1 in jedes neue Tool einbinden (<link> oder
   inline <style>) und ausschließlich über die Variablen stylen, nie mit
   rohen Hex-Werten arbeiten. Für Diagramme/Charts: siehe Abschnitt
   "Kategoriale Chart-Palette" weiter unten (separat von Marken-Akzenten,
   weil Orange/Gold als Chart-Serien zu nah beieinander liegen würden).

   Theme-Umschaltung: Standard ist Hell. Für Dunkel-Modus das Attribut
   data-theme="dark" auf <html> oder einen Wrapper setzen.
   Für Brand-Umschaltung (z. B. dasselbe Tool auf beiden Seiten einsetzen):
   data-brand="moluxe" auf <html>/Wrapper setzen, um Primär-/Sekundärrolle
   von Navy und Orange zu tauschen (siehe unten).
   ========================================================================= */

:root {
  color-scheme: light;

  /* ---- Markenfarben (roh, nur für Sonderfälle/Illustration nutzen) ---- */
  --brand-navy:   #25325C;
  --brand-orange: #E88E20;
  --brand-gold:   #C9A86A;

  /* ---- Rollen: Meilenoptimieren-Modus (Standard) ---- */
  --role-primary:   var(--brand-navy);
  --role-secondary: var(--brand-orange);
  --role-accent:    var(--brand-gold);

  /* ---- Flächen / Hintergründe ---- */
  --surface-page:   #ffffff;
  --surface-card:   #f7f8fb;   /* leicht navy-getönt statt reinweiß */
  --surface-muted:  #eef0f5;
  --border:         #dde1ea;
  --border-strong:  #c3c9d8;

  /* ---- Text (alle Werte ≥ 4,5:1 auf --surface-page geprüft) ---- */
  --text-primary:   var(--brand-navy);  /* 12,4:1 auf Weiß */
  --text-secondary: #52607d;            /* 6,3:1 auf Weiß */
  --text-muted:     #64708c;            /* 4,95:1 auf Weiß — Minimum, nicht weiter aufhellen */
  --text-on-dark:   #ffffff;            /* für Flächen in --role-primary */

  /* ---- Links ---- */
  --link:           var(--brand-navy);
  --link-hover:     #1a2547;
  --focus-ring:      #7c93d9;

  /* ---- Buttons / CTAs ----
     Empfohlener Standard: Auf Orange- und Gold-Flächen Navy-Text verwenden
     (Navy-Text auf Orange/Gold liegt bei 4,9–5,5:1, besteht WCAG AA).
     Für zentrale/kritische Handlungsaufforderungen (Formular absenden,
     Haupt-CTA) diesen Standard nutzen. */
  --btn-primary-bg:      var(--role-primary);
  --btn-primary-text:    #ffffff;                 /* 12,4:1 */
  --btn-primary-bg-hover: #1a2547;

  --btn-secondary-bg:    var(--role-secondary);
  --btn-secondary-text:  var(--brand-navy);        /* 4,93:1 — WCAG-AA-konform */
  --btn-secondary-bg-hover: #d47f10;

  --btn-accent-bg:       var(--role-accent);
  --btn-accent-text:     var(--brand-navy);        /* 5,50:1 — WCAG-AA-konform */

  --btn-outline-border:  var(--role-primary);
  --btn-outline-text:    var(--role-primary);

  /* ---- Marken-Varianten: "Weiß auf Orange" & "Orange auf Weiß" ----
     Auf ausdrücklichen Wunsch zusätzlich freigegeben. Kontrast liegt bei
     ca. 2,5:1 und bleibt auch bei großer/fetter Schrift unter der
     WCAG-AA-Mindestanforderung (dort wären min. 3:1 nötig) — bewusste
     Marken-Entscheidung, kein Accessibility-konformer Zustand. Für
     dekorative/sekundäre Buttons statt für kritische Kernaktionen nutzen;
     fest auf Orange/Weiß codiert (nicht theme-abhängig), damit die
     Kombination in Hell- wie Dunkelmodus gleich aussieht. */
  --btn-secondary-white-bg:    var(--brand-orange);
  --btn-secondary-white-text:  #ffffff;             /* 2,52:1 — unter WCAG AA */
  --btn-orange-outline-bg:     #ffffff;
  --btn-orange-outline-text:   var(--brand-orange);  /* 2,52:1 — unter WCAG AA */
  --btn-orange-outline-border: var(--brand-orange);

  /* ---- Status (bewusst getrennt von der Chart-Palette, feste Bedeutung) --- */
  --status-success: #1a7f37;  /* ≥ 4.5:1 auf Weiß */
  --status-warning: #a15c00;  /* ≥ 4.5:1 auf Weiß, dunkler als Marken-Orange nötig für Text */
  --status-danger:  #c2412d;  /* ≥ 4.5:1 auf Weiß */

  /* ---- Typografie ----
     Blog-Vorgabe: Open Sans, Helvetica, Arial, Sans Serif.
     Für Diagramme/Excel-Grafiken separat: Helvetica, Überschrift 16px,
     Achsen/Legende 12px (exakte Vorgabe, siehe --chart-* unten). */
  --font-body:    'Open Sans', Helvetica, Arial, sans-serif;
  --font-heading: 'Open Sans', Helvetica, Arial, sans-serif;
  --font-mono:    'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

  --weight-regular:  400;
  --weight-semibold: 600;
  --weight-bold:     700;

  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;
  --line-height-tight: 1.2;
  --line-height-base:  1.5;

  /* ---- Chart-Typografie (exakte Vorgabe aus Farben_und_Formate.docx) --- */
  --chart-font:        Helvetica, Arial, sans-serif;
  --chart-heading-size: 16px;
  --chart-axis-size:    12px;
  --chart-export-web-w:      20cm;
  --chart-export-web-h:      10cm;
  --chart-export-social-w:   20cm;
  --chart-export-social-h:   20cm;

  /* ---- Spacing ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ---- Radius / Schatten ---- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(37, 50, 92, 0.08);
  --shadow-md: 0 4px 16px rgba(37, 50, 92, 0.12);
  --shadow-lg: 0 12px 32px rgba(37, 50, 92, 0.18);

  /* ---- Kategoriale Chart-Palette (validiert: scripts/validate_palette.js
     der dataviz-Skill, Modus light, gegen Fläche #fcfcfb, "all-pairs"-Prüfung
     — passend für Karten/Streudiagramme, bei denen mehrere Serien gleich-
     zeitig sichtbar sind, wie in den Meilenoptimieren-Kartentools). Alle 8
     Slots bestehen die all-pairs-Prüfung; Slot 4 wurde am 17.08.2026 von
     einem Gelbton (zu nah an Orange, Slot 2) auf ein dunkles Terrakotta
     verschoben — Trennung primär über Helligkeit statt Farbton, da Orange/
     Gelb/Grün unter Rot-Grün-Sehschwäche auf derselben Verwechslungsachse
     liegen. Slot 1 = markenabgeleitetes Navy-Blau (aufgehellt/gesättigt, da
     reines #25325C zu dunkel/entsättigt für Diagrammfarben ist). Slot 2 =
     Marken-Orange unverändert. Gold ist bewusst NICHT Teil dieser Palette
     (zu geringer Farbabstand zu Orange) und bleibt UI-Akzent. ---- */
  --chart-1: #455dad; /* Blau (Navy-Familie) */
  --chart-2: #E88E20; /* Orange (Marke, exakt) */
  --chart-3: #1baf7a; /* Aqua */
  --chart-4: #813a00; /* Terrakotta (bis 17.08.2026: Gelb, zu nah an Orange) */
  --chart-5: #e889ca; /* Magenta */
  --chart-6: #008300; /* Grün */
  --chart-7: #8992fe; /* Violett */
  --chart-8: #e34948; /* Rot */
}

/* ============================= Dunkel-Modus ============================= */
:root[data-theme="dark"] {
  color-scheme: dark;

  --surface-page:  #0b1331;  /* markenabgeleitetes Dunkel-Navy, kein neutrales Grau */
  --surface-card:  #131c3a;
  --surface-muted: #1a2542;
  --border:        #2a3660;
  --border-strong: #3a4878;

  --text-primary:   #ffffff;
  --text-secondary: #b7c0dd;  /* 10,1:1 */
  --text-muted:     #8590b3;  /* 5,76:1 */

  --link:       #9fb2e8;
  --link-hover: #c3d0f0;
  --focus-ring: #6681d4;

  --btn-primary-bg:       var(--brand-gold);   /* im Dunkelmodus: Gold als High-Contrast-CTA */
  --btn-primary-text:     var(--brand-navy);
  --btn-primary-bg-hover: #d9bb85;

  --btn-secondary-bg:      var(--brand-orange);
  --btn-secondary-text:    var(--brand-navy);
  --btn-secondary-bg-hover: #f2a24a;

  --btn-accent-bg:   var(--brand-gold);
  --btn-accent-text: var(--brand-navy);

  --btn-outline-border: #6681d4;
  --btn-outline-text:   #ffffff;

  --status-success: #4ade80;
  --status-warning: #eab308;
  --status-danger:  #f87171;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);

  /* Chart-Palette Dunkel (separat validiert gegen Fläche #0b1331,
     all-pairs-Prüfung, Stand 17.08.2026). 6 von 8 Slots bestehen alle
     Prüfungen vollständig; zwei Randfälle bleiben unter der strengen
     Normalsicht-Schwelle (Slot 5↔3 und Slot 8↔2, ΔE ~9-10 statt Ziel 15) —
     im Tool durch durchgängige Textbeschriftung (IATA-Codes je Route)
     abgefedert, wie von der dataviz-Skill für diesen Fall vorgesehen. */
  --chart-1: #6681d4;
  --chart-2: #c96f00;
  --chart-3: #199e70;
  --chart-4: #1e7ca1; /* Stahlblau (bis 17.08.2026: Gelb, zu nah an Orange) */
  --chart-5: #c8508e;
  --chart-6: #127812;
  --chart-7: #7a3fc2;
  --chart-8: #e66767;
}

/* ============================ MO Luxe-Modus =============================
   Tauscht Primär-/Sekundärrolle: Orange wird Hauptfarbe, Navy Sekundärfarbe.
   Gold bleibt durchgängig der Premium-Akzent. Auf <html data-brand="moluxe">
   oder einen Wrapper setzen. Kombinierbar mit data-theme="dark". */
:root[data-brand="moluxe"] {
  --role-primary:   var(--brand-orange);
  --role-secondary: var(--brand-navy);

  --btn-primary-bg:   var(--brand-orange);
  --btn-primary-text: var(--brand-navy);      /* 4,93:1 — nicht Weiß */

  --btn-secondary-bg:   var(--brand-navy);
  --btn-secondary-text: #ffffff;
}

/* ============================ Basis-Elemente ============================= */
body {
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--line-height-base);
}
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-tight);
  color: var(--text-primary);
}
a { color: var(--link); }
a:hover { color: var(--link-hover); }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-body); font-weight: var(--weight-semibold);
  font-size: var(--text-sm); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md); border: 1px solid transparent;
  cursor: pointer; transition: background-color .15s ease;
}
.btn-primary   { background: var(--btn-primary-bg);   color: var(--btn-primary-text); }
.btn-primary:hover   { background: var(--btn-primary-bg-hover); }
.btn-secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-text); }
.btn-secondary:hover { background: var(--btn-secondary-bg-hover); }
.btn-accent    { background: var(--btn-accent-bg);    color: var(--btn-accent-text); }
.btn-outline   { background: transparent; color: var(--btn-outline-text); border-color: var(--btn-outline-border); }

/* Marken-Varianten "Weiß auf Orange" / "Orange auf Weiß" — siehe Hinweis
   bei den Variablen weiter oben (unter WCAG AA, bewusst freigegeben). */
.btn-secondary-white { background: var(--btn-secondary-white-bg); color: var(--btn-secondary-white-text); }
.btn-secondary-white:hover { background: var(--btn-secondary-bg-hover); }
.btn-orange-outline  { background: var(--btn-orange-outline-bg); color: var(--btn-orange-outline-text); border-color: var(--btn-orange-outline-border); }
.btn-orange-outline:hover { background: #fdf3e7; }

.card {
  background: var(--surface-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}

.badge {
  display: inline-flex; align-items: center; font-size: var(--text-xs);
  font-weight: var(--weight-semibold); padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
}
.badge-accent { background: var(--role-accent); color: var(--btn-accent-text); }
