/* qubint brand-tokens — speglar BRAND.md sektion 3 + 4. */

:root {
  /* primär palett (mörkt tema) */
  --qubint-bg:           #0f1114;
  --qubint-bg-alt:       #14171c;
  --qubint-white:        #ffffff;
  --qubint-accent:       #CCFF00;
  --qubint-accent-hover: #D6FF33;
  --qubint-accent-active:#A8D400;
  --qubint-accent-light: #E4FF80;

  /* opacities */
  --qubint-white-88: rgba(255,255,255,0.88);
  --qubint-white-78: rgba(255,255,255,0.78);
  --qubint-white-70: rgba(255,255,255,0.70);
  --qubint-white-60: rgba(255,255,255,0.60);
  --qubint-white-15: rgba(255,255,255,0.15);
  --qubint-white-12: rgba(255,255,255,0.12);
  --qubint-white-09: rgba(255,255,255,0.09);
  --qubint-white-06: rgba(255,255,255,0.06);

  --qubint-accent-tint:  rgba(204, 255, 0,0.18);
  --qubint-accent-border:rgba(204, 255, 0,0.40);
  --qubint-accent-border-hover: rgba(204, 255, 0,0.55);

  --qubint-error:        #ff6b6b;
  --qubint-error-strong: #ff8b8b;
  --qubint-placeholder:  #8a8f95;

  /* radii / shadows */
  --qubint-radius-pill:  9999px;
  --qubint-radius-card:  12px;
  --qubint-radius-modal: 24px;

  --qubint-shadow-glass:        0 12px 36px rgba(0,0,0,0.25);
  --qubint-shadow-glass-strong: 0 16px 48px rgba(0,0,0,0.30);
}

html { scroll-behavior: smooth; }

body { font-family: 'Outfit', system-ui, -apple-system, sans-serif; font-weight: 300; }
h1, h2, h3, h4 { font-weight: 500; letter-spacing: -0.005em; }

.eyebrow {
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* ============================================================
   Svart brand-topbar — gäller ALLA vyer (marknad, auth,
   kund/admin/förare, ljust + mörkt tema, [data-scrolled]).
   tokens.css laddas globalt; !important vinner över alla
   befintliga topbar-regler (de använder inga !important).
   Lime-CTA (.topbar-cta) har egen mörk text och lämnas orörd.
   ============================================================ */
.topbar, .topbar[data-scrolled="true"],
.auth-topbar, .kund-topbar, .admin-topbar, .forare-topbar, .shell-topbar {
  background: #0f1114 !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
  color: rgba(255, 255, 255, 0.92) !important;
}
/* Färgad logga (ingen brightness(0)-siluett) på svart bakgrund */
.topbar .topbar-logo, .auth-topbar .topbar-logo, .kund-topbar .topbar-logo,
.admin-topbar .topbar-logo, .forare-topbar .topbar-logo, .shell-topbar .topbar-logo {
  filter: none !important;
}
/* Ljus text + ikoner i topbaren (ej lime-CTA) */
.topbar .nav-item, .kund-topbar .nav-item, .admin-topbar .nav-item,
.forare-topbar .nav-item, .auth-topbar a, .auth-topbar button,
.back-link, .login-link {
  color: rgba(255, 255, 255, 0.82) !important;
}
.locale { color: rgba(255, 255, 255, 0.55) !important; }
.nav-item[aria-current="page"], .nav-item:hover,
.login-link:hover, .locale:hover, .back-link:hover { color: #fff !important; }
/* Meny-knapp (hamburger): ljus ikon + ram */
.menu-toggle {
  color: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}