/* Skuggr: designvärden. Alla värden är tagna ur glasr.se (landing/landing.css, hämtad 2026-10-27),
   utom accenten, som är Skuggrs egen. Byt accenten här, ingen annanstans: se LÄS-MIG.md.
   Namnen --u, --gr, --gr2, --li och --mu är Glasrs egna (mobilskärmarna); övriga namn finns inte i
   Glasrs CSS (där står värdena direkt) och har fått svenska namn här. Ursprungsvärdet står i kommentaren. */
:root {
  /* Accent: Skuggrs egen. Glasr: #17713f, hover #115c32, ljus #e8f3ec, kant #cfe5d7, yta #f3faf6,
     fokusring rgba(23,113,63,.15). Mobilskärmarnas --gr (#047857) och --gr2 (#e8f6ef) följer samma accent. */
  --accent: #12666f;
  --accent-hover: #0d4f56;
  --accent-ljus: #e6f1f2;
  --accent-kant: #c9e0e3;
  --accent-yta: #f2f8f9;
  --accent-ring: rgba(18, 102, 111, .15);

  /* Ytor (Glasr) */
  --bg: #f4f3ef;          /* sidan, banden utan .vitt, .bild, .taggar */
  --vit: #fff;            /* .vit, .band.vitt, kort */
  --yta: #f7f6f2;         /* fönsterlist, sidomeny, tillägg, kontaktrutor */
  --yta-falt: #fafaf7;    /* formulärfält, veckodagar */
  --yta-hover: #efede6;   /* sidomenyns hover */
  --yta-ill: #e6e3da;     /* illustrationernas fyllnad */

  /* Text (Glasr) */
  --ink: #14202b;         /* rubriker och brödtext */
  --text2: #4a5866;       /* ingress och stycken */
  --dim: #7a8794;         /* .dim, loggraden, små etiketter */

  /* Linjer (Glasr) */
  --linje: #e2e0d8;       /* band, kort, tabeller */
  --linje2: #dcd9cf;      /* fönstret, frågelistan */
  --linje3: #d5d2c8;      /* fält, flikknappar, fönsterprickar */
  --linje4: #c9c6bb;      /* konturknappar */
  --linje5: #eeece6;      /* tabellrader */

  /* Varning (Glasr): planeringens orangea rad och orderkortens staplar */
  --varning: #d97706;
  --varning-kant: #f3d9a8;
  --varning-yta: #fffaf0;
  --stapel: #f59e0b;

  /* Typografi (Glasr): Inter med systemets typsnitt som reserv. Glasr laddar inget typsnitt själv. */
  --font: Inter, system-ui, sans-serif;
  --h1: 46px;             /* h1 och .sek-huvud.stor h2, 34px under 900px */
  --h1-lh: 1.08;
  --h1-ls: -.025em;
  --h2: 34px;             /* 28px under 900px */
  --h2-lh: 1.15;
  --h2-ls: -.02em;
  --ingress: 17px;        /* 16px under 900px */
  --ingress-lh: 1.65;
  --ogon: 12.5px;         /* ögonrad: versaler, 700, .12em */
  --ogon-ls: .12em;

  /* Mått (Glasr) */
  --max: 1180px;          /* .ram, med 24px sidmarginal */
  --sidmarg: 24px;
  --band: 88px;           /* avstånd i varje band, 60px under 900px */
  --band-mobil: 60px;
  --radie-knapp: 8px;
  --radie-kort: 12px;
  --radie-ram: 14px;
  --skugga-ram: 0 24px 60px -30px rgba(20, 32, 43, .25); /* bara demofönstret har skugga */
}

/* Mobilskärmarna (Glasr: satta på .skarm med just de här namnen). --u är en pixel i en 390 px bred skärm. */
.skarm {
  --u: calc(100cqw / 390);
  --gr: var(--accent);       /* Glasr: #047857 */
  --gr2: var(--accent-ljus); /* Glasr: #e8f6ef */
  --li: #e5e7eb;
  --mu: #6b7785;
  --tel-kant: #c9ced6;       /* vita knappar och plus/minus */
  --tel-sms: #e9e9eb;        /* sms-bubblan */
  --tel-kol: #f3f4f6;        /* orderkolumnerna */
  --tel-skiss: #fafbfc;      /* måttskissens botten */
  --tel-rutnat: #eef1f4;     /* måttskissens rutnät */
  --tel-glas: #1e3a5f;       /* skissens kontur (Glasr: glasrutan) */
  --tel-glas-fyll: rgba(125, 211, 252, .18);
  --tel-kort-skugga: 0 1px 2px rgba(0, 0, 0, .06); /* orderkorten */
}