@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');
/* ============================================================
   LOOKSWEB v4 -- Theme Engine
   Champagne Gold on Dark (Glow-up Coach look), site-wide.
   Loaded AFTER main.css so it wins. Lean green stays as the
   single accent exception.
   ============================================================ */

:root {
  /* ---- Remap old "cyber" tokens to champagne gold ---- */
  --blue:        #d4b483;
  --purple:      #e7cf9a;
  --blue-glow:   rgba(212,180,131,.45);
  --purple-glow: rgba(231,207,154,.35);
  --blue-dark:   #b8965a;
  --blue-bright: #e7cf9a;
  --blue-deep:   #a8884e;

  /* ---- Dark surfaces ---- */
  --bg:        #0b0d13;
  --bg-2:      #0f1118;
  --bg-3:      #13151d;
  --bg-card:   #13151d;
  --bg-card-2: #171a24;
  --border:      rgba(212,180,131,.10);
  --border-blue: rgba(212,180,131,.28);

  /* ---- Text ---- */
  --text-1: #eef1f6;
  --text-2: #9aa3b2;
  --text-3: #5b6270;

  --radius:    16px;
  --radius-lg: 24px;
  --font:      'Space Grotesk', 'Inter', sans-serif;
  --font-head: 'Syne', 'Space Grotesk', sans-serif;
  --grad-cyber: linear-gradient(135deg, #e7cf9a 0%, #d4b483 50%, #c9a96a 100%);

  /* ---- v4 named tokens ---- */
  --gold:      #d4b483;
  --gold-2:    #c9a96a;
  --gold-3:    #e7cf9a;
  --gold-soft: rgba(212,180,131,.12);
  --gold-line: rgba(212,180,131,.22);
  --green:     #4ade80; /* Lean exception */
  --v4-shadow: 0 22px 60px rgba(0,0,0,.45);
}

/* Override page-local accent vars (inline <style> defines these later,
   but !important custom props win regardless of source order) */
:root {
  --mk-accent: #d4b483 !important;
  --acc:       #d4b483 !important;
  --accent:    #d4b483 !important;
  --c-accent:  #d4b483 !important;
}

/* ---- Page transition: gold edge ---- */
#pageTransition { background: linear-gradient(180deg, #0b0d13, #070810) !important; }
.pt-line {
  background: linear-gradient(90deg, transparent, rgba(212,180,131,.35) 12%, #e7cf9a 50%, rgba(212,180,131,.35) 88%, transparent) !important;
  box-shadow: 0 0 14px 3px rgba(212,180,131,.5), 0 0 48px 8px rgba(212,180,131,.16) !important;
}

/* ---- Base ---- */
html, body { font-family: var(--font); }
body {
  background:
    radial-gradient(120% 85% at 0% 0%, rgba(109,106,240,.10), transparent 55%),
    radial-gradient(120% 85% at 100% 0%, rgba(212,180,131,.06), transparent 50%),
    linear-gradient(180deg, #0c0e14 0%, #080a10 100%) !important;
  background-attachment: fixed;
  color: var(--text-1);
}

h1, h2, h3, h4, h5,
.section-title, .hd-slide__txt h2, .pf-name, .lc-hero__title, .mk-hero h1 {
  font-family: var(--font-head) !important;
  letter-spacing: -.01em;
}

/* ---- Selection / scrollbar / focus ---- */
::selection { background: rgba(212,180,131,.30); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(212,180,131,.22); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(212,180,131,.4); }
:focus-visible { outline: 2px solid rgba(212,180,131,.6); outline-offset: 2px; }

/* ---- Brand / logo accent (was cyan) ---- */
.logo b, .logo strong, .nav__logo b, .hd-logo b, [class*="logo"] b { color: var(--gold) !important; }

/* ---- Buttons: primary gold ---- */
.btn--glow, .btn--primary, .btn--cta, .premCTA, .auth-submit, button.btn--glow {
  background: linear-gradient(135deg, #e7cf9a, #c9a96a) !important;
  color: #171109 !important;
  border: 1px solid transparent !important;
  box-shadow: 0 10px 26px rgba(201,169,106,.30) !important;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn--glow:hover, .btn--primary:hover, .premCTA:hover, .auth-submit:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 34px rgba(201,169,106,.42) !important;
}
.btn--ghost, .btn--secondary {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--gold-line) !important;
  color: var(--text-1) !important;
}
.btn--ghost:hover, .btn--secondary:hover { border-color: rgba(212,180,131,.55) !important; }

/* "Registrieren"-style gradient pills in the top nav */
.nav__cta, .hd-register, a[href*="register"].btn, .btn--register {
  background: linear-gradient(135deg, #e7cf9a, #c9a96a) !important;
  color: #171109 !important; border: none !important;
}

/* ---- Cards: unify to gold-on-dark ---- */
.hd-card, .hd-rcard, .hd-spot, .pf-card, .pf-hero, .lc-card, .mk-card,
.fd-card, .card, .panel, .glass, .hd-premium {
  background: rgba(255,255,255,.025) !important;
  border: 1px solid rgba(212,180,131,.14) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--v4-shadow);
}
.hd-rcard__link, .pf-card__link, .hd-slide__cta { color: var(--gold-3) !important; }

/* ---- Inputs ---- */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
textarea, select, .input, .search-input {
  background: rgba(0,0,0,.28) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: var(--text-1) !important;
  border-radius: 12px !important;
  font-family: var(--font) !important;
}
input:focus, textarea:focus, select:focus { border-color: rgba(212,180,131,.6) !important; outline: none !important; }

/* ---- Eyebrows / section labels (were cyan) ---- */
.section-label, .hd-slide__eb, .eyebrow, .kicker, .hd-side-label {
  color: var(--gold) !important;
}

/* ---- Bottom dock: gold active + glow ---- */
.bdock { border-color: rgba(212,180,131,.18) !important; }
.bdock__item--active { color: var(--gold) !important; }
.bdock__item--active .bdock__dot { background: var(--gold) !important; box-shadow: 0 0 10px var(--gold) !important; }
.bdock__tooltip { border: 1px solid var(--gold-line) !important; }

/* ---- Nav active / links ---- */
.hd-nav__item.active, .nav__link.active, .hd-nav__item:hover { color: var(--gold) !important; }
.hd-nav__item.active svg { color: var(--gold) !important; }

/* ---- Badges / chips that were cyan/purple ---- */
.badge--blue, .badge--purple, .chip--blue, .tag--blue, .pf-badge {
  background: var(--gold-soft) !important;
  color: var(--gold-3) !important;
  border-color: var(--gold-line) !important;
}

/* ---- Generic gradient text -> gold ---- */
.grad, .gradient-text, .text-grad, .hd-hero h1 .grad {
  background: var(--grad-cyber) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* ---- Spotlight slide accent uses inline --fc; force gold for all
   except the Lean slide (green stays as the one exception) ---- */
.hd-slide:not([data-href="lean.html"]) { --fc: #d4b483 !important; }

/* ---- Premium card accent ---- */
.hd-premium { background: linear-gradient(135deg, rgba(231,207,154,.10), rgba(201,169,106,.04)) !important; border-color: rgba(212,180,131,.3) !important; }
.hd-premium a { color: var(--gold-3) !important; }

/* ---- Remap hardcoded cyan/purple SVG colors site-wide.
   CSS beats SVG presentation attributes, so this catches every
   inline stroke="#00d4ff" / fill="#c084fc" etc. (green is untouched) ---- */
[stroke="#00d4ff"], [stroke="#00f0ff"], [stroke="#33eeff"], [stroke="#0077aa"],
[stroke="#a855f7"], [stroke="#c084fc"], [stroke="#7c3aed"], [stroke="#a8c8ff"] { stroke: var(--gold) !important; }
[fill="#00d4ff"], [fill="#00f0ff"], [fill="#33eeff"], [fill="#0077aa"],
[fill="#a855f7"], [fill="#c084fc"], [fill="#7c3aed"], [fill="#a8c8ff"] { fill: var(--gold) !important; }

/* Cyan text links inside hints / notes */
.hd-login-hint a, .login-hint a, .auth-hint a, .note a { color: var(--gold-3) !important; }

/* Misc cyan accents by class */
.us-icon, .us-input-inner .us-icon { color: var(--gold) !important; }
.hd-nav__badge { background: var(--gold) !important; color: #171109 !important; }
.hd-premium__title { color: var(--gold-3) !important; }
/* Shortcut/category icons that carry an inline cyan/purple/pink color -> gold */
.hd-short__icon[style*="#00d4ff"], .hd-short__icon[style*="#f472b6"],
.hd-short__icon[style*="#a855f7"], .hd-short__icon[style*="#c084fc"],
.hd-short__icon[style*="#fbbf24"] {
  background: var(--gold-soft) !important; color: var(--gold) !important;
}

/* ---- Keep Lean green as the one exception (no override needed,
   but make sure green Lean accents survive any blue rule) ---- */
.lc-accent, .lean-accent, [data-accent="green"] { color: var(--green) !important; }