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

:root {
  /* ===== Rå palett (byter aldrig). Lime lever ENDAST i wordmarken. ===== */
  --green-50:#F4F8F7;  --green-100:#E7F0EE; --green-400:#5AA79E;
  --green-600:#2F736C; --green-800:#1A3D39; --green-950:#0D1F1E;
  --coral-100:#FFE7E0; --coral-300:#FFB09B; --coral-500:#FF8163; --coral-700:#C7452E;
  --green-box:#ECF1EF; --green-border:#DCE4E2;
  --dark-surface:#1A3D39; --dark-border:#245852; --on-dark:#F4F8F7; --on-dark-2:#9FB4B0;
  --lime:#CCFF00;      /* endast wordmark — aldrig i UI */
  --obsidian:#0B1215;

  /* mörk brand-chrome (topbars, mörka shells) */
  --qubint-bg:           #0D1F1E;
  --qubint-bg-alt:       #14171c;
  --qubint-white:        #ffffff;
  /* Brand-accent = GRÖNT (struktur & kontroll). Ljust tema default; mörkt tema
     override nedan. --qubint-accent-ink = textfärg PÅ accent-ytor. */
  --qubint-accent:       #2F736C;
  --qubint-accent-hover: #1A3D39;
  --qubint-accent-active:#0D1F1E;
  --qubint-accent-light: #5AA79E;
  --qubint-accent-ink:   #ffffff;
  /* CTA = KORALL (handling). Mörk text i viloläge, VIT först vid hover.
     Aldrig vit på coral-500. Samma korall i båda teman. */
  --qubint-cta:          #FF8163;
  --qubint-cta-ink:      #0D1F1E;
  --qubint-cta-hover:    #C7452E;
  --qubint-cta-hover-ink:#FFFFFF;
  /* Brödtext ljust tema = ink (green-950) */
  --qubint-text:         #0D1F1E;

  /* 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(47,115,108,0.16);
  --qubint-accent-border:rgba(47,115,108,0.40);
  --qubint-accent-border-hover: rgba(47,115,108,0.55);

  /* ===== Semantiska tokens (spec) — ljust tema ===== */
  --bg:var(--green-50); --surface:#FFFFFF; --surface-2:var(--green-box); --border:var(--green-border);
  --ink:var(--green-950); --text-2:#45514F; --muted:#6B7B78;
  --icon:var(--green-600); --icon-strong:var(--green-950); --icon-muted:#9FB0AD;
  --cta:var(--coral-500); --cta-hover:var(--coral-700); --cta-ink:var(--green-950); --cta-hover-ink:#FFFFFF;
  --positive:var(--green-600); --attention:var(--coral-300); --over:var(--coral-500); --critical:var(--coral-700);
  --accent:var(--green-600);

  --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);

  /* === Semantic status colors ===
     Delade tokens för status-badges, pills och banners. Två kontext:
     ljus (kort på vit yta) och mörk (förar-shellens mörka tema). */
  --status-ok-bg:        rgba(34,197,94,0.12);
  --status-ok-text:      #15803d;
  --status-ok-border:    rgba(34,197,94,0.30);
  --status-warn-bg:      rgba(234,179,8,0.18);
  --status-warn-text:    #854d0e;
  --status-warn-border:  rgba(234,179,8,0.40);
  --status-draft-bg:     rgba(234,179,8,0.14);
  --status-draft-text:   #a16207;
  --status-draft-border: rgba(234,179,8,0.30);
  --status-err-bg:       rgba(239,68,68,0.12);
  --status-err-text:     #b91c1c;
  --status-err-border:   rgba(239,68,68,0.30);
  --status-muted-bg:     rgba(148,163,184,0.18);
  --status-muted-text:   #475569;
  --status-muted-border: rgba(148,163,184,0.40);

  /* Mörk kontext (mot #14171c) */
  --status-ok-text-dark:      #6ee7a7;
  --status-warn-text-dark:    #fcd34d;
  --status-err-text-dark:     #fca5a5;
  --status-muted-text-dark:   rgba(255,255,255,0.55);
  --status-ok-bg-dark:        rgba(34,197,94,0.10);
  --status-ok-border-dark:    rgba(34,197,94,0.30);
  --status-warn-bg-dark:      rgba(234,179,8,0.10);
  --status-warn-border-dark:  rgba(234,179,8,0.35);
  --status-muted-bg-dark:     rgba(255,255,255,0.05);
  --status-muted-border-dark: rgba(255,255,255,0.10);
  /* Draft + error saknade mörka varianter — badge-draft/-error blev annars
     ljusa temats mörka text på mörk bakgrund (oläsligt). */
  --status-draft-text-dark:   #fcd34d;
  --status-draft-bg-dark:     rgba(234,179,8,0.10);
  --status-draft-border-dark: rgba(234,179,8,0.35);
  --status-err-bg-dark:       rgba(239,68,68,0.10);
  --status-err-border-dark:   rgba(239,68,68,0.35);
}

/* Mörka YTOR: remappa bas-status-tokens till sina -dark-varianter, så badges/
   pills/banners (badge-warn "att åtgärda", badge-error m.fl.) blir läsbara på
   mörk bakgrund i ett svep.

   VIKTIGT — scopa på ytan, INTE hela body.theme-dark. Förar-mörka temat har
   vita "ljus-öar" (.trip-row, .eco-card, .card-box:not(.dark)) mitt i den mörka
   sidan. Om vi remappar på body ärver badges i de vita korten ljus text →
   vit-på-vitt (osynligt). Därför bara på faktiskt mörka ytor: .card-box.dark +
   .page-header.dark (samt hela fristående shell-dark, som saknar vita öar).
   Badges i vita öar behåller :root:s ljusa tokens (mörk text) = läsbart.

   Kund-appen i mörkt tema saknar vita öar (alla kort tematiseras mörka) → hela
   den sidan får dark-tokens. Fristående shell-dark likaså. Bara förar-mörk, med
   sina vita öar, scopas till de mörka ytorna. */
