/* ============================================================
DRIV Design System — driv.css (v1, 2026-07-14)
Delat token-lager + baskomponenter för alla DRIV-ytor.
Spec: brand/DESIGN-SYSTEM.md
Tema-override: tenant sätter bara --accent / --accent-deep /
--accent-soft (ev. --bg/--ink). Resten ärvs.
============================================================ */
/* Typsnitt — self-hostade (public/fonts/). Centralt här så alla ytor delar dem. */
@font-face{font-family:'Geist';src:url('/fonts/Geist-Light.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Geist';src:url('/fonts/Geist-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Geist';src:url('/fonts/Geist-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Geist';src:url('/fonts/Geist-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Geist';src:url('/fonts/Geist-Bold.woff2') format('woff2');font-weight:700 800;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('/fonts/GeistMono-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
:root{
/* Färg — semantiska namn (white-label-säkra) */
--accent:#e8491f;
--accent-deep:#c93a14;
--accent-soft:#fde4dc;
--accent-text:var(--accent); /* accenten som text — se kommentaren nedan */
--bg:#f7f2e9;
--surface:#fffdf8;
--surface-2:#faf6ef;
--ink:#1b1814;
--muted:#6e675c;
--faint:#9a9184;
--line:#e3dccd;
--ok:#2e7d4f;
--warn:#b8761c;
--danger:#c0392b;
/* Mörka sektioner (hero/CTA-band) */
--ink-soft:#26221c;
--ink-line:#3a342b;
--on-ink:#f7f2e9;
/* Typografi */
--font:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
--mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
--text-xs:11px;
--text-sm:13px;
--text-base:15px;
--text-md:17px;
--text-lg:20px;
--text-xl:26px;
--text-2xl:34px;
--text-display:clamp(40px,7vw,72px);
--lh-tight:1.15;
--lh:1.5;
/* Spacing — 4px-grid */
--s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
--s6:24px; --s8:32px; --s10:40px; --s12:48px;
/* Radie */
--r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px;
--r-pill:999px; --r-full:50%;
/* Skugga */
--shadow-sm:0 1px 2px rgba(27,24,20,.04);
--shadow-md:0 1px 2px rgba(27,24,20,.04),0 8px 28px -10px rgba(27,24,20,.12);
--shadow-lg:0 24px 60px -20px rgba(27,24,20,.28);
color-scheme:light;
}
/* ============================================================
Mörkt läge — samma tokens, andra värden.
Styrs av klassen .dark på , satt av ett inline-skript i
varje ytas INNAN första paint (annars blinkar det ljust).
Klass och inte bara media query: användaren ska kunna tvinga
ett läge oavsett vad telefonen tycker.
Paletten är varm, inte neutralt svart — DRIV:s ljusa läge är
gräddvitt med orange, och ett kallgrått mörkt läge hade brutit
släktskapet. Tonerna nedan är samma familj som --ink/--ink-soft.
============================================================ */
html.dark{
--bg:#141210;
--surface:#1f1c17;
--surface-2:#272319; /* i ljust läge nedtonad, i mörkt UPPhöjd — annars försvinner den */
--ink:#f4efe4;
--muted:#a89f90;
--faint:#7c7467;
--line:#35302a;
--ok:#5cba82; /* de ljusa lägets grön/gul/röd är för mörka mot #141210 */
--warn:#e0a94a;
--danger:#e8705f;
/* --accent kommer från tenanttemat och rörs INTE här (varumärket ska
vara sig likt). Men den tonade varianten är en LJUS tint i ljust läge
och måste blandas mot mörk yta i stället, annars lyser varje
"soft"-yta vit. Och accenten som HOVER blir ljusare i mörkt läge. */
--accent-soft:color-mix(in srgb,var(--accent) 22%,#1f1c17);
--accent-deep:color-mix(in srgb,var(--accent) 76%,#fff);
--accent-text:color-mix(in srgb,var(--accent) 78%,#fff);
--ink-soft:#0f0d0b;
--ink-line:#2a251f;
--on-ink:#f4efe4;
/* Skuggor mot mörk bakgrund måste vara svartare och djupare —
en brun skugga på nästan svart syns inte alls. */
--shadow-sm:0 1px 2px rgba(0,0,0,.4);
--shadow-md:0 1px 2px rgba(0,0,0,.4),0 8px 28px -10px rgba(0,0,0,.6);
--shadow-lg:0 24px 60px -20px rgba(0,0,0,.75);
color-scheme:dark;
}
/* --accent-text: accenten när den är TEXT och inte en yta.
Varumärkesorange är gjord för att ligga under vit text på en knapp, inte för
att vara liten text på nästan svart — där hamnar den runt 4:1. Därför ljusas
den upp i mörkt läge, men BARA för textbruken.
Det här är en variabel och inte en `html.dark a`-regel med flit: en sådan
regel har högre specificitet än t.ex. `.tabs a{color:var(--ink)}` och skulle
färga om varje länk som medvetet satt sin egen färg. Med en variabel ändras
inga specificiteter alls jämfört med ljust läge. */
/* ---------- Bas (avsiktligt minimal — ska INTE strida mot värdssidors layout) ----------
Sätter bara det som är säkert globalt. Font-size/line-height och rubrikmarginaler
lämnas till varje yta (annars knuffas befintliga layouter). */
*,*::before,*::after{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font);
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
a{color:var(--accent-text); text-decoration:none}
.muted{color:var(--muted)}
.faint{color:var(--faint)}
/* Wordmark — kanonisk lutande DRIV. (ord i --ink, punkt i --accent, italic).
Använd överallt: DRIV → "DRIV." lutande. */
.wordmark{font-style:italic; font-weight:700; letter-spacing:-.045em; color:var(--ink)}
.wordmark::after{content:"."; color:var(--accent)}
/* Driv-badge — liten byline i appfötter (text sätts i markup: DRIV.) */
.driv-badge{display:inline-flex; align-items:baseline; gap:6px; text-decoration:none;
opacity:.5; transition:opacity .15s; font-size:10.5px; font-weight:600;
letter-spacing:.09em; text-transform:uppercase; color:var(--muted)}
.driv-badge:hover,.driv-badge:active{opacity:.9}
.driv-badge b{font-size:13px; font-weight:700; font-style:italic; letter-spacing:-.04em;
color:var(--ink); text-transform:none}
.driv-badge b i{font-style:italic; color:var(--accent)}
/* ---------- Knappar ---------- */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
padding:var(--s3) var(--s5); border-radius:var(--r-pill);
font:inherit; font-size:var(--text-sm); font-weight:600; cursor:pointer;
border:1px solid transparent; background:var(--surface); color:var(--ink);
transition:background .15s,border-color .15s,transform .05s;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--accent); color:#fff}
.btn--primary:hover{background:var(--accent-deep)}
.btn--ghost{background:transparent; border-color:var(--line); color:var(--ink)}
.btn--ghost:hover{background:var(--surface-2)}
.btn--pill{background:var(--accent-soft); color:var(--accent-deep)}
.btn--block{display:flex; width:100%}
/* ---------- Kort ---------- */
.card{
background:var(--surface); border:1px solid var(--line);
border-radius:var(--r-lg); padding:var(--s5); box-shadow:var(--shadow-sm);
}
.card--float{box-shadow:var(--shadow-md); border-color:transparent}
/* ---------- Emfas-kort (hjälte-moment) ----------
Modifierare som komponeras med .card. Compound-selektor (.card.card--x) så de
vinner över värdsidans egna .card-regler oavsett källordning.
Använd för DET ENA som ska poppa i en vy — inte flera samtidigt. */
.card.card--feature{background:var(--accent-soft); border-color:color-mix(in srgb,var(--accent) 22%,transparent)}
.card.card--alert{background:color-mix(in srgb,var(--danger) 8%,var(--surface)); border-color:color-mix(in srgb,var(--danger) 45%,var(--line))}
.card.card--accent{background:var(--accent); border-color:var(--accent); color:#fff}
.card.card--feature h3,.card.card--alert h3,.card.card--accent h3{font-size:var(--text-lg)}
.card.card--accent p,.card.card--accent .muted{color:rgba(255,255,255,.86)}
/* Ögonbryn — liten etikett över hjälte-rubriken ("Veckans moment", "Behöver åtgärd") */
.card__eyebrow{display:block; font-size:var(--text-xs); font-weight:700; letter-spacing:.08em;
text-transform:uppercase; color:var(--accent-text); margin-bottom:var(--s2)}
.card.card--alert .card__eyebrow{color:var(--danger)}
.card.card--accent .card__eyebrow{color:rgba(255,255,255,.92)}
/* ---------- Inforuta (.note) — standard för förklarande hjälptext ----------
Lugn, inte skrikig. Liten italic "i" (knyter an till wordmarken) + mjuk yta. */
.note{
display:flex; gap:var(--s3); align-items:flex-start;
background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-md);
padding:var(--s3) var(--s4); font-size:var(--text-sm); color:var(--muted); line-height:1.5;
}
.note::before{
content:"i"; flex:none; width:18px; height:18px; margin-top:1px;
border-radius:var(--r-full); background:var(--accent); color:#fff;
font-size:12px; font-weight:700; font-style:italic;
display:flex; align-items:center; justify-content:center;
}
.note b{color:var(--ink); font-weight:600}
.note--flat{background:transparent; border-color:transparent; padding:var(--s2) 0} /* när rutan känns för mycket */
/* ---------- Disclosure — hopfällbar rad (bank/kategori-huvud) ----------
Sätter color explicit (annars blir knapptext blå på iOS). Konsekvent "Visa/Dölj". */
.disclosure{width:100%; display:flex; justify-content:space-between; align-items:center; gap:var(--s2);
background:none; border:none; padding:0; cursor:pointer; text-align:left;
color:var(--ink); font:inherit; font-size:var(--text-base)}
.disclosure b{font-weight:600}
.disclosure__cap{color:var(--muted); font-size:var(--text-sm); font-weight:400}
.disclosure__toggle{flex:none; font-size:var(--text-sm); color:var(--accent-text); font-weight:600}
/* ---------- Sektionsrubrik — ger vyer rytm ---------- */
.section-head{font-size:var(--text-xs); letter-spacing:.1em; text-transform:uppercase;
color:var(--faint); font-weight:700; margin:var(--s6) 0 var(--s3)}
/* ---------- Fält ---------- */
.field{display:flex; flex-direction:column; gap:var(--s2); margin-bottom:var(--s4)}
.field label{font-size:var(--text-xs); font-weight:600; color:var(--muted); letter-spacing:.02em}
.input{
width:100%; padding:var(--s3) var(--s4); font:inherit; font-size:var(--text-base);
background:var(--surface); color:var(--ink);
border:1px solid var(--line); border-radius:var(--r-md); outline:none;
transition:border-color .15s,box-shadow .15s;
}
.input:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
/* ---------- Pills & badges ---------- */
.pill{
display:inline-flex; align-items:center; gap:var(--s1);
padding:var(--s1) var(--s3); border-radius:var(--r-pill);
font-size:var(--text-xs); font-weight:600;
background:var(--accent-soft); color:var(--accent-deep);
}
.badge{
display:inline-flex; align-items:center; gap:var(--s1);
padding:2px var(--s2); border-radius:var(--r-sm);
font-size:var(--text-xs); font-weight:700;
}
/* Tonade underlag blandas ur statusfärgen mot ytan i stället för att vara
hårdkodade ljusa tinter — då följer de med i mörkt läge av sig själva. */
.badge--ok{background:color-mix(in srgb,var(--ok) 16%,var(--surface)); color:var(--ok)}
.badge--warn{background:color-mix(in srgb,var(--warn) 16%,var(--surface)); color:var(--warn)}
.badge--danger{background:color-mix(in srgb,var(--danger) 16%,var(--surface)); color:var(--danger)}
/* ---------- Bottom-sheet (modal) ---------- */
.sheet{
background:var(--surface); border-radius:var(--r-xl) var(--r-xl) 0 0;
padding:var(--s6) var(--s5) calc(var(--s6) + env(safe-area-inset-bottom));
box-shadow:var(--shadow-lg);
max-height:92vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.sheet__grip{width:36px; height:4px; border-radius:var(--r-pill); background:var(--line); margin:0 auto var(--s5)}
.sheet__title{font-size:var(--text-lg); font-weight:700; margin:0 0 var(--s1)}
.sheet__sub{color:var(--muted); font-size:var(--text-sm); margin:0 0 var(--s5)}
.sheet__body{display:flex; flex-direction:column; gap:var(--s3)}
.sheet__actions{margin-top:var(--s5)}
/* Overlay-scaffolding: öppna en sheet som fokuserad modal över vyn */
.sheet-backdrop{position:fixed; inset:0; z-index:900; background:rgba(27,24,20,.38);
-webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
display:flex; align-items:flex-end; justify-content:center}
.sheet-backdrop .sheet{width:100%; max-width:560px; animation:sheetRise .28s cubic-bezier(.2,.8,.2,1) both}
@keyframes sheetRise{from{transform:translateY(100%)}to{transform:none}}
/* När en sheet är aktiv: dölj bottom-nav (sheet äger botten-zonen).
BARA på mobil: från 900px är nav en sidomeny vid sidan om innehållet, och att
dölja den lämnar ett tomt hål så länge formuläret är öppet. */
@media (max-width:899px){html.sheet-open nav{display:none}}
/* Desktop: en panel som glider upp från fönstrets underkant är ett mobil-idiom —
i ett 1200px högt fönster tvingar det musen ner i botten och upp igen.
Från 900px blir samma sheet en centrerad dialog. */
@media (min-width:900px){
.sheet-backdrop{align-items:center; padding:var(--s6)}
.sheet-backdrop .sheet{border-radius:var(--r-xl); max-height:86vh; animation-name:sheetPop}
.sheet-backdrop .sheet__grip{display:none} /* greppet hör till dragidiomet */
}
@keyframes sheetPop{from{transform:scale(.97); opacity:.4}to{transform:none; opacity:1}}
/* ---------- Tillbaka-kontroll (standard) — chevron, ingen "Tillbaka"-text ----------
Samma uttryck som trådens back. Använd överallt istället för textpiller. */
.viewback{background:none; border:none; color:var(--accent-text); font-size:30px; line-height:1;
padding:2px 12px 8px 0; margin-left:-4px; display:inline-flex; align-items:center; cursor:pointer}
.viewback:active{opacity:.6}
/* ---------- Tab-bar ---------- */
.tabbar{
display:flex; background:var(--surface); border-top:1px solid var(--line);
padding:var(--s2) 0 calc(var(--s2) + env(safe-area-inset-bottom));
}
.tabbar__item{
flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
font-size:var(--text-xs); color:var(--muted); font-weight:600;
}
.tabbar__item--active{color:var(--accent-text)}
/* ---------- Chatt (delad bubbel-primitiv) ---------- */
.chat{display:flex; flex-direction:column; gap:var(--s2)}
.msg{max-width:82%; padding:11px 15px; border-radius:var(--r-lg); font-size:var(--text-base); line-height:1.4;
white-space:pre-wrap} /* check-ins m.fl. postas flerradigt — radbrytningarna ska överleva */
.msg.me{align-self:flex-end; background:var(--accent); color:#fff; border-bottom-right-radius:5px}
.msg.them{align-self:flex-start; background:var(--surface);
border:1px solid color-mix(in srgb,var(--line) 60%,transparent); border-bottom-left-radius:5px; box-shadow:var(--shadow-sm)}
.msg .t{display:block; font-size:10px; opacity:.55; margin-top:3px}
.msg.msg--grouped{margin-top:calc(var(--s1) - var(--s2))} /* tätare när samma avsändare i följd */
/* Systemposter — chatten är händelseflödet. Dämpade och centrerade så riktiga
meddelanden syns tydligt, klickbara in till vyn som händelsen gäller. */
.msg-sys{align-self:center; max-width:92%; width:100%; display:block; text-align:left;
background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-md);
padding:8px 11px; font:inherit; font-size:var(--text-sm); line-height:1.4; color:var(--fg); cursor:default}
.msg-sys[data-clickable]{cursor:pointer}
.msg-sys[data-clickable]:hover{border-color:var(--accent); background:var(--accent-soft)}
.msg-sys .sys-head{display:flex; align-items:center; gap:6px; font-weight:600; color:var(--muted);
font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.04em; margin-bottom:2px}
.msg-sys .sys-go{margin-left:auto; color:var(--accent-text); text-transform:none; letter-spacing:0; font-weight:600}
.msg-sys .sys-body{display:block; white-space:pre-wrap; margin-top:1px}
.msg-sys .t{display:block; font-size:10px; opacity:.55; margin-top:4px}
/* Datumavdelare i chatt-tråden */
.chat-daysep{text-align:center; margin:var(--s4) 0 var(--s1)}
.chat-daysep span{display:inline-block; font-size:var(--text-xs); font-weight:600; color:var(--muted);
background:var(--surface-2); border:1px solid var(--line); padding:2px var(--s3); border-radius:var(--r-pill)}
/* ---------- Stat (siffra + label) ---------- */
.stat__value{font-size:var(--text-xl); font-weight:700; line-height:1}
.stat__label{font-size:var(--text-xs); color:var(--muted); margin-top:var(--s1)}
/* ---------- Mörk sektion ---------- */
.on-ink{background:var(--ink); color:var(--on-ink)}
.on-ink .muted{color:var(--faint)}