/* ============================================================
   variables.css – LP-spezifische Farbvariablen
   
   Rollen:
     primary     = Hauptakzentfarbe (CTA, Links, Pfeile)
     primary-hov = Hover-Zustand der Primärfarbe
     bg          = Seitenhintergrund
     bg-subtle   = Abschnittshintergrund (z.B. grau-50)
     surface     = Kartenoberfläche
     border      = Standard-Rahmenfarbe
     text        = Haupttextfarbe
     text-muted  = Abgeschwächter Text
     nav-bg      = Navigationshintergrund
     nav-text    = Navigationstext
     footer-bg   = Footerhintergrund
     footer-text = Footertext
     banner-bg   = Newsletter-Banner Hintergrund
     banner-text = Newsletter-Banner Text
   ============================================================ */

/* ── SOFT SKILLS HUB (sk) ─────────────────────────────────── */
:root,
[data-lp="sk"] {
  --lp-sk-primary:      #e67e22;
  --lp-sk-primary-hov:  #d35400;
  --lp-sk-secondary:    #5d6dff;
  --lp-sk-secondary-hov:#041392;
  --lp-sk-bg:           #E8EEF2;
  --lp-sk-bg-subtle:    #fafafa;
  --lp-sk-surface:      #ffffff;
  --lp-sk-border:       #e8e8e8;
  --lp-sk-text:         #0a0a0a;
  --lp-sk-text-muted:   #6b6b6b;
  --lp-sk-nav-bg:       rgba(255, 255, 255, 0.85);
  --lp-sk-nav-text:     #0a0a0a;
  --lp-sk-footer-bg:    #0a0a0a;
  --lp-sk-footer-text:  #ffffff;
  --lp-sk-banner-bg:    #e67e22;
  --lp-sk-banner-text:  #ffffff;
  --lp-sk-meer-bg:      #1a30ff;  /* meer-banner background only           */
  --lp-sk-primary-text: #b35200;  /* accessible orange for text on light bg */
}

/* ============================================================
   MAPPED TOKENS – main.css greift nur hierauf zu.
   Je LP werden diese auf die LP-spezifischen Vars gemappt.
   ============================================================ */
:root,
[data-lp="sk"] { --lp-primary: var(--lp-sk-primary); --lp-primary-hov: var(--lp-sk-primary-hov); --lp-secondary: var(--lp-sk-secondary); --lp-secondary-hov: var(--lp-sk-secondary-hov); --lp-bg: var(--lp-sk-bg); --lp-bg-subtle: var(--lp-sk-bg-subtle); --lp-surface: var(--lp-sk-surface); --lp-border: var(--lp-sk-border); --lp-text: var(--lp-sk-text); --lp-text-muted: var(--lp-sk-text-muted); --lp-nav-bg: var(--lp-sk-nav-bg); --lp-nav-text: var(--lp-sk-nav-text); --lp-footer-bg: var(--lp-sk-footer-bg); --lp-footer-text: var(--lp-sk-footer-text); --lp-banner-bg: var(--lp-sk-banner-bg); --lp-banner-text: var(--lp-sk-banner-text); --lp-meer-bg: var(--lp-sk-meer-bg); --lp-primary-text: var(--lp-sk-primary-text); }

/* ── DARK MODE ────────────────────────────────────────────── */
/* Overrides only the mapped tokens. LP-specific vars stay intact. */
[data-theme="dark"] {
  --lp-bg:          #111111;
  --lp-bg-subtle:   #1a1a1a;
  --lp-surface:     #1f1f1f;
  --lp-border:      #2e2e2e;
  --lp-text:        #efefef;       /* 13.5:1 on #111 – AAA */
  --lp-text-muted:  #909090;       /*  5.7:1 on #111 – AA  */
  --lp-nav-bg:      rgba(17, 17, 17, 0.88);
  --lp-nav-text:    #efefef;
  --lp-primary-text: var(--lp-primary);  /* orange passes on dark bg */
  color-scheme:     dark;
}