/* DriveBase prototyp: designtokens.
   Den enda filen med råa färgvärden. Allt annat läser variablerna nedan.
   Paletten är Drive Managements (docs/beslut/0002-k3-med-drives-tema.md). */

:root {
  color-scheme: light;

  /* ---------- Paletten, råvärden ---------- */
  --pal-navy: #151E3F;
  --pal-bruk: #E8EBEF;
  --pal-beige: #EFECE5;
  --pal-blagra-1: #EBF1F3;
  --pal-blagra-2: #D1DDE1;
  --pal-blagra-3: #D2D7E0;
  --pal-gra: #DCDCDC;
  --pal-blagra-form: #8E9CB1;   /* bara linjer och former, aldrig text */
  --pal-dampad: #606060;        /* dämpad text, 6,3:1 mot vitt */
  --pal-korall: #FF615D;        /* fyllnad och form, aldrig text */
  --pal-korall-ljus: #FF928F;
  --pal-gron: #1FA55C;          /* fyllnad och form, aldrig text */
  --pal-gron-ljus: #BCE8C4;
  --pal-text: #1D1D1B;
  --pal-vit: #FFFFFF;

  /* Palettens färger med genomskinlighet, för hover, skym och fokus */
  --pal-navy-a06: rgb(21 30 63 / .06);
  --pal-navy-a10: rgb(21 30 63 / .10);
  --pal-navy-a55: rgb(21 30 63 / .55);
  --pal-vit-a14: rgb(255 255 255 / .14);
  --pal-vit-a24: rgb(255 255 255 / .24);
  --pal-navy-ljusare: #263264;               /* hover på marinblå knappar */
  --pal-blagra-2-a55: rgb(209 221 225 / .55);/* ljuset som följer pekaren på vita kort */
  --pal-gron-a22: rgb(31 165 92 / .22);      /* ringen runt en grön prick */

  /* ---------- Ytor ---------- */
  --bg: var(--pal-bruk);                 /* sidbakgrund */
  --bg-alt: var(--pal-beige);            /* alternativ bakgrund */
  --yta: var(--pal-vit);                 /* kort, plattor, fält */
  --yta-mjuk: var(--pal-blagra-1);       /* mjuk yta, chip, tomt läge */
  --yta-mjuk-2: var(--pal-blagra-2);     /* starkare mjuk yta. Bara full text ovanpå */
  --yta-mjuk-3: var(--pal-blagra-3);
  --yta-beige: var(--pal-beige);
  --yta-gra: var(--pal-gra);
  --yta-mork: var(--pal-navy);           /* marinblå yta, vit text */

  /* ---------- Text ---------- */
  --text: var(--pal-text);
  --text-dampad: var(--pal-dampad);
  --text-pa-mork: var(--pal-vit);
  --text-dampad-pa-mork: var(--pal-blagra-2);

  /* ---------- Linjer ---------- */
  --linje: var(--pal-blagra-3);          /* tunna avdelare och kortkanter */
  --linje-mellan: var(--pal-blagra-form);/* tydligare dekorativa linjer och former */
  --linje-stark: var(--pal-navy);        /* tabellhuvud, betonade linjer */
  --linje-falt: var(--pal-dampad);       /* fältkanter, minst 3:1 */
  --linje-pa-mork: var(--pal-vit-a24);

  /* ---------- Huvudfärg och accenter ---------- */
  --primar: var(--pal-navy);
  --primar-text: var(--pal-vit);
  --accent: var(--pal-korall);
  --accent-ljus: var(--pal-korall-ljus);
  --accent-text: var(--pal-text);        /* text på korall */
  --accent-2: var(--pal-gron);
  --accent-2-ljus: var(--pal-gron-ljus);
  --accent-2-text: var(--pal-text);      /* text på grönt */
  --gnista: var(--pal-blagra-form);   /* gnistan i ordmärket, på ljust och på navy */

  /* ---------- Systemens plattor ---------- */
  --platta-navy: var(--pal-navy);
  --platta-navy-text: var(--pal-vit);
  --platta-korall: var(--pal-korall);
  --platta-korall-text: var(--pal-text);
  --platta-gron: var(--pal-gron);
  --platta-gron-text: var(--pal-text);
  --platta-bla: var(--pal-blagra-2);
  --platta-bla-text: var(--pal-text);
  --platta-vit: var(--pal-vit);
  --platta-vit-text: var(--pal-text);

  /* ---------- Status. Alltid ihop med form och text ---------- */
  --status-uppe: var(--pal-gron);
  --status-langsam: var(--pal-korall-ljus);
  --status-nere: var(--pal-korall);
  --status-bygger: var(--pal-navy);
  --status-okant: var(--pal-dampad);
  --status-pausad: var(--pal-dampad);
  --status-kontur: var(--pal-text);      /* kontur runt ljusa former */
  --status-yta: var(--pal-vit);          /* märkets bakgrund */

  /* ---------- Diagram ---------- */
  --diagram-grans: var(--pal-dampad);    /* gränslinjen i kurvan, 6,3:1 mot vitt */

  /* ---------- Återkoppling ---------- */
  --ok: var(--pal-gron);
  --ok-yta: var(--pal-gron-ljus);
  --fel: var(--pal-korall);
  --fel-yta: var(--pal-korall-ljus);
  --info: var(--pal-navy);
  --info-yta: var(--pal-blagra-1);
  --varning: var(--pal-korall-ljus);

  /* ---------- Interaktion ---------- */
  --fokus: var(--pal-navy);
  --fokus-pa-mork: var(--pal-vit);
  --fokus-bredd: 3px;
  --fokus-avstand: 3px;
  --hover-mork: var(--pal-navy-a06);     /* läggs ovanpå ljusa ytor */
  --hover-mork-2: var(--pal-navy-a10);
  --hover-ljus: var(--pal-vit-a14);      /* läggs ovanpå mörka och färgade ytor */
  --hover-ljus-2: var(--pal-vit-a24);
  --skym: var(--pal-navy-a55);           /* bakom dialoger och lådor */
  /* Avstängt läge: färger ur paletten i stället för opacitet, så att texten håller 4,5:1 */
  --avstangd-bg: var(--pal-blagra-1);    /* #EBF1F3 */
  --avstangd-text: var(--pal-dampad);    /* #606060, 5,51:1 mot --avstangd-bg och 6,29:1 mot vitt */
  --avstangd-kant: var(--pal-blagra-3);
  --avstangd-text-pa-mork: var(--pal-blagra-2);

  /* ---------- Typsnitt ---------- */
  --font-rubrik: "Rethink Sans", "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-text: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace;

  --vikt-normal: 400;
  --vikt-mellan: 500;
  --vikt-fet: 700;
  --vikt-rubrik: 800;

  --fs-2xs: .75rem;     /* 12 */
  --fs-xs: .8125rem;    /* 13 */
  --fs-s: .875rem;      /* 14 */
  --fs-m: .9375rem;     /* 15 */
  --fs-bas: 1rem;       /* 16 */
  --fs-l: 1.125rem;     /* 18 */
  --fs-xl: 1.375rem;    /* 22 */
  --fs-2xl: 1.625rem;   /* 26, sektionsrubrik */
  --fs-3xl: 2rem;       /* 32 */
  --fs-4xl: clamp(2.5rem, 1.6rem + 2.6vw, 4rem);      /* sidrubrik i admin */
  --fs-5xl: clamp(3rem, 1.1rem + 6.6vw, 7.75rem);     /* portalens hälsning */
  --fs-tal: clamp(2.5rem, 1.8rem + 2vw, 4rem);        /* stora nyckeltal */

  --radavstand-tat: .95;
  --radavstand-rubrik: 1.1;
  --radavstand: 1.5;
  --spacing-rubrik: -.04em;
  --spacing-rubrik-liten: -.02em;

  /* ---------- Avstånd, steg om 4 px ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 28px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-14: 56px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --marginal: clamp(16px, 3.6vw, 56px);   /* sidans inre marginal */

  /* ---------- Radier ---------- */
  --r-xs: 6px;
  --r-s: 8px;
  --r-m: 14px;     /* knappar och fält */
  --r-l: 24px;     /* kort */
  --r-xl: 32px;    /* plattor */
  --r-rund: 999px;

  /* ---------- Mått ---------- */
  --klickyta: 44px;
  --knapp-hojd: 48px;
  --innehall-max: 1680px;

  /* ---------- Rörelse ---------- */
  --t-snabb: 120ms;
  --t-normal: 200ms;
  --t-lugn: 320ms;
  --t-glid: 420ms;     /* markören under flikarna */
  --t-intro: 380ms;    /* vyns delar när routern byter vy */
  --kurva: cubic-bezier(.2, .7, .2, 1);
  --kurva-fjader: cubic-bezier(.34, 1.3, .44, 1);   /* glidning med en liten översväng */

  /* ---------- Lager ---------- */
  --z-bas: 1;
  --z-sticky: 10;
  --z-toast: 20;      /* under dialogerna, över innehållet */
  --z-skym: 29;
  --z-meny: 30;
  --z-popup: 40;
  --z-dialog: 50;
  --z-hoppa: 70;      /* länken Hoppa till innehållet, överst när den har fokus */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-snabb: 0ms;
    --t-normal: 0ms;
    --t-lugn: 0ms;
    --t-glid: 0ms;
    --t-intro: 0ms;
  }
}