/* Fordonsloggen — designtokens. ENDA källan till färg, typografi och mått.
   Konsumeras av appen OCH hemsidan. Komponenter får ALDRIG hårdkoda värden
   som finns här — det är så plattformarna glider isär.

   MÖRKT ÄR STANDARD (beslut 2026-07-13, efter hemsida v3): paletten utgår
   från marknadssajtens mörka premiumlook (#06100E + teal). Ljust läge är
   ett AKTIVT TILLVAL via :root[data-theme='ljus'] — ingen automatisk
   systemföljning; användaren väljer i Inställningar. */

:root {
  /* Färger — mörkt läge (standard) */
  --bakgrund: #06100E;          /* sidbakgrund — sajtens canvas */
  --yta: #0A1613;               /* kort, paneler, fält (ytstege 1) */
  --yta-hojd: #0D1B17;          /* hover/markerad rad (ytstege 2) */
  --yta-hog: #10201B;           /* öppna/aktiva ytor (ytstege 3) */
  --yta-topp: #13241F;           /* marknadssajtens högsta yta */
  --ram: rgba(148, 210, 197, 0.14);
  --ram-stark: rgba(148, 210, 197, 0.28);
  --ljuskant: rgba(255, 255, 255, 0.07);
  --text: #EAF5F1;
  --text-mut: #A7C4BB;
  --text-svag: #7D9A92;
  --text-invers: #FFFFFF;

  --primar: #0E7C6B;            /* accent: knappar, aktiv nav, ikonbadge */
  --primar-hover: #17A98F;      /* på mörkt: LJUSNA vid hover (aldrig hoppa) */
  --primar-ljus: #7BD9C8;       /* grafer, fokusringar, emfas */
  --primar-mjuk: #A5E6DA;        /* lågmäld accenttext på mörk yta */
  --primar-yta: #123129;        /* tonade chips/badges */
  --lank-text: #7BD9C8;         /* AA-länk/aktiv text på mörka ytor */

  --status-ok: #3DBA7E;
  --status-ok-yta: #0F2A1D;
  --status-varning: #D99A3D;
  --status-varning-yta: #2A2113;
  --status-fel: #E06A5C;
  --status-fel-yta: #2E1613;
  --status-info: #5D96D8;
  --status-info-yta: #13202E;

  --ai-yta: #1E1A2E;            /* AI-genererat innehåll markeras alltid */
  --ai-kant: #8B7BC7;
  --ai-text: #B4A6E8;

  /* Marknadssajtens avsiktligt ljusa rapportyta */
  --papper: #FFFFFF;
  --papper-text: #10231F;
  --papper-mut: #5B6B67;
  --papper-ram: #DCE5E2;
  --papper-ok: #146C42;

  /* Grafserier (mätarserie, kostnad, värde) */
  --serie-1: #3DB59F;
  --serie-2: #8B7BC7;
  --serie-3: #D99A3D;
  --grid: #14241F;

  /* Typografi — systemstack, Inter först där den finns */
  --font: Inter, 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'Cascadia Code', Consolas, ui-monospace, monospace;
  --font-rubrik: 'Space Grotesk', Inter, 'Segoe UI', system-ui, sans-serif;
  --text-xs: 13px;
  --text-s: 14px;
  --text-m: 16px;
  --text-l: 18px;
  --text-xl: 24px;
  --text-xxl: 32px;
  --vikt-normal: 400;
  --vikt-halvfet: 600;
  --vikt-fet: 700;              /* endast logotyp/siffror — text max 600 */
  --radavstand: 1.5;

  /* Mått — 4px-grid */
  --lucka-xs: 4px;
  --lucka-s: 8px;
  --lucka-m: 12px;
  --lucka-l: 16px;
  --lucka-xl: 24px;
  --lucka-xxl: 32px;

  --huvudhojd: 70px;
  /* Stramt formspråk: proffsig, inte lekfull. Pills (999px) är förbjudna
     utom för statuspunkter — igenkänning sker via färg + logga, inte rundning. */
  --radie-falt: 4px;            /* inputs, knappar, chips, flikar */
  --radie-kort: 6px;            /* kort, dialoger, sheets */
  --radie-rund: 999px;          /* ENDAST statuspunkter (små cirklar) */

  /* Skuggor: tealtonad stack med 1px-ring — kanten "tänds" vid hover
     i stället för att kortet flyger (hemsidans mönster). */
  --skugga-kort: 0 0 0 1px rgba(148, 210, 197, 0.10),
                 0 1px 1px rgba(3, 15, 12, 0.35),
                 0 4px 8px -2px rgba(3, 15, 12, 0.30);
  --skugga-flytande: 0 0 0 1px rgba(148, 210, 197, 0.14),
                     0 12px 24px -8px rgba(3, 15, 12, 0.45);

  /* Tryckytor — WCAG-minimum, gäller ALLA plattformar */
  --tryckyta-min: 44px;

  /* Rörelse — endast transform/opacity; stillsam, aldrig hoppig */
  --fart-snabb: 120ms cubic-bezier(.25, 1, .5, 1);
  --fart-normal: 200ms cubic-bezier(.25, 1, .5, 1);
}

/* Ljust läge — AKTIVT TILLVAL (Inställningar → Utseende) */
:root[data-theme='ljus'] {
  --bakgrund: #F5F8F7;
  --yta: #FFFFFF;
  --yta-hojd: #EDF3F1;
  --yta-hog: #E4EDEA;
  --ram: #DCE5E2;
  --ram-stark: #B9CCC6;
  --text: #10231F;
  --text-mut: #5B6B67;
  --text-svag: #7D8F8A;
  --lank-text: #0E7C6B;
  --text-invers: #FFFFFF;
  --primar: #0E7C6B;
  --primar-hover: #0B6558;      /* på ljust: mörkna vid hover */
  --primar-ljus: #7BD9C8;
  --primar-yta: #E7F4F1;
  --status-ok: #146C42;
  --status-ok-yta: #E5F4EC;
  --status-varning: #80520E;
  --status-varning-yta: #F9F0DE;
  --status-fel: #C0392B;
  --status-fel-yta: #FAE9E7;
  --status-info: #2B6CB0;
  --status-info-yta: #E8F0F9;
  --ai-yta: #F3EFFA;
  --ai-kant: #8B7BC7;
  --ai-text: #4C3D8F;
  --serie-1: #0E7C6B;
  --serie-2: #8B7BC7;
  --serie-3: #B7791F;
  --grid: #E4EBE9;
  --skugga-kort: 0 1px 3px rgb(16 35 31 / 0.07);
  --skugga-flytande: 0 8px 28px rgb(16 35 31 / 0.16);
}

/* Brytpunkten — EN enda, samma i app och hemsida.
   <720px: dock-navigation, tabeller blir kompaktkort. ≥720px: sidomeny, tabeller. */
/* @media (max-width: 719.98px) — mobil */
/* @media (min-width: 720px)   — desktop */