/* ============================================================
   DBO digitals — "Brand Spec" direction
   Implements the finalized brand from the briefing document:
     · Text Primär  #1C244B  (deep blue)
     · Hintergrund  #F3F5F8  (light grey)
     · Text Sekundär #324A6D (mid blue)
     · Akzent       #FC6161  (salmon)
     · Logo  : KingLear  (kept via --display)
     · Headings: Epilogue (overrides --serif)
     · Body  : Raleway
   Layered ON TOP of dbo.css — only re-declares tokens, so every
   component inherits the new palette + type automatically.
   ============================================================ */

html[data-theme="brand"] {
  /* ground */
  --bg: #F3F5F8;
  --fg: #1C244B;
  --fg-muted: #324A6D;
  --surface: #FFFFFF;
  --hairline: color-mix(in oklab, #1C244B 15%, transparent);
  --nav-bg: color-mix(in oklab, #F3F5F8 82%, transparent);

  /* accent — salmon */
  --accent: #FC6161;
  --accent-soft: rgba(252, 97, 97, 0.12);

  /* headings → Epilogue; logo stays KingLear via --display */
  --serif: "Epilogue", system-ui, -apple-system, sans-serif;
}

/* dark immersive band — inverted to deep blue */
html[data-theme="brand"] .band--dark {
  --bg: #1C244B;
  --fg: #F4F6FA;
  --fg-muted: color-mix(in oklab, #F4F6FA 64%, transparent);
  --surface: #232c5a;
  --hairline: color-mix(in oklab, #F4F6FA 16%, transparent);
  --accent: #FF7D7D;          /* brighter salmon for contrast on blue */
  --accent-soft: rgba(255, 125, 125, 0.16);
  background: #1C244B;
}

/* ---- Epilogue display treatment -------------------------- */
html[data-theme="brand"] .kdisplay {
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.06;
}
html[data-theme="brand"] .h-hero {
  font-weight: 700;
  letter-spacing: -0.038em;
  line-height: 1.0;
}
html[data-theme="brand"] .kdisplay em {
  font-style: italic;
  font-weight: 600;
  color: var(--accent);
}

/* row / competence / methodik display bits use --serif too — lighten tracking */
html[data-theme="brand"] .row__text,
html[data-theme="brand"] .comp__name,
html[data-theme="brand"] .mcell h3,
html[data-theme="brand"] .svc h3 {
  font-weight: 600;
  letter-spacing: -0.018em;
}
html[data-theme="brand"] .row__num {
  font-style: italic;
  font-weight: 600;
}

/* pull-quote: Epilogue, semibold, not roman-serif */
html[data-theme="brand"] .serif-quote {
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.12;
}
html[data-theme="brand"] .quote__mark { font-style: normal; }
html[data-theme="brand"] .agency__pivot b { font-weight: 600; }

/* ---- Logo wordmark: keep KingLear, true to the brand ----- */
html[data-theme="brand"] .brand__name { letter-spacing: 0.015em; }

/* ---- Simulation panel: deep-blue ground in this theme ---- */
html[data-theme="brand"] .sim {
  background: #1C244B;
  border-color: color-mix(in oklab, #1C244B 22%, transparent);
}
html[data-theme="brand"] .sim__live {
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent);
}
html[data-theme="brand"] .sim__tag,
html[data-theme="brand"] .sim__foot { color: rgba(244, 246, 250, 0.62); }

/* solid button in brand picks up salmon sweep on dark fill */
html[data-theme="brand"] .btn--solid { background: var(--fg); color: var(--bg); }
html[data-theme="brand"] .btn--solid::after { background: var(--accent); }

/* ============================================================
   ACCENT VARIANTS (Tweak: Akzentfarbe) — default = Lachs
   Each pairs a light-ground value with a brighter dark-band value.
   ============================================================ */
html[data-theme="brand"][data-accent2="koralle"] { --accent:#F2622E; --accent-soft:rgba(242,98,46,.12); }
html[data-theme="brand"][data-accent2="koralle"] .band--dark { --accent:#FF8A55; --accent-soft:rgba(255,138,85,.18); }

html[data-theme="brand"][data-accent2="petrol"] { --accent:#0E8C82; --accent-soft:rgba(14,140,130,.12); }
html[data-theme="brand"][data-accent2="petrol"] .band--dark { --accent:#3FC0B4; --accent-soft:rgba(63,192,180,.18); }

html[data-theme="brand"][data-accent2="kobalt"] { --accent:#3257E0; --accent-soft:rgba(50,87,224,.12); }
html[data-theme="brand"][data-accent2="kobalt"] .band--dark { --accent:#7E9BFF; --accent-soft:rgba(126,155,255,.18); }

/* ============================================================
   DARK HERO (Tweak: Grundton — Hell / Dunkel) — DEFAULT = Dunkel
   Turns the first-fold hero/page-hero into the deep-blue ground,
   while the rest of the page keeps its light editorial sections.
   ============================================================ */
html[data-theme="brand"][data-hero="dark"] .hero,
html[data-theme="brand"][data-hero="dark"] .phero {
  --bg:#1C244B;
  --fg:#F4F6FA;
  --fg-muted:color-mix(in oklab, #F4F6FA 64%, transparent);
  --surface:#232c5a;
  --hairline:color-mix(in oklab, #F4F6FA 16%, transparent);
  --accent:#FF7D7D;
  --accent-soft:rgba(255,125,125,.16);
  background:#1C244B;
  color:var(--fg);
}
/* honour the chosen accent on the dark hero too */
html[data-theme="brand"][data-hero="dark"][data-accent2="koralle"] .hero,
html[data-theme="brand"][data-hero="dark"][data-accent2="koralle"] .phero { --accent:#FF8A55; }
html[data-theme="brand"][data-hero="dark"][data-accent2="petrol"] .hero,
html[data-theme="brand"][data-hero="dark"][data-accent2="petrol"] .phero { --accent:#3FC0B4; }
html[data-theme="brand"][data-hero="dark"][data-accent2="kobalt"] .hero,
html[data-theme="brand"][data-hero="dark"][data-accent2="kobalt"] .phero { --accent:#7E9BFF; }

/* sim panel on a dark hero: lift its border so it reads as a framed inset */
html[data-theme="brand"][data-hero="dark"] .sim { border-color: color-mix(in oklab, #F4F6FA 18%, transparent); }

/* nav legibility while sitting over a dark hero (before scroll) */
html[data-theme="brand"][data-hero="dark"] .nav:not(.is-scrolled) .brand__name,
html[data-theme="brand"][data-hero="dark"] .nav:not(.is-scrolled) .nav__link { color: #F4F6FA; }
html[data-theme="brand"][data-hero="dark"] .nav:not(.is-scrolled) .nav__link.is-studio { color: #FF7D7D; }
html[data-theme="brand"][data-hero="dark"] .nav:not(.is-scrolled) .nav__cta { color:#F4F6FA; border-color: color-mix(in oklab,#F4F6FA 55%, transparent); }
html[data-theme="brand"][data-hero="dark"] .nav:not(.is-scrolled) .nav__toggle span { background:#F4F6FA; }

/* ============================================================
   MOBILE MENU — deep-blue full-screen overlay
   The base panel used var(--bg) (= light #F3F5F8). Over the dark
   hero the nav logo + hamburger are forced white, so on a light
   panel they vanished. Make the overlay deep-blue and force the
   header chrome + links light while open, regardless of scroll.
   ============================================================ */
@media (max-width: 1040px) {
  html[data-theme="brand"] .nav__mobile { background: #1C244B; }
  html[data-theme="brand"] .nav__mobile a { color: #F4F6FA; }
  html[data-theme="brand"] .nav__mobile a.is-studio { color: #FF7D7D; }
  /* header chrome readable on the dark overlay in every scroll state */
  html[data-theme="brand"] .nav.is-open,
  html[data-theme="brand"] .nav.is-open.is-scrolled { background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter:none; backdrop-filter:none; }
  html[data-theme="brand"] .nav.is-open .brand__name { color: #F4F6FA; }
  html[data-theme="brand"] .nav.is-open .nav__toggle span { background: #F4F6FA; }
}