/* Theme: magic — Magisches IT-Systemhaus
   Brand: Mystisches Lila, elektrisches Violett, Gold-Highlights
   Primary: #6a37a3 (electric purple) | Gold: #d4af37
   Atmosphere: Magical, Creative, Otherworldly
   ──────────────────────────────────────────────────────────
   Default: Dark (theme_default via tenant-identity, JS-controlled)
   CSS default: Light (validator-compatible :root,[data-theme="light"])
   Dark: deep purple-black via [data-theme="dark"]
   ────────────────────────────────────────────────────────── */
@import url('../../../b2b/solution-provider/assets/style.css');

/* ═══ LIGHT MODE ════════════════════════════════════════════
   Pergament & Kristall — warm-violett, goldene Akzente.
   Für Nutzer die helles Ambiente bevorzugen.
   ════════════════════════════════════════════════════════════ */
:root,
[data-theme="light"] {
  /* Backgrounds — Pergament, warm */
  --iio-bg:           #f8f4ff;
  --iio-bg-subtle:    #fdfaff;
  --iio-bg-raised:    #ffffff;
  --iio-bg-sunken:    #f0e8ff;

  /* Surfaces */
  --iio-surface:      #ffffff;
  --iio-surface-soft: #faf6ff;
  --iio-surface-mid:  #f2e8ff;

  /* Schrift — tiefes Dunkelviolett */
  --iio-ink:          #1a0a30;
  --iio-ink-soft:     #2e1650;
  --iio-muted:        #6040a0;
  --iio-muted-light:  #9870c8;
  --iio-on-accent:    #ffffff;

  /* Borders — lavendel */
  --iio-line:         #d8c4f0;
  --iio-line-strong:  #b898e0;
  --iio-line-subtle:  #ece4f8;

  /* Akzent — elektrisches Violett, dunkel genug für WCAG AA (#4a1e8a: white-on-it ≥ 11.4)
     Deeper than #6a37a3 to guarantee white text contrast ≥ 4.5 */
  --iio-accent:       #4a1e8a;
  --iio-accent-mid:   #6a37a3;
  --iio-accent-light: #ede0ff;
  --iio-accent-hover: #360d70;

  /* Shell header */
  --iio-h-bg:         #f6f0ff;
  --iio-h-ink:        #1a0a30;
  --iio-h-muted:      #7050a8;
  --iio-h-line:       #d8c4f0;

  /* Semantic status */
  --iio-ok:           #1a8050;
  --iio-ok-bg:        #d4f2e4;
  --iio-ok-line:      #80d8b0;
  --iio-warn:         #a07820;
  --iio-warn-bg:      #fef8e0;
  --iio-warn-line:    #d4af60;
  --iio-risk:         #b02060;
  --iio-risk-bg:      #ffe0ee;
  --iio-risk-line:    #e890b8;
  --iio-info:         #3058c8;
  --iio-info-bg:      #e0e8ff;
  --iio-info-line:    #98b0f0;

  /* Tables & tabs */
  --iio-thead-bg:     #f0e4ff;
  --iio-tr-hover:     #f8f0ff;
  --iio-tr-active:    #ede0ff;
  --iio-tab-bg:       #ede0ff;
  --iio-tab-active-bg:  #e0ceff;
  --iio-tab-active-ink: #4a1e8a;

  /* Code blocks */
  --iio-code-bg:      #f4ecff;
  --iio-code-ink:     #4a1880;
  --iio-pre-bg:       #faf6ff;
  --iio-pre-line:     #d8c4f0;

  /* Shadows */
  --iio-shadow-sm:    0 1px 4px rgba(60,20,120,.08);
  --iio-shadow-md:    0 4px 14px rgba(60,20,120,.12);
  --iio-shadow-lg:    0 10px 30px rgba(60,20,120,.16);
}

