/* LightDraft — Theme-Overrides.
 *
 * Nachbau der Design-Sprache von https://alte-knochen.de/lightdraft:
 *   - dunkles Marineblau-Schwarz (#0E1117) mit gestaffelten Flächen,
 *   - Cyan-Primärakzent (#26C6DA) + Petrol-Sekundär (#00838F/#00ACC1),
 *   - Gradient-Buttons mit Cyan-Glow, abgerundete Karten, sanfte Radial-Glows.
 *
 * Mechanik (Slice 83/135/157): index.php setzt --brand-accent/--brand-bg/--brand-fg
 * INLINE aus den site_settings (gefüttert aus theme.json#branding_defaults beim
 * Theme-Aktivieren). Die kanonischen Vars lösen per Indirection auf:
 *   --bg:var(--brand-bg)  --bg-2:var(--brand-bg-2)  --bg-3:var(--brand-bg-3)
 *   --fg:var(--brand-fg)  --fg-mute:var(--brand-fg-mute)  --fg-dim:var(--brand-fg-dim)
 *   --line:var(--brand-line)  --line-soft:var(--brand-line-soft)
 *   --red:var(--brand-accent)  (= Akzent; hier Cyan)
 * Dieses File setzt die ZUSÄTZLICHEN --brand-*-Sub-Vars (bg-2/bg-3/line/fg-mute…),
 * die branding_defaults nicht abdeckt, plus die Komponenten-Eigenheiten. Der
 * Attribut-Selektor [data-active-theme] hat höhere Spezifität als das :root des
 * Skeletons → gewinnt sauber. */

:root[data-active-theme="lightdraft"]{
  /* Gestaffelte Flächen (LightDraft: bg / bg2 / card / card2) */
  --brand-bg-2:    #1A1F2E;
  --brand-bg-3:    #242B3E;
  --brand-line:      rgba(255,255,255,.08);
  --brand-line-soft: rgba(255,255,255,.05);
  --brand-fg-mute: #95A5B5;
  --brand-fg-dim:  #5d6b7a;

  /* Akzent-Derivate (CMS nennt den Akzent --red; hier hält er Cyan) */
  --red-soft: #00ACC1;             /* Hover-Variante (petrol-hell) */
  --red-deep: #00838F;             /* gedeckte Variante (petrol) */
  --red-glow: rgba(0,172,193,.35); /* Glow-Schatten */

  /* LightDraft-Sekundär- + Semantikfarben (frei nutzbar in Blocks) */
  --ld-cyan:        #26C6DA;
  --ld-cyan-d:      #00BCD4;
  --ld-petrol:      #00838F;
  --ld-petrol-hell: #00ACC1;
  --ld-card-2:      #2D3550;
  --ld-green:       #2ECC71;
  --ld-orange:      #F39C12;
  --ld-salmon:      #E74C3C;

  /* Etwas weichere Tippkante als die Default-AKMG-Härte */
  --radius: 14px;
}

/* Signatur-Glow: zwei sanfte Radial-Verläufe in den oberen Ecken (wie die
   LightDraft-Hero). Liegt unter dem Content, stört nichts. */
:root[data-active-theme="lightdraft"] body{
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(38,198,218,.10), transparent 60%),
    radial-gradient(700px 400px at 5% 0%,   rgba(0,131,143,.12), transparent 55%),
    var(--bg) !important;
  background-attachment: fixed;
}

/* Topbar: dünne Cyan-Linie unten + leichter Schein, Glas-Effekt. */
:root[data-active-theme="lightdraft"] .topbar{
  background: rgba(14,17,23,.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--brand-line);
  box-shadow: 0 1px 0 rgba(38,198,218,.18), 0 8px 30px rgba(0,0,0,.35);
}

/* Primär-Button: Cyan→Petrol-Gradient mit Glow (Kern-Signature von LightDraft). */
:root[data-active-theme="lightdraft"] .btn{ border-radius: 10px; }
:root[data-active-theme="lightdraft"] .btn-primary{
  background: linear-gradient(120deg, var(--ld-cyan), var(--ld-petrol-hell));
  color: #06222a;
  font-weight: 700;
  border: 0;
  box-shadow: 0 12px 30px rgba(0,172,193,.35);
}
:root[data-active-theme="lightdraft"] .btn-primary:hover{
  background: linear-gradient(120deg, var(--ld-cyan), var(--ld-petrol-hell));
  filter: brightness(1.06);
  box-shadow: 0 16px 38px rgba(0,172,193,.45);
  transform: translateY(-1px);
}
:root[data-active-theme="lightdraft"] .btn-ghost:hover{
  border-color: var(--ld-cyan);
  color: var(--ld-cyan);
}

/* Icon-Buttons: LightDraft rundet alles — die AKMG-Default-Kante (radius:0) weg. */
:root[data-active-theme="lightdraft"] .icon-btn{ border-radius: 10px; }
:root[data-active-theme="lightdraft"] .icon-btn:hover{ border-color: var(--ld-cyan); color: var(--ld-cyan); }

/* Links / Akzent-Text bekommen den Cyan-Ton statt Rot. */
:root[data-active-theme="lightdraft"] a:hover,
:root[data-active-theme="lightdraft"] .accent,
:root[data-active-theme="lightdraft"] .red-text{ color: var(--ld-cyan); }

/* Karten-Oberflächen: weicher Radius + dezenter Verlauf wie LightDraft-Cards. */
:root[data-active-theme="lightdraft"] .shop-card,
:root[data-active-theme="lightdraft"] .page-editor-card,
:root[data-active-theme="lightdraft"] .akmg-card{
  border-radius: 16px;
  background: linear-gradient(180deg, var(--brand-bg-3), rgba(36,43,62,.55));
}
:root[data-active-theme="lightdraft"] .shop-card:hover{
  border-color: var(--ld-cyan);
  box-shadow: 0 18px 50px rgba(0,0,0,.45), 0 0 0 1px rgba(38,198,218,.25);
}

/* Shop-Akzente, die hart auf var(--red) zeigen, nehmen den Gradient mit. */
:root[data-active-theme="lightdraft"] .shop-cat-pill.active,
:root[data-active-theme="lightdraft"] .shop-view-btn.active{
  background: linear-gradient(120deg, var(--ld-cyan), var(--ld-petrol-hell));
  border-color: var(--ld-cyan);
  color: #06222a;
}
:root[data-active-theme="lightdraft"] .shop-badge-new{
  background: linear-gradient(120deg, var(--ld-cyan), var(--ld-petrol-hell));
  color: #06222a;
}