/* Mise · tokens
   Varm linneduk som botten, vita kort, en djup bläckfärgad sidomeny och saffran som enda
   handlingsfärg. Övriga färger bär betydelse: enheter, domäner och status. */

:root {
  /* ytor */
  --canvas: #F4F1EC;
  --panel: #FFFFFF;
  --panel-2: #FAF8F5;
  --well: #F1EDE6;
  --hover: rgba(27, 26, 34, .045);
  --active: rgba(27, 26, 34, .08);
  --scrim: rgba(20, 18, 32, .34);

  /* text */
  --ink: #1B1A22;
  --ink-2: #4D4A57;
  --ink-3: #7A7684;
  --ink-4: #ABA7B2;

  /* linjer */
  --line: #ECE7E0;
  --line-2: #DFD9D0;
  --line-3: #CCC5BA;

  /* sidomeny (bläck) */
  --side: #1A1730;
  --side-2: #221F3B;
  --side-ink: #ECE9F5;
  --side-ink-2: #A9A4C2;
  --side-ink-3: #7C77A0;
  --side-line: rgba(255, 255, 255, .08);
  --side-hover: rgba(255, 255, 255, .06);
  --side-active: rgba(255, 255, 255, .11);

  /* handling: saffran med bläcktext. Bara primärknappar, logga och aktiv markör i menyn. */
  --accent: #FFC24B;
  --accent-hover: #FFB52A;
  --accent-ink: #1B1A22;
  --accent-soft: #FFF3D6;

  /* status */
  --ok: #1E9E6A;
  --ok-text: #157A51;
  --ok-soft: #E3F5EC;
  --warn: #E08A1E;
  --warn-text: #A15C07;
  --warn-soft: #FDF0DC;
  --err: #DC4A3D;
  --err-text: #B5332A;
  --err-soft: #FCE7E4;
  --info: #3A6FE0;
  --info-text: #2853B5;
  --info-soft: #E6EDFC;

  /* domäner (ikonbrickor, etiketter) */
  --d-mat: #E0583F;      --d-mat-soft: #FCE8E3;
  --d-dryck: #B0397A;    --d-dryck-soft: #F8E4EF;
  --d-personal: #3A6FE0; --d-personal-soft: #E6EDFC;
  --d-gast: #10907F;     --d-gast-soft: #DFF3EF;
  --d-inkop: #B07A12;    --d-inkop-soft: #FBF0D8;
  --d-ekonomi: #5A4FD0;  --d-ekonomi-soft: #ECEAFB;
  --d-system: #67636F;   --d-system-soft: #EFEDF1;

  /* diagram */
  --grid: #EEEAE3;
  --axis: #CFC8BD;
  --budget: #1B1A22;

  /* form */
  --r-xs: 6px;
  --r-sm: 10px;
  --r: 14px;
  --r-lg: 20px;
  --r-xl: 26px;
  --pill: 999px;
  --shadow-1: 0 1px 2px rgba(27, 26, 34, .04), 0 1px 1px rgba(27, 26, 34, .03);
  --shadow-2: 0 1px 2px rgba(27, 26, 34, .05), 0 6px 18px -6px rgba(27, 26, 34, .10);
  --shadow-3: 0 2px 6px rgba(27, 26, 34, .06), 0 22px 48px -12px rgba(27, 26, 34, .22);

  /* typografi */
  --font: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Bricolage Grotesque", "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --fs-xs: 11.5px;
  --fs-sm: 12.5px;
  --fs: 14px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;

  /* mått */
  --side-w: 248px;
  --top-h: 64px;
  --gap: 16px;
  --pad: 28px;
  --maxw: 1680px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

@media (max-width: 1100px) {
  :root { --pad: 20px; }
}
@media (max-width: 640px) {
  :root { --pad: 14px; --gap: 12px; --fs-2xl: 24px; --fs-3xl: 30px; }
}