/* ═══ DARK MODE (PRIMARY — magic default) ═══════════════════
   Tiefes Purpur-Schwarz mit elektrischen Violett-Akzenten
   und Gold-Highlights — wie ein magisches Grimoire.
   ════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  /* Backgrounds — tiefstes Purpur-Schwarz */
  --iio-bg:           #0e0a18;
  --iio-bg-subtle:    #120e20;
  --iio-bg-raised:    #1a1228;
  --iio-bg-sunken:    #080510;

  /* Surfaces — glänzendes Dunkelviolett */
  --iio-surface:      #160e26;
  --iio-surface-soft: #1e1430;
  --iio-surface-mid:  #261a3a;

  /* Schrift — mystisches Perlweiß */
  --iio-ink:          #f0e8ff;
  --iio-ink-soft:     #d8c8f4;
  --iio-muted:        #9a78c8;
  --iio-muted-light:  #6a4a98;
  --iio-on-accent:    #ffffff;

  /* Borders — purpurne Kristalllinien */
  --iio-line:         #2e1a50;
  --iio-line-strong:  #4a2878;
  --iio-line-subtle:  #1e1038;

  /* Akzent — elektrisches Violett, aufgehellt für dunkle Flächen */
  --iio-accent:       #9a50e8;
  --iio-accent-mid:   #b870ff;
  --iio-accent-light: #1a0830;
  --iio-accent-hover: #c080ff;

  /* Shell header */
  --iio-h-bg:         #080510;
  --iio-h-ink:        #f0e8ff;
  --iio-h-muted:      #7a58a8;
  --iio-h-line:       #2e1a50;

  /* Semantic status — magische Farben */
  --iio-ok:           #40d890;
  --iio-ok-bg:        #0a2818;
  --iio-ok-line:      #185840;
  --iio-warn:         #d4af37;
  --iio-warn-bg:      #2a1e00;
  --iio-warn-line:    #5a4000;
  --iio-risk:         #e85090;
  --iio-risk-bg:      #320818;
  --iio-risk-line:    #681030;
  --iio-info:         #70b0ff;
  --iio-info-bg:      #0c1830;
  --iio-info-line:    #1a3860;

  /* Tables & tabs */
  --iio-thead-bg:     #1a1030;
  --iio-tr-hover:     #211638;
  --iio-tr-active:    #2a1a48;
  --iio-tab-bg:       #160e28;
  --iio-tab-active-bg:  #241640;
  --iio-tab-active-ink: #b870ff;

  /* Code blocks — Grimoire-Ästhetik */
  --iio-code-bg:      #1e1030;
  --iio-code-ink:     #c090f8;
  --iio-pre-bg:       #0a0618;
  --iio-pre-line:     #2e1a50;

  /* Shadows — magisches Glühen */
  --iio-shadow-sm:    0 2px 8px rgba(100,40,180,.35);
  --iio-shadow-md:    0 6px 20px rgba(80,20,160,.50), 0 0 0 1px rgba(100,40,200,.12);
  --iio-shadow-lg:    0 12px 40px rgba(60,10,140,.65);
}

