/* ============================================================
   Domänpanelen — designtokens
   ------------------------------------------------------------
   Enda stället där råa värden får stå. Allt annat refererar hit.
   Lägg aldrig en hex-kod eller ett pixeltal direkt i en komponent.
   ============================================================ */

:root {
  /* --- neutralskala ------------------------------------------------ */
  --grå-0:  #ffffff;
  --grå-50: #fafafc;
  --grå-100:#f5f5f7;
  --grå-200:#ececf0;
  --grå-300:#e5e5ea;
  --grå-400:#c7c7cc;
  --grå-500:#a1a1a6;
  --grå-600:#6e6e73;
  --grå-700:#48484a;
  --grå-800:#2c2c2e;
  --grå-900:#1d1d1f;

  /* --- accent ------------------------------------------------------ */
  --accent-50: #eef1fd;
  --accent-100:#dbe1fa;
  --accent-200:#c9d3f7;
  --accent-500:#3b5bdb;
  --accent-600:#2f49b2;
  --accent-700:#24388a;

  /* --- semantiska färger -------------------------------------------
     Fyra tillstånd, alltid samma innebörd:
       ok    = fungerar som det ska
       warn  = fungerar, men bör ses över
       fel   = trasigt eller farligt
       vilar = medvetet inaktivt, inte ett problem                     */
  --ok-yta:   #e8f6ec;  --ok-kant:   #b8e2c4;  --ok-text:   #248a3d;
  --warn-yta: #fdf0e3;  --warn-kant: #f2d5ab;  --warn-text: #b25000;
  --fel-yta:  #fdecec;  --fel-kant:  #f5c2c2;  --fel-text:  #c9252d;
  --vilar-yta:#f0f0f3;  --vilar-kant:#e0e0e5;  --vilar-text:#6e6e73;

  /* --- roller (det komponenter faktiskt använder) ------------------ */
  --yta-botten:  var(--grå-100);
  --yta:         var(--grå-0);
  --yta-dämpad:  var(--grå-50);
  --yta-hover:   var(--grå-200);
  --kant:        var(--grå-300);
  --kant-stark:  var(--grå-400);

  --text:        var(--grå-900);
  --text-dämpad: var(--grå-600);
  --text-svag:   var(--grå-500);
  --text-invers: var(--grå-0);

  --accent:      var(--accent-500);
  --accent-mörk: var(--accent-600);
  --accent-yta:  var(--accent-50);
  --accent-kant: var(--accent-200);

  /* --- typografi ---------------------------------------------------- */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, "SF Mono", monospace;

  --text-2xs: 10.5px;
  --text-xs:  11.5px;
  --text-sm:  12.5px;
  --text-md:  13.5px;
  --text-lg:  15px;
  --text-xl:  17px;
  --text-2xl: 21px;
  --text-3xl: 26px;

  --vikt-normal: 400;
  --vikt-medium: 500;
  --vikt-fet:    600;

  --radhöjd-tät:   1.35;
  --radhöjd:       1.5;
  --radhöjd-luftig:1.65;

  /* Versaler med luft — används till alla etiketter och tabellrubriker. */
  --etikett-spacing: .06em;

  /* --- mått --------------------------------------------------------- */
  --steg-1: 4px;
  --steg-2: 7px;
  --steg-3: 11px;
  --steg-4: 15px;
  --steg-5: 20px;
  --steg-6: 28px;
  --steg-7: 40px;

  --rund-sm: 4px;
  --rund:    6px;
  --rund-lg: 9px;
  --rund-xl: 12px;
  --rund-rund: 999px;

  --skugga-sm: 0 1px 2px rgba(0,0,0,.04);
  --skugga:    0 2px 8px rgba(0,0,0,.06);
  --skugga-lg: 0 4px 18px rgba(0,0,0,.08);

  --snabbt: 120ms ease;
  --lugnt:  220ms ease;

  --max-bredd: 1180px;
  --sidopanel: 360px;
}

/* --- mörkt läge ----------------------------------------------------
   Bara rollerna skrivs om. Komponenterna vet ingenting om temat.      */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="ljust"]) {
    --yta-botten:  #161618;
    --yta:         #1f1f22;
    --yta-dämpad:  #252529;
    --yta-hover:   #2c2c31;
    --kant:        #35353b;
    --kant-stark:  #46464e;

    --text:        #f2f2f5;
    --text-dämpad: #a1a1a6;
    --text-svag:   #78787e;

    --accent:      #6a85f1;
    --accent-mörk: #8199f4;
    --accent-yta:  #22263d;
    --accent-kant: #39406a;

    --ok-yta:   #16301f;  --ok-kant:   #234a2e;  --ok-text:   #5ed17f;
    --warn-yta: #33240f;  --warn-kant: #4d3818;    --warn-text: #f0a355;
    --fel-yta:  #351a1c;  --fel-kant:  #50282b;    --fel-text:  #f4868c;
    --vilar-yta:#2a2a2f;  --vilar-kant:#3a3a41;    --vilar-text:#a1a1a6;

    --skugga-sm: 0 1px 2px rgba(0,0,0,.3);
    --skugga:    0 2px 8px rgba(0,0,0,.4);
    --skugga-lg: 0 4px 18px rgba(0,0,0,.5);
  }
}

:root[data-tema="mörkt"] {
  --yta-botten:#161618; --yta:#1f1f22; --yta-dämpad:#252529; --yta-hover:#2c2c31;
  --kant:#35353b; --kant-stark:#46464e;
  --text:#f2f2f5; --text-dämpad:#a1a1a6; --text-svag:#78787e;
  --accent:#6a85f1; --accent-mörk:#8199f4; --accent-yta:#22263d; --accent-kant:#39406a;
  --ok-yta:#16301f; --ok-kant:#234a2e; --ok-text:#5ed17f;
  --warn-yta:#33240f; --warn-kant:#4d3818; --warn-text:#f0a355;
  --fel-yta:#351a1c; --fel-kant:#50282b; --fel-text:#f4868c;
  --vilar-yta:#2a2a2f; --vilar-kant:#3a3a41; --vilar-text:#a1a1a6;
}