/* Materialräknaren – designvariabler (tokens) v1, 2026-11-01
   En källa för hela appen: Räkna material, Kalkyl & offert, hjälpsidor, villkor och filmsidor.
   Teman: Ljust (standard), Mörkt, Automatiskt (följer enheten).
   Sätt data-theme="light" | "dark" | "auto" på <html>. Utan attribut = auto. */

:root {
  /* Typsnitt: en familj. Kondenserad variant används ENBART i ordmärket. */
  --font: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-mark: "IBM Plex Sans Condensed", "IBM Plex Sans", "Arial Narrow", Arial, sans-serif;

  /* Tre textstorlekar – inga andra */
  --fs-rubrik: 1.5rem;      --lh-rubrik: 1.875rem;   /* 24/30 */
  --fs-under: 1.125rem;     --lh-under: 1.5rem;      /* 18/24 */
  --fs-text: 1rem;          --lh-text: 1.5rem;       /* 16/24 – även i fält (iOS zoomar under 16 px) */
  --fw-text: 400;  --fw-label: 500;  --fw-rubrik: 600;

  /* Avstånd – få steg */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;

  /* Form */
  --r-kontroll: 2px;   /* knappar, fält, flikar, kryssrutor */
  --r-panel: 4px;      /* paneler, kort, dialoger */
  --h-kontroll: 36px;  /* en höjd för knappar och fält på dator */
  --h-flik: 44px;
  --h-rubrikrad: 56px;
  --h-nedre-rad: 64px; /* mobil, plus env(safe-area-inset-bottom) */
  --linje: 1px;  --markering: 2px;  --fokus: 2px;

  /* Rörelse – bara som svar på användarens handling */
  --dur: 160ms;  --dur-bock: 320ms;

  /* ---------- Ljust tema (standard) ---------- */
  --c-bakgrund: #DCE2E9;     /* nivå 1: sidans bakgrund */
  --c-yta: #F4F6F9;          /* nivå 2: arbetsyta, paneler, rubrikrad */
  --c-falt: #FFFFFF;         /* nivå 3: insänkta fält */
  --c-upphojd: #E9EDF2;      /* hover, sekundär fyllnad */
  --c-linje: #C3CBD5;        /* avdelare, panelkanter */
  --c-linje-stark: #6F7C8C;  /* fält- och knappkanter (≥3:1) */
  --c-text: #161E28;
  --c-dampad: #4A5666;       /* etiketter, hjälptext (≥4,5:1) */
  --c-accent: #B44A0C;       /* ENDA accent: huvudåtgärd + valt läge */
  --c-pa-accent: #FFFFFF;
  --c-accent-text: #A9450B;  /* sällan: accent som text */
  --c-ok: #1B6E3F;  --c-ok-yta: #E3F2E8;   /* klart, sparat – alltid bock + ord */
  --c-fel: #A8241C; --c-fel-yta: #FBE9E7;  /* fel – alltid med förklarande text */
  --c-fokus: #1F5FCC;                      /* fokusram vid tangentbord */
  --c-rutnat-fin: rgba(38, 78, 128, 0.05); /* Kalkyl & offert: ritningsrutnät */
  --c-rutnat-grov: rgba(38, 78, 128, 0.10);
  --skugga-falt: inset 0 1px 2px rgba(22, 30, 40, 0.10);
  --skugga-panel: 0 1px 0 rgba(22, 30, 40, 0.04), 0 1px 3px rgba(22, 30, 40, 0.06);
  color-scheme: light;
}

/* ---------- Mörkt tema: blåtonad djup marin mot grafit ---------- */
:root[data-theme="dark"] {
  --c-bakgrund: #0D131B;
  --c-yta: #16202B;
  --c-falt: #0A0F15;
  --c-upphojd: #1D2835;
  --c-linje: #2A3747;
  --c-linje-stark: #647589;
  --c-text: #E7ECF2;
  --c-dampad: #A1ADBC;
  --c-accent: #F08A3E;
  --c-pa-accent: #14181E;
  --c-accent-text: #F49A55;
  --c-ok: #5CC88A;  --c-ok-yta: #12301F;
  --c-fel: #FF8B80; --c-fel-yta: #3A1714;
  --c-fokus: #86B6FF;
  --c-rutnat-fin: rgba(134, 172, 222, 0.045);
  --c-rutnat-grov: rgba(134, 172, 222, 0.09);
  --skugga-falt: inset 0 1px 3px rgba(0, 0, 0, 0.55);
  --skugga-panel: 0 1px 0 rgba(0, 0, 0, 0.30);
  color-scheme: dark;
}

/* ---------- Automatiskt: följer enheten ---------- */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"], :root:not([data-theme]) {
    --c-bakgrund: #0D131B; --c-yta: #16202B; --c-falt: #0A0F15; --c-upphojd: #1D2835;
    --c-linje: #2A3747; --c-linje-stark: #647589; --c-text: #E7ECF2; --c-dampad: #A1ADBC;
    --c-accent: #F08A3E; --c-pa-accent: #14181E; --c-accent-text: #F49A55;
    --c-ok: #5CC88A; --c-ok-yta: #12301F; --c-fel: #FF8B80; --c-fel-yta: #3A1714; --c-fokus: #86B6FF;
    --c-rutnat-fin: rgba(134, 172, 222, 0.045); --c-rutnat-grov: rgba(134, 172, 222, 0.09);
    --skugga-falt: inset 0 1px 3px rgba(0, 0, 0, 0.55); --skugga-panel: 0 1px 0 rgba(0, 0, 0, 0.30);
    color-scheme: dark;
  }
}

/* Mobil/pekskärm: tryckyta minst 44 px utan att det visuella blir klumpigt */
@media (pointer: coarse) { :root { --h-kontroll: 44px; } }

/* ---------- Grundregler som gäller alla sidor ---------- */
html { scroll-padding-top: calc(var(--h-rubrikrad) + var(--s4)); }
body { margin: 0; background: var(--c-bakgrund); color: var(--c-text);
  font: var(--fw-text) var(--fs-text)/var(--lh-text) var(--font); }
h1, .rubrik { font-size: var(--fs-rubrik); line-height: var(--lh-rubrik); font-weight: var(--fw-rubrik); text-wrap: balance; }
h2, h3, .underrubrik { font-size: var(--fs-under); line-height: var(--lh-under); font-weight: var(--fw-rubrik); }
.belopp, .matt, td.num, input[inputmode="decimal"] { font-variant-numeric: tabular-nums; }
:focus { outline: none; }
:focus-visible { outline: var(--fokus) solid var(--c-fokus); outline-offset: 2px; }
[tabindex="-1"]:focus { outline: none; }       /* rubriker som får fokus via kod: ingen ram */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }