/* /assets/css/theme-blue.css — "Aurora Blue" (trust gradient, glassy header, high-contrast CTAs) */

/* ========== 1) DESIGN TOKENS ========== */
:root{
  --color-brand-600:#2563eb;  /* blue-600 */
  --color-brand-700:#1e40af;  /* indigo-800 */
  --color-brand:    var(--color-brand-600);

  /* Accent / Highlights */
  --color-accent:#38bdf8;     /* sky-400 */
  --link:#3b82f6;             /* blue-500 */
  --link-hover:#2563eb;       /* blue-600 */

  --ok:#16a34a;  --warn:#f59e0b;  --err:#dc2626;

  --bg-page:#ffffff;
  --text-base:#0b1220;
  --text-muted:#475569;
  --card-bg:#ffffff;
  --card-border:#e5e7eb;

  --btn-primary-bg:var(--color-brand-600);
  --btn-primary-hover-bg:var(--color-brand-700);
  --btn-primary-text:#ffffff;

  --btn-secondary-bg:transparent;
  --btn-secondary-text:var(--link);
  --btn-secondary-border:var(--link);
}

/* ========== 2) GLOBAL INTERACTION ========== */
html,body{ color:var(--text-base); background:var(--bg-page); }
a{ color:var(--link); }
a:hover{ color:var(--link-hover); }

/* Buttons */
.btn-primary{
  background:var(--btn-primary-bg);
  color:var(--btn-primary-text);
  filter:saturate(1.05);
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
  box-shadow:0 8px 18px rgba(37,99,235,.18);
}
.btn-primary:hover{
  background:var(--btn-primary-hover-bg);
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(37,99,235,.26);
}
.btn-primary:focus{ outline:0; box-shadow:0 0 0 4px color-mix(in srgb, var(--color-brand-600) 22%, transparent); }

.btn-outline{
  background:transparent;
  color:var(--btn-secondary-text);
  border:1px solid var(--btn-secondary-border);
  transition:background-color .15s ease, color .15s ease;
}
.btn-outline:hover{ background:var(--btn-secondary-text); color:#fff; }

/* Utility CTA enhancer (optional add to links/buttons) */
.card-cta, a.card-cta{
  box-shadow:0 8px 18px rgba(56,189,248,.25);
}
.card-cta:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(56,189,248,.32);
}