/* ═══ SYSTEM DARK PREFERENCE ════════════════════════════════
   Magic default = dark; system dark preference reinforces magic.
   ════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --iio-bg:           #0e0a18;
    --iio-bg-subtle:    #120e20;
    --iio-bg-raised:    #1a1228;
    --iio-bg-sunken:    #080510;
    --iio-surface:      #160e26;
    --iio-surface-soft: #1e1430;
    --iio-surface-mid:  #261a3a;
    --iio-ink:          #f0e8ff;
    --iio-ink-soft:     #d8c8f4;
    --iio-muted:        #9a78c8;
    --iio-muted-light:  #6a4a98;
    --iio-on-accent:    #ffffff;
    --iio-line:         #2e1a50;
    --iio-line-strong:  #4a2878;
    --iio-line-subtle:  #1e1038;
    --iio-accent:       #9a50e8;
    --iio-accent-mid:   #b870ff;
    --iio-accent-light: #1a0830;
    --iio-accent-hover: #c080ff;
    --iio-h-bg:         #080510;
    --iio-h-ink:        #f0e8ff;
    --iio-h-muted:      #7a58a8;
    --iio-h-line:       #2e1a50;
    --iio-ok:           #40d890;
    --iio-ok-bg:        #0a2818;
    --iio-ok-line:      #185840;
    --iio-warn:         #d4af37;
    --iio-warn-bg:      #2a1e00;
    --iio-warn-line:    #5a4000;
    --iio-risk:         #e85090;
    --iio-risk-bg:      #320818;
    --iio-risk-line:    #681030;
    --iio-info:         #70b0ff;
    --iio-info-bg:      #0c1830;
    --iio-info-line:    #1a3860;
    --iio-thead-bg:     #1a1030;
    --iio-tr-hover:     #211638;
    --iio-tr-active:    #2a1a48;
    --iio-tab-bg:       #160e28;
    --iio-tab-active-bg:  #241640;
    --iio-tab-active-ink: #b870ff;
    --iio-shadow-sm:    0 2px 8px rgba(100,40,180,.35);
    --iio-shadow-md:    0 6px 20px rgba(80,20,160,.50);
    --iio-shadow-lg:    0 12px 40px rgba(60,10,140,.65);
  }
}

/* ═══ TYPOGRAPHY ════════════════════════════════════════════
   Georgia/Palatino: zeitloser Charakter, leicht literarisch —
   passt zur Grimoire-Ästhetik des Magischen IT-Systemhauses.
   Inter als Fallback für UI-Elemente und technische Texte.
   ════════════════════════════════════════════════════════════ */
html,
body {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

h1, h2, h3 {
  font-family: 'Palatino Linotype', 'Book Antiqua', 'Palatino', Georgia, serif;
  letter-spacing: 0.02em;
}

/* ═══ MAGIC ATMOSPHERE ══════════════════════════════════════
   Subtiles Glühen im Hintergrund — erzeugt magische Tiefe
   ohne Performance-Einbußen.
   ════════════════════════════════════════════════════════════ */
[data-theme="dark"] body {
  background:
    radial-gradient(circle at 20% -8%, rgba(120, 40, 220, 0.22), transparent 40%),
    radial-gradient(circle at 80% 5%, rgba(212, 175, 55, 0.12), transparent 35%),
    radial-gradient(circle at 50% 100%, rgba(80, 20, 160, 0.18), transparent 45%),
    var(--iio-bg);
}

/* Goldener Shimmer-Effekt für Karten im Dark Mode */
[data-theme="dark"] .card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(212, 175, 55, 0.4) 30%,
    rgba(154, 80, 232, 0.5) 50%,
    rgba(212, 175, 55, 0.4) 70%,
    transparent
  );
  border-radius: var(--iio-r-lg) var(--iio-r-lg) 0 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  body {
    background: var(--iio-bg) !important;
  }
}

/* ═══ PORTAL BRIDGE ═════════════════════════════════════════════════════
   Maps --iio-* tokens to portal CSS vars (--accent, --bg etc.)
   This makes the theme work in the IIO Portal without JS.
   ═══════════════════════════════════════════════════════════════════════ */
:root,
[data-theme="light"],
[data-theme="dark"] {
  --accent:        var(--iio-accent);
  --accent-fg:     var(--iio-on-accent, #ffffff);
  --tenant-accent: var(--iio-accent);
  --bg:            var(--iio-bg);
  --surface:       var(--iio-surface);
  --surface-2:     var(--iio-surface-soft, var(--iio-surface));
  --text:          var(--iio-ink);
  --text-1:        var(--iio-ink);
  --text-2:        var(--iio-muted);
  --text-3:        var(--iio-muted-light, var(--iio-muted));
  --border:        var(--iio-line);
  --border-hover:  var(--iio-line-strong, var(--iio-line));
  --green:         var(--iio-ok);
  --amber:         var(--iio-warn);
  --red:           var(--iio-risk);
}