body.shell-dark,
body.shell-kund.theme-dark,
body.shell-forare.theme-dark .card-box.dark,
body.shell-forare.theme-dark .page-header.dark {
  --status-ok-bg:        var(--status-ok-bg-dark);
  --status-ok-text:      var(--status-ok-text-dark);
  --status-ok-border:    var(--status-ok-border-dark);
  --status-warn-bg:      var(--status-warn-bg-dark);
  --status-warn-text:    var(--status-warn-text-dark);
  --status-warn-border:  var(--status-warn-border-dark);
  --status-draft-bg:     var(--status-draft-bg-dark);
  --status-draft-text:   var(--status-draft-text-dark);
  --status-draft-border: var(--status-draft-border-dark);
  --status-err-bg:       var(--status-err-bg-dark);
  --status-err-text:     var(--status-err-text-dark);
  --status-err-border:   var(--status-err-border-dark);
  --status-muted-bg:     var(--status-muted-bg-dark);
  --status-muted-text:   var(--status-muted-text-dark);
  --status-muted-border: var(--status-muted-border-dark);
}

/* Brödtext i ljust tema = #0b1215 (via --qubint-text). Mörka shells/tema orörda. */
body.shell-kund:not(.theme-dark), body.shell-kund:not(.theme-dark) main,
body.shell-admin, body.shell-admin main,
body.shell-forare.theme-light, body.shell-forare.theme-light main {
  color: var(--qubint-text);
}

/* Mörkt tema: ljusare teal-accent (poppar mot mörk yta) + mörk text på accent. */
body.theme-dark, body.shell-dark {
  --qubint-accent:       #5AA79E;
  --qubint-accent-hover: #A9CFC9;
  --qubint-accent-active:#7FBDB4;
  --qubint-accent-light: #A9CFC9;
  --qubint-accent-ink:   #0D1F1E;
  --qubint-accent-tint:  rgba(90,167,158,0.16);
  --qubint-accent-border:rgba(90,167,158,0.40);
  --qubint-accent-border-hover: rgba(90,167,158,0.55);
  /* CTA = korall även i mörkt tema (mörk text i vila, vit på hover). */
  --qubint-cta:          #FF8163;
  --qubint-cta-ink:      #0D1F1E;
  --qubint-cta-hover:    #C7452E;
  --qubint-cta-hover-ink:#FFFFFF;

  /* ===== Semantiska tokens (spec) — mörkt tema ===== */
  --bg:var(--green-950); --surface:var(--dark-surface); --surface-2:#173430; --border:var(--dark-border);
  --ink:var(--on-dark); --text-2:var(--on-dark-2); --muted:#7C918D;
  --icon:var(--green-400); --icon-strong:var(--on-dark); --icon-muted:#5C716D;
  --positive:var(--green-400); --attention:var(--coral-300); --over:var(--coral-500); --critical:#E85A40;
  --accent:var(--green-400);
}

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.
   - Marknad (.topbar), auth (.auth-topbar) och .shell-topbar: alltid svart
     (de ytorna är genomgående mörka).
   - App-shells (kund/förare): svart BARA i mörkt tema (body.theme-dark).
     I ljust tema — och i admin, som alltid är ljus — behåller topbaren sin
     VITA bakgrund + mörka logga/nav från app_shell.css.
   !important vinner över base-reglerna (de saknar !important).
   Lime-CTA (.topbar-cta) har egen mörk text och lämnas orörd.
   ============================================================ */
.topbar, .topbar[data-scrolled="true"], .auth-topbar, .shell-topbar,
body.theme-dark .kund-topbar, body.theme-dark .forare-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;
}
/* Mörka ytor: ren VIT logga (brand-beslut) — inte den lime-q-färgade.
   brightness(0) invert(1) gör PNG-loggan helt vit. Ljust tema använder
   brightness(0) (svart siluett) på annat håll → ingen lime någonstans. */
.topbar .topbar-logo, .auth-topbar .topbar-logo, .shell-topbar .topbar-logo,
body.theme-dark .kund-topbar .topbar-logo, body.theme-dark .forare-topbar .topbar-logo {
  filter: brightness(0) invert(1) !important;
}
/* Ljus text + ikoner i topbaren (ej lime-CTA) */
.topbar .nav-item, .auth-topbar a, .auth-topbar button, .back-link, .login-link,
body.theme-dark .kund-topbar .nav-item, body.theme-dark .forare-topbar .nav-item {
  color: rgba(255, 255, 255, 0.82) !important;
}
.locale { color: rgba(255, 255, 255, 0.55) !important; }
.topbar .nav-item[aria-current="page"], .topbar .nav-item:hover,
.login-link:hover, .locale:hover, .back-link:hover,
body.theme-dark .kund-topbar .nav-item[aria-current="page"],
body.theme-dark .kund-topbar .nav-item:hover,
body.theme-dark .forare-topbar .nav-item[aria-current="page"],
body.theme-dark .forare-topbar .nav-item:hover { color: #fff !important; }
/* Meny-knapp (hamburger): ljus ikon + ram (bara mörka ytor) */
.topbar .menu-toggle, .auth-topbar .menu-toggle,
body.theme-dark .kund-topbar .menu-toggle, body.theme-dark .forare-topbar .menu-toggle {
  color: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}