/* Vera – designtokens, Digital profil Balans 1.1 (2026-10-15). Master: brand/vera/web/vera-tokens.css + .json
   Semantiska roller: samma namn i ljust och mörkt tema. Tema: data-theme="light"|"dark" på <html>, annars systemval. */
:root{
  --vera-blue:#3B82F6; --vera-sky:#60A5FA; --vera-mist:#EAF2FF; --vera-charcoal:#111827; --vera-stone:#E5E7EB;
  --vera-ok:#10B981; --vera-warn:#F59E0B; --vera-error:#EF4444;
  --vera-font:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --vera-r-control:8px; --vera-r-field:12px; --vera-r-card:16px; --vera-r-panel:24px;
  --vera-s1:4px; --vera-s2:8px; --vera-s3:12px; --vera-s4:16px; --vera-s5:24px; --vera-s6:32px; --vera-s7:48px;
  --vera-icon-stroke:1.7;
  /* ljust tema (standard) */
  --vera-canvas:#F6FAFF; --vera-surface:#FFFFFF; --vera-text:#111827; --vera-muted:#526176; --vera-line:#DCE6F4;
  --vera-action:#2563EB; --vera-action-text:#FFFFFF; --vera-selected:#EAF2FF; --vera-ok-bg:#ECFDF5; --vera-warn-bg:#FFFBEB; --vera-error-bg:#FEF2F2;
  --vera-ok-text:#047857; --vera-warn-text:#B45309; --vera-error-text:#B91C1C; /* statusfärger som TEXT (WCAG ≥4,5:1); --vera-ok m.fl. för ikon/indikator */
  --vera-shadow:0 1px 2px rgba(17,24,39,.05),0 8px 24px rgba(17,24,39,.06);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --vera-canvas:#111827; --vera-surface:#1C2A3D; --vera-text:#F8FAFC; --vera-muted:#A7B6CA; --vera-line:#334155;
  --vera-action:#60A5FA; --vera-action-text:#111827; --vera-selected:#243449; --vera-ok-bg:#0F2E25; --vera-warn-bg:#3A2A0A; --vera-error-bg:#3B1515;
  --vera-ok-text:#34D399; --vera-warn-text:#FBBF24; --vera-error-text:#F87171;
  --vera-shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35); color-scheme:dark; } }
:root[data-theme="dark"]{
  --vera-canvas:#111827; --vera-surface:#1C2A3D; --vera-text:#F8FAFC; --vera-muted:#A7B6CA; --vera-line:#334155;
  --vera-action:#60A5FA; --vera-action-text:#111827; --vera-selected:#243449; --vera-ok-bg:#0F2E25; --vera-warn-bg:#3A2A0A; --vera-error-bg:#3B1515;
  --vera-ok-text:#34D399; --vera-warn-text:#FBBF24; --vera-error-text:#F87171;
  --vera-shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35); color-scheme:dark; }
.vera-icon{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.vera-icon-sm{width:20px;height:20px}.vera-icon-xs{width:16px;height:16px}.vera-icon-lg{width:32px;height:32px}
/* Status visas alltid med text (+ ikon vid behov), aldrig bara färg. Logotypen är SVG-original, återskapas inte med CSS. */