/* ========== 3) HERO (Aurora Blue) ========== */
.hero,[data-section="hero"]{
  background:linear-gradient(90deg,#0ea5e9 0%,#2563eb 55%,#1e40af 100%);
  color:#fff; position:relative; isolation:isolate;
}
.hero.hero--overlay::before,[data-section="hero"].hero--overlay::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 120% at 50% 30%,rgba(0,0,0,.14) 0%,rgba(0,0,0,.18) 40%,rgba(0,0,0,.22) 100%);
  z-index:-1;
}
.hero h1,.hero h2,[data-section="hero"] h1,[data-section="hero"] h2{
  color:#fff; text-shadow:0 2px 4px rgba(0,0,0,.25);
}
.hero p,[data-section="hero"] p{ color:#f8fafc; text-shadow:0 1px 2px rgba(0,0,0,.18); }
.hero a,[data-section="hero"] a{ color:#fff; text-decoration:underline; text-underline-offset:2px; }
.hero a:hover,[data-section="hero"] a:hover{ color:#e5f0ff; }
.hero .btn-primary,[data-section="hero"] .btn-primary{
  background:#fff; color:var(--color-brand-600); box-shadow:0 6px 18px rgba(0,0,0,.15);
}
.hero .btn-primary:hover,[data-section="hero"] .btn-primary:hover{
  background:#f3f4f6; color:var(--color-brand-700);
}
.hero .btn-outline,[data-section="hero"] .btn-outline{ color:#fff; border-color:#fff; }
.hero .btn-outline:hover,[data-section="hero"] .btn-outline:hover{ background:#fff; color:var(--color-brand-600); }
.hero .container,[data-section="hero"] .container{
  padding-top:clamp(2.5rem,6vw,5rem);
  padding-bottom:clamp(2rem,5vw,4rem);
}

/* ========== 4) BADGES / STATUS ========== */
.badge-warn{
  background:color-mix(in srgb,var(--warn) 18%,#fff);
  color:#92400e; border:1px solid color-mix(in srgb,var(--warn) 45%,#fff);
}
.badge-ok{
  background:color-mix(in srgb,var(--ok) 15%,#fff);
  color:#166534; border:1px solid color-mix(in srgb,var(--ok) 45%,#fff);
}
.alert-warn{ color:#b45309; } .alert-ok{ color:#166534; } .alert-err{ color:#b91c1c; }

/* “New” pill (cool blue) */
.badge-new{
  background:color-mix(in srgb,var(--color-accent) 85%, #fff 15%);
  color:#0b1220; border:1px solid color-mix(in srgb,var(--color-accent) 65%, #fff 35%);
  box-shadow:0 2px 6px rgba(56,189,248,.35);
}

/* ========== 5) HEADER: BLUE GLASS ========== */
header.sticky{
  background:rgba(37,99,235,.65) !important; /* blue-600 @ 65% */
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.15);
  box-shadow:0 4px 20px rgba(0,0,0,.10);
  color:#fff;
}
/* force light text/icon color in glass header */
header.sticky,header.sticky a,header.sticky svg,header.sticky span,
header.sticky .text-slate-900,header.sticky .text-gray-900,header.sticky .text-black-700,header.sticky .font-black{
  color:#fff !important; fill:#fff !important;
}
/* search on glass */
header.sticky input[type="search"],
header.sticky input[type="text"],
header.sticky .rounded-xl{
  background:rgba(255,255,255,.12) !important;
  border:1px solid rgba(255,255,255,.25) !important;
  color:#fff !important;
}
header.sticky input::placeholder{ color:rgba(255,255,255,.85) !important; }
header.sticky .hover\:bg-white\/50:hover,
header.sticky .hover\:bg-white\/60:hover,
header.sticky .hover\:bg-white\/40:hover{ background-color:rgba(255,255,255,.14) !important; }

/* mini-cart badges (sticky header) */
header.sticky #miniCartBadge,
header.sticky #miniCartBadgeMobile{ background:var(--color-accent) !important; color:#fff !important; }

/* stronger glass when scrolled (.scrolled set via JS if needed) */
header.sticky.scrolled{
  background:rgba(30,64,175,.90) !important; /* indigo-800 */
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
}

/* ========== 6) UTILITY REINFORCEMENTS ========== */
/* Tailwind gradient mapping */
.from-brand{ --tw-gradient-from:var(--color-brand-600) !important; }
.to-brand-700{ --tw-gradient-to:var(--color-brand-700) !important; }

/* Border alpha substitute */
.border-brand-600\/50{ border-color:color-mix(in srgb,var(--color-brand-600) 50%, transparent) !important; }

/* Legacy hero gradient override */
.bg-gradient-to-r.from-brand{
  background:linear-gradient(90deg,#0ea5e9 0%,#2563eb 55%,#1e40af 100%) !important; color:#fff !important;
}
.bg-gradient-to-r.from-brand h1,
.bg-gradient-to-r.from-brand h2,
.bg-gradient-to-r.from-brand p{ color:#fff !important; text-shadow:0 2px 4px rgba(0,0,0,.25); }
.bg-gradient-to-r.from-brand a.btn-primary{ background:#fff !important; color:var(--color-brand-700) !important; }
.bg-gradient-to-r.from-brand a[class*="bg-white"]{ background:transparent !important; border-color:#fff !important; color:#fff !important; }

/* ========== 7) ORANGE → BLUE REMAP (SAFE) ========== */
/* Gradients */
.from-amber-500{ --tw-gradient-from:var(--color-brand-600) !important; }
.to-yellow-300, .to-yellow-300\/90{ --tw-gradient-to:var(--color-brand-700) !important; }

/* Background utilities */
.bg-amber-500{ background-color:var(--color-accent) !important; }
.hover\:bg-amber-600:hover{ background-color:var(--color-brand-700) !important; }

/* Text utilities (only affect text) */
.text-amber-500{ color:var(--color-accent) !important; }

/* Border utilities (only affect borders) */
.border-amber-500{ border-color:var(--color-accent) !important; }

/* Ensure CTA text stays readable when accent bg is used */
.bg-\[var\(--color-accent\)\], .bg-accent{ color:#0b1220 !important; }

/* ========== 8) PRODUCT CARD POLISH ========== */
.product-card{ border:1px solid var(--card-border); background:var(--card-bg); }
.product-card:hover{ border-color:color-mix(in srgb,var(--color-accent) 40%, var(--card-border)); box-shadow:0 10px 24px rgba(2,6,23,.08); }
.product-price{ color:#0b1220; font-weight:800; }
.product-status--ok{ color:#16a34a; }
.product-status--oos{ color:#dc2626; }

/* CTA inside card */
.product-cta{ color:#0b1220; box-shadow:0 8px 18px rgba(56,189,248,.25); }
.product-cta:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(56,189,248,.32); }

/* ========== 9) MINI-CART PANEL (opaque) ========== */
#miniCartDropdown{
  background:#ffffff !important;
  border:1px solid #e5e7eb !important;
  box-shadow:0 20px 40px rgba(0,0,0,.18) !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  color:#0f172a !important;
}
#miniCartDropdown *, #miniCartDropdown svg{ color:#0f172a !important; fill:#0f172a !important; }
#miniCartDropdown h3{ color:#111827 !important; }
#miniCartDropdown .text-gray-500{ color:#6b7280 !important; }
#miniCartDropdown .text-gray-900{ color:#111827 !important; }
#miniCartDropdown a{ color:var(--color-brand-600) !important; }
#miniCartDropdown a:hover{ color:var(--color-brand-700) !important; }

/* ensure header white overrides never leak into dropdown */
header.header--glass #miniCartDropdown,
header.header--glass #miniCartDropdown *{ color:#0f172a !important; fill:#0f172a !important; }

/* Fallback: make cart badges blue even outside sticky state */
#miniCartBadge, #miniCartBadgeMobile{
  background:var(--color-accent) !important; color:#fff !important;
}

/* --- Tailwind Amber → Blue (um gelbe Utilities “blau” zu machen) --- */
/* Gradients */
.from-amber-400, .from-amber-500{ --tw-gradient-from: var(--color-brand-600) !important; }
.to-yellow-200, .to-yellow-300{ --tw-gradient-to: var(--color-brand-700) !important; }

/* Backgrounds */
.bg-amber-400, .bg-amber-500, .bg-amber-600{ background-color: var(--color-accent) !important; }
.hover\:bg-amber-600:hover{ background-color: var(--color-brand-700) !important; }

/* Text */
.text-amber-400, .text-amber-500, .hover\:text-amber-500:hover{ color: var(--color-accent) !important; }

/* Borders */
.border-amber-400, .border-amber-500{ border-color: var(--color-accent) !important; }

/* Rings / Focus */
.ring-amber-500{ --tw-ring-color: var(--color-accent) !important; }
.focus\:ring-amber-500:focus{ --tw-ring-color: var(--color-accent) !important; }
.focus\:border-amber-500:focus{ border-color: var(--color-accent) !important; }

/* Lesbarkeit bei Akzent-Hintergrund */
.bg-\[var\(--color-accent\)\], .bg-accent{ color:#0b1220 !important; }