/* ===========================================================================
   Lys — the design tokens. ONE file, prefix --l-.

   Every colour, size, radius, shadow and duration the Lys components read
   is declared here and nowhere else. A component sheet that needs a value
   this file does not have adds it HERE, named, with a line saying what it
   is for — never a raw number in a rule. That is what keeps sixty routes
   built by eight lanes looking like one product: they cannot disagree about
   a value they all read from the same line.

   The direction (docs/skisser/lys/LYS.md): Jonatan's first reference is a
   white 40px frame on cool grey, an off-white sidebar with a white active
   pill, navy text, purple as the one strong colour, and cyan/pink/peach as
   card tints. The second reference lends the warm orange for «akutt», the
   gradient greeting, rings and gauges.

   CONTRAST. The reference's secondary grey (≈#9A9DB0) reads 2.6:1 on white
   and fails WCAG AA; --l-mute below is the darkest grey that still reads as
   "light" beside navy (4.9:1). Orange with white text is 2.6:1, so an
   orange surface always carries NAVY text, and orange-as-text uses the
   darkened --l-orange-ink (5.2:1). Purple on white passes at 5.1:1, which
   is why the primary button may be filled purple with white text.
   ========================================================================= */
:root {
  /* oppsett.css: the padlock on a locked dashboard card. */
  /* Phosphor's LockSimple, bold, in --l-ink: a background image cannot take
     currentColor, so the ink is written into it. */
  --ob-laas-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%231D1D4F'%3E%3Cpath d='M208,76H180V56a52,52,0,0,0-104,0V76H48A20,20,0,0,0,28,96V208a20,20,0,0,0,20,20H208a20,20,0,0,0,20-20V96A20,20,0,0,0,208,76ZM100,56a28,28,0,0,1,56,0V76H100ZM204,204H52V100H204Z'/%3E%3C/svg%3E");
  /* ---- surfaces ---- */
  --l-bg: #F0F1F3;            /* the page behind the frame */
  --l-frame: #FFFFFF;         /* the app frame and every card */
  --l-panel: #FAFAFB;         /* the sidebar, the search field's rest state */
  --l-sunk: #F4F5F8;          /* a pressed row, a table's zebra, a track */
  --l-line: #EEF0F4;          /* hairline card borders */
  --l-line-2: #E1E4EB;        /* dividers that must be seen: table rules, top bar divider */
  --l-scrim: rgba(29, 29, 79, .32);  /* behind a sheet or modal */
  --l-scrim-lett: rgba(29, 29, 79, .08);  /* behind the phone's AI bubble: the page stays readable */

  /* ---- ink ---- */
  --l-ink: #1D1D4F;           /* navy: headings, numbers, labels */
  --l-ink-2: #3F3F6E;         /* body copy on tinted surfaces, hero address */
  --l-mute: #666A80;          /* secondary labels — 5.3:1 on white, 4.8:1 on the phone lists' lavender (27 Sept: #6B6F85 was 4.43:1 there) */
  --l-placeholder: #6B6F85;   /* placeholder text — 4.9:1; the spec exempts placeholders, lys-vakt does not */
  --l-on-fill: #FFFFFF;       /* text on purple and navy */
  --l-on-fill-soft: rgba(255, 255, 255, .28);  /* a track or rule drawn on purple */

  /* ---- purple, the primary ---- */
  --l-purple: #6C5DD3;
  --l-purple-deep: #5B4CC0;   /* hover / active fill */
  --l-purple-ink: #4A3DB0;    /* purple as text on white — 8.1:1 */
  --l-purple-soft: #ECEAFB;   /* tinted pill background */
  --l-purple-line: #D5D0F3;

  /* ---- tints from the reference ---- */
  --l-cyan: #D6F3FB;  --l-cyan-deep: #9FE0F5;  --l-cyan-ink: #0E5F7C;
  --l-pink: #F6C2CC;  --l-pink-deep: #F4A9B8;  --l-pink-ink: #A3304F;
  --l-peach: #FFE9C9; --l-peach-deep: #FFD59A; --l-peach-ink: #7A4E0A;
  --l-yellow: #FFF3C4; --l-yellow-ink: #5F4600;   /* the tiny «NY» pill */
  --l-google-attr: #5E5E5E;   /* Google's own colour for its «Google Maps» text attribution (0461) */
  --l-gull: #F2B01E;          /* a filled rating star; the empty one is an outline in --l-mute */

  /* ---- warm accents from the second reference ---- */
  --l-orange: #FF7A45;        /* akutt — always with navy text, never white */
  --l-orange-2: #FF8A65;      /* gradient start */
  --l-salmon: #FFB199;        /* gradient end */
  --l-orange-ink: #C2410C;    /* orange as text — 5.2:1 */
  --l-orange-soft: #FFEDE5;

  /* ---- outcome colours ---- */
  --l-green: #DCF5E7;  --l-green-ink: #176B3A;   /* booket, ferdig */
  /* The drawn icons' colour shapes (TegnetIkon, the founder's F, 27 Sept):
     one per kind of place, saturated enough to read behind a navy line. */
  --l-tegnet-lilla: #A99CF5; --l-tegnet-cyan: #6FCFEA; --l-tegnet-rosa: #F48FAE; --l-tegnet-gronn: #72D9A2;
  /* The white wash over the page for the beat a job is done (side-oppdrag-detalj.css .lod-ferdig), and the ring's green. */
  --l-ferdig-slor: rgba(255, 255, 255, .94);
  /* «Pengene dine» (/okonomi): the soft fills of the jar, the levels and the weekly bars. One shade
     deeper than the card tints, so a piece of money reads as a thing and not as a background. */
  --l-krukke-tilbud: #BFE9F8; --l-krukke-planlagt: #D9D3F7; --l-krukke-utfort: #FFD7A8;
  --l-krukke-fakturert: #BFEBD0; --l-krukke-betalt: #8EDDB0;
  --l-pling-fakt: #6B5BD6; --l-pling-utfort: #75B7FE;   /* /okonomi's weeks: invoiced, and done but not invoiced */
  --l-krukke-kant: #DCD8F6;   /* the jar's glass edge */
  --l-krukke-forrige: #BDB3EE; /* the earlier period's line */
  --l-krukke-glass: rgba(255, 255, 255, .75);   /* a white row laid on a tinted card */
  --l-krukke-skygge: drop-shadow(0 8px 14px rgba(29, 29, 79, .16));   /* the mascot standing on the card */
  --l-tegnet-fersken: #FFB56B; --l-tegnet-oransje: #FF9469; --l-tegnet-gra: #B9BECC;
  --l-tegnet-flis: 2rem;      /* 32 — a drawn icon where a card title's tile was */
  /* The phone's lists as the founder's own key cards (27 Sept, «A»;
     komponenter.css § 35): tinted cards with a large drawing. */
  --l-r-tkort: 1.5rem;        /* 24 — a list card, a touch rounder than a plain card, as the key cards */
  /* Smaller on 28 Sept: at 46 px drawings, 16 px padding and 44 px pills a
     card was 170 px tall and I dag showed one and a half of them (the
     founder, on his iPhone: «the design on the phones is too big»). The
     pill and the tick are drawn at 36 and keep a 44 px hit area. */
  --l-tkort-ikon: 2.25rem;    /* 36 — the drawing at a list card's top left */
  --l-tkort-pil: 1.875rem;    /* 30 — a list card's arrow circle, a size under the key cards' */
  --l-tkort-pad: var(--l-s-3);  /* 12 — inside a list card */
  --l-tkort-knapp: 2.25rem;   /* 36 — a list card's drawn pill and tick */
  --l-hjem-firma: 3.25rem;    /* 52 — a firm's trade figure on Mitt hjem (mitt-hjem.css), a size over a list card's drawing */
  --l-pling-hode: 1.375rem;   /* 22 — Pling's head beside «Booket av Pling» */
  --l-skjelett-tenker: 9rem; /* 144 — the thinking figure while the front page loads */
  --l-cal-now-figur: 2rem;    /* 32 — the walking figure at the end of the calendar's «Nå» line */
  /* The overview on a phone (28 Sept, «samme design … bare mye mindre»):
     the greeting's figure and the booking-share ring, drawn small. */
  --l-maskot-tlf: 6.5rem;     /* 104 — the trade's figure beside the greeting */
  --l-andel-tlf: 8.5rem;      /* 136 — the booking-share ring */
  --l-red: #FF5A5F;    --l-red-ink: #B42328;  --l-red-soft: #FFE4E5;  /* the mail dot, danger */
  --l-grey-pill: #ECEEF3; --l-grey-ink: #4F5368; /* avlyst, arkivert */
  --l-fane-pille: #D9DCE4;  /* the current tab's pill (the owner, 15 Oct: greyer than --l-grey-pill, which avlyst/arkivert keep; #E2E5EC was still too light) */

  /* ---- gradients ---- */
  --l-grad-warm: linear-gradient(110deg, var(--l-orange-2), var(--l-salmon));
  /* The AI mark (components/lys/AiOrb.tsx) — the logo's blue star, 14 Oct
     (it replaced the owner's sound wave of 5 Oct): the four-armed star over
     the «i» in scripts/merke.mjs, its SPARKLE path with the same rounded
     tips (stroke 24), as a mask. The waveform beside it on /assistent draws
     with --l-orb-bla-dyp. */
  --l-stjerne-form: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='680 216 136 136'%3E%3Cpath d='M748.0 230.8C752.9 258.1 766.9 276.3 799.8 283.3C766.9 290.3 752.9 308.5 748.0 337.9C743.1 308.5 729.1 290.3 696.2 283.3C729.1 276.3 743.1 258.1 748.0 230.8Z' stroke='%23000' stroke-width='24' stroke-linejoin='round'/%3E%3C/svg%3E");
  --l-merke-ink: #111340; /* the wordmark's navy (public/merke/pling-ordmerke.svg), for the inline copy on /logg-inn */
  --l-stjerne: #75B7FE;  /* the logo's blue (merke.mjs BLUE), one colour all over (the owner, 14 Oct) */
  --l-stjerne-skygge: rgba(117, 183, 254, .55);
  --l-orb-bla-dyp: #9EC3F2;      /* the waveform bars */
  /* The sparks on the setup page (oppsett.css) keep three of the old wave's
     colours. */
  --l-grad-orb-prikk-bla: linear-gradient(180deg, #BFE0FF, #7AB2FF);
  --l-grad-orb-midt: linear-gradient(180deg, #B9A0F5, #D3C8F8 55%, #EAF1FF);
  --l-grad-orb-prikk-rosa: linear-gradient(180deg, #FFB3E6, #F06AD8);
  --l-orb-skygge-maske: radial-gradient(closest-side, #000 25%, transparent 100%);
  --l-grad-gauge: linear-gradient(90deg, var(--l-purple), var(--l-orange));

  /* ---- type ---- */
  --l-font: var(--f-lys, "Plus Jakarta Sans"), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --l-t-xs: max(var(--l-t-xs-telefon, 0.75rem), 11px);      /* 12 (13 on a phone, below), never under 11 px on a scaled desk — the «NY» pill, axis labels */
  --l-t-sm: max(var(--l-t-sm-telefon, 0.8125rem), 12px);   /* 13 (14 on a phone, below), never under 12 px on a scaled desk — meta lines, stat badge labels */
  --l-t-body: max(1rem, 13px);                              /* 16 (13 at the smallest scaled desk) — never smaller in an input on a phone */
  --l-t-md: max(clamp(0.9375rem, 0.9rem + 0.2vw, 1rem), 13px); /* 15–16, never under 13 px — card labels, nav labels */
  --l-t-lg: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);        /* 18–22 — section titles */
  --l-t-title: clamp(1.375rem, 1.2rem + 0.7vw, 1.625rem);   /* 22–26 — the page title, semibold */
  --l-t-display: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);        /* 24–32 — hero name, stat numbers, bold */
  --l-t-stat: 1.125rem;                                     /* 18 — the value beside a hero badge */
  --l-w-reg: 400; --l-w-med: 500; --l-w-semi: 600; --l-w-bold: 700; --l-w-black: 800;
  --l-lh-tight: 1.05; --l-lh-snug: 1.25; --l-lh-body: 1.5;
  --l-ls-tight: -0.015em; --l-ls-caps: 0.12em;

  /* ---- radii ---- */
  --l-r-frame: 2.5rem;   /* 40 — the app frame */
  --l-r-hero: 1.5rem;    /* 24 — hero, promo card, active nav pill, sheets */
  --l-r-card: 1.25rem;   /* 20 — every card */
  --l-r-md: 1rem;        /* 16 — inputs, list rows */
  --l-r-sm: 0.75rem;     /* 12 — small buttons, chips in tables */
  --l-r-xs: 0.5rem;      /* 8  — tags inside text */
  --l-r-pill: 999px;

  /* ---- spacing ---- */
  --l-s-1: 0.25rem; --l-s-2: 0.5rem; --l-s-3: 0.75rem; --l-s-4: 1rem; --l-s-5: 1.25rem;
  --l-s-6: 1.5rem; --l-s-7: 2rem; --l-s-8: 2.5rem; --l-s-9: 3rem; --l-s-10: 4rem;
  --l-gap: clamp(1rem, 0.75rem + 0.9vw, 1.5rem);        /* 16–24 between cards */
  --l-inset: clamp(1rem, 0.5rem + 2vw, 2.5rem);          /* 16–40 page padding inside the frame */
  --l-card-pad: clamp(1rem, 0.85rem + 0.6vw, 1.5rem);    /* 16–24 inside a card */
  --l-max: 100rem;                                       /* content never wider than this: 1600 px at the full 16 px root, more as the root grows; 72rem until 23 Oct left a dead band either side of a wide window */

  /* ---- sizes ---- */
  --l-login-merke: 8.75rem;   /* the wordmark over the sign-in card in the app */
  --l-topbar-avatar: 2.25rem; /* 36 — the account circle in the phone's top bar */
  /* «Kom i gang» on the phone's Hjem (app/i-dag/KomIGang.tsx). */
  --l-kig-figur: 4.125rem; --l-kig-jubel: 4.75rem; --l-kig-luft: 2.25rem; --l-kig-flis: 2.5rem;
  --l-kig-rad: 3.75rem; --l-kig-pille: 2.125rem; --l-kig-segl: 1.75rem;
  --l-omv-figur: 5.5rem;       /* the whole mascot standing beside the tour's bubble (a pose, 300 × 480) */
  --l-omv-figur-skulder: 4.5rem; /* the bubble sits at its shoulder, not its feet */
  --l-omv-trykk: 2.75rem;      /* the tour's finger on a thing it presses (a fingertip, a touch target wide) */
  --l-omv-las: 3.5rem;         /* the padlock that opens at the end of the tour (omvisning-stil.ts, omv-las-*) */
  --l-omv-glod: 120vmax;       /* the bloom that spreads from the middle as the tour's veil thins: wider than the screen */
  --l-t-trykk: 720ms;          /* that press: down, the ring out, up (Omvisning.tsx TRYKK_MS waits as long) */
  --l-touch: 2.75rem;         /* 44 — the smallest tap target */
  --l-control: 3rem;          /* 48 — inputs and buttons on a phone */
  --l-control-lg: 3.5rem;     /* 56 — the search pill */
  --l-icon: 1.375rem;         /* 22 — nav and card icons */
  --l-icon-sm: 1.125rem;      /* 18 — inside buttons and pills */
  --l-icon-lg: 2.125rem;      /* 34 — stat card icon */
  /* The icon tile beside a card title, taken from Oversikt's card heads
     (.l-oversikt__flis) so every page's head tile has one size and one corner.
     Before 26 Sept they were 40 or 44, pill or 12 or 16 rounded, depending on
     which page was written first; side by side it read as five designs. */
  --l-tile: var(--l-touch);
  --l-tile-r: var(--l-r-md);
  --l-avatar: 2.75rem; --l-avatar-sm: 2rem; --l-avatar-xs: 1.5rem;
  --l-badge: 2.5rem;          /* 40 — the navy circle in the hero */
  --l-hale: 0.875rem;         /* 14 — a bubble's tail: the bell and account menus */
  --l-stemme-kule: 5.5rem;    /* 88 — the voice orb on /assistent, a desk (the owner, 4 Oct: 180 was «far too big») */
  --l-stemme-kule-stor: 9rem; /* 144 — the orb alone in the middle of the minimal Din Pling (the owner, 15 Oct: «stor og sentrert»); between the 88 of 4 Oct and the 180 he found far too big */
  --l-stemme-kule-sm: 4rem;   /* 64 — the same orb on a phone */
  /* A hero drawn as a band (Telefonsvar, 27 Sept): its scene on a desk and
     on a phone, and the pink blob behind it, sized to the band. */
  --l-band-art: 14rem; --l-band-art-sm: 6.5rem; --l-band-blob: 12rem;
  /* The corner helper's width (Hjelper.tsx), phone and desk alike since
     27 Sept: at 7.5 rem on a desk it lay over «Marker behandlet» on
     Beskjeder and the last column of Kunder, Kalender and Oppdrag. */
  --l-hjelper-str: 4rem;      /* 64 — a compact head-only launcher */
  --l-hjelper-str-tlf: 3rem;  /* 48 — stays above the 44 px touch minimum */
  --l-hjelper-dokk-str: 48px; /* a fixed touch minimum leaves room for enlarged text */
  /* «I dag», the phone's home (27 Sept): one readable column, also on a
     desk, and the width of its visit clock so the rows line up. */
  --l-felt-maks: 40rem; --l-felt-klokke: 3.25rem;
  --l-go: 1.75rem;            /* 28 — the visible arrow circle on a stat card; the hit area stays --l-touch */
  --l-side-w: clamp(16rem, 20vw, 19.25rem);  /* the sidebar: 20 % of the window (22 % until 22 Oct), full width from about 1540 px and narrower below, so it gives its width back on a small screen */
  --l-frame-inset: 0px; /* the margin around the app frame: none since 14 Oct, the app fills the window (it was 24 px at 1440 and read as «a screen inside a screen») */
  --l-tabbar-item: 4rem;      /* one tab's height inside the floating bar */
  --l-tabbar-luft: 0.625rem;  /* the air around the floating bar (4 Oct) */
  /* The room the phone's tab bar takes from the bottom, excluding the safe
     area: since 4 Oct it floats, so its own height plus the air under it.
     Everything that sits above the bar (toasts, the helper) reads this. */
  --l-tabbar-h: calc(var(--l-tabbar-item) + var(--l-tabbar-luft));
  /* The new-beskjed banner's height while it stands, set on <html> by BeskjedPopup.tsx; the page adds it
     to its bottom room (skall.css .l-frame) so the last card can be scrolled clear of it. */
  /* 10 Oct, the owner's pick for the phone's bar: five tabs, each with its
     word. The assistant was a 56 px circle standing 18 px above the bar with
     no word under it — the one tab he could not name. It is now the same
     size as the other four glyphs and sits in the row with «Spør Pling»
     under it; the living sound wave is still its mark. */
  --l-pr-avatar: 6rem;        /* the person's avatar, large, on their profile (app/mobil/profil) */
  --l-av-forhand: 8rem;       /* the avatar editor's live preview (app/mobil/profil/AvatarArk) */
  --l-av-mini: 2.5rem;        /* a preset in «Velg ferdig» */
  --l-av-prikk: 1.75rem;      /* a skin or hair colour swatch */
  --l-tabbar-kule: 1.75rem;   /* the assistant's mark in the bar */
  --l-tabbar-loft: 0rem;      /* it no longer stands above the bar */
  /* The phone's Hjem (app/styles/lys/hjem.css). */
  --l-ls-merke: 0.06em;                                     /* a card's small caps label */
  --l-t-hjem: clamp(1.375rem, 1.2rem + 0.9vw, 1.625rem);    /* 22–26 — the one card's title */
  --l-hjem-knapp: 3.5rem;     /* 56 — the one filled button: a gloved thumb's target */
  --l-hjem-knapp-liten: 3rem; /* 48 — the same button on a card that must not shout */
  --l-hjem-ikon: 1.75rem;     /* 28 — a row's and a side action's drawn icon */
  --l-hjem-rad: 3.5rem;       /* 56 — one quiet row */
  --l-tom-art: 12rem;         /* the drawing over an empty phone list */
  /* «Aktivt arbeid» (app/styles/lys/aktivt.css): sizes only. Its colours are
     the running timer's own (stempling.css .l-timerkort.is-igang). */
  --l-aktiv-hoyde: calc(100dvh - 15rem);                    /* most of a phone's screen, the top bar and tab bar left in view */
  /* A new employee's first-run (app/styles/lys/velkomst.css): one screen's
     height, with the phone's top and the floating tab bar left in view, and
     the standing mascot over its words. */
  --l-velkomst-hoyde: calc(100dvh - 13rem);
  --l-velkomst-figur: 7rem;   /* 112 — the pose is 300 × 480, so about 180 high */
  --l-omv-vk-figur: 10rem;    /* the tour's welcome page (omvisning.css .omv-vk): one figure alone on a white page, so larger, about 256 high */
  /* Where a bottom sheet may reach to at most (ark.css and every phone sheet):
     below the status bar and a strip more, so the page peeks out above it and
     the grabber is never under the clock (30 Oct, the avatar editor). */
  --l-ark-topp: calc(env(safe-area-inset-top, 0px) + var(--l-s-8));
  --l-aktiv-signatur: 10rem; /* the field the customer signs in: a name written with a finger */
  --l-signatur-b: 7rem;       /* a saved signature beside who signed, on the job's page */
  --l-t-klokke: clamp(3.25rem, 2rem + 6vw, 4.5rem);         /* 52–72 — the running clock, read from a ladder */
  --l-t-klokke-rolig: clamp(2.25rem, 1.5rem + 3.5vw, 2.75rem); /* 36–44 — the same clock once the mode has settled */
  --l-aktiv-rolig: 20rem;     /* the settled mode's floor: just under what it holds */
  --l-ease-bort: cubic-bezier(.55, 0, .75, .2); /* speeding up as it leaves: the saved documentation, the timer card into the island */
  --l-t-lagret: 420ms;        /* the documentation flying into the job when saved (LAGRET_MS in AktivtArbeid.tsx) */
  --l-t-ut: 200ms;            /* a view of the working mode leaving, before the next arrives (UT_MS in AktivtArbeid.tsx) */
  --l-t-rolig: 520ms;         /* the working mode settling: one slow, soft move */
  --l-aktiv-kamera: 5rem;     /* 80 — «Ta bilde»: found with a glove on */
  --l-aktiv-del: 5rem;        /* 80 — a photo beside its text in «Dokumenter arbeidet» */
  --l-aktiv-bilde: 4rem;      /* 64 — one photo in the session's row */
  --l-t-aktiv: 320ms;         /* a card or a view arriving on the phone (420 until the owner asked for «raske» the same day) */
  --l-t-inn: 240ms;           /* a tab, a page or a row arriving on the phone (bevegelse-mobil.css) */
  --l-inn-fra: 0.4;           /* where a tab's fade-in starts: never from nothing, which is a blank pane for its first frames (bevegelse-mobil.css; GlassZoom.tsx inngang starts there too) */
  --l-t-trinn: 28ms;          /* the beat between two things arriving one after the other */
  --l-t-kort: 60ms;           /* a flash going on: at once, then it fades */
  /* What a page keeps clear at its foot: the bar AND the assistant circle
     standing above it. Reserving only --l-tabbar-h let the last line of a
     page — the refresh line's «Pause», right under the circle — end 11 px
     from the circle's glow at 390 × 844 (measured), with nothing but the
     page's own padding keeping them apart; an owner's screenshot showed it
     under the bar (4 Oct).
     Fixed things that sit ABOVE the bar (toasts, the helper) keep reading
     --l-tabbar-h: they float, and the circle is in the middle, not under them. */
  /* 10 Oct: with the circle down in the row (--l-tabbar-loft is 0) this sum
     had become the bar's height plus the air UNDER it, 10 px short of where
     the floating bar's top edge actually is — the summary card's last
     button sat with its foot behind the bar. The air above the bar is now
     counted too. */
  --l-tabbar-rom: calc(var(--l-tabbar-h) + var(--l-tabbar-luft) - var(--l-tabbar-loft));
  /* What the bar was measured to cover from the foot of the layout viewport
     (components/lys/TabbarRom.tsx sets it on <html>); 0 until measured, so
     the computed --l-tabbar-rom above decides. */
  --l-tabbar-maalt: 0px;
  --l-tabbar-pille-luft: 0.375rem; /* 6 — the current tab's grey pill, held in from the bar's top and bottom */
  --l-sh-glow: 0 10px 24px rgba(108, 93, 211, .38), 0 0 0 6px rgba(108, 93, 211, .10);
  --l-topbar-h: 3.5rem;

  /* ---- shadows, layered and soft ---- */
  --l-sh-frame: 0 20px 60px rgba(29, 29, 79, .06);
  --l-sh-active: 0 18px 40px rgba(29, 29, 79, .10), 0 2px 6px rgba(29, 29, 79, .04);
  --l-sh-soft: 0 8px 24px rgba(29, 29, 79, .05);
  /* «Inngangen» (side-inngang.css): white cards on a white page, lifted by
     three soft layers instead of a border — the owner's «calm and premium». */
  --l-sh-lag: 0 1px 2px rgba(29, 29, 79, .04), 0 6px 16px rgba(29, 29, 79, .05), 0 18px 40px rgba(29, 29, 79, .05);
  --l-sh-opp: 0 -10px 30px rgba(29, 29, 79, .06);
  --l-sh-card: 0 12px 32px rgba(29, 29, 79, .07);
  --l-sh-pop: 0 24px 60px rgba(29, 29, 79, .16), 0 4px 12px rgba(29, 29, 79, .06);
  --l-sh-focus: 0 0 0 4px rgba(108, 93, 211, .28);
  /* Compact status disclosures use a solid outline so keyboard focus remains
     visible against their cyan surface without increasing their resting size. */
  --l-focus-w: 0.125rem;
  --l-focus-offset: 0.125rem;
  /* The focus ring on a navy surface (the kundemodus banner): the purple
     ring above is 28 % purple and vanishes on --l-ink, so a navy gap and a
     white ring instead. */
  --l-sh-focus-dark: 0 0 0 2px var(--l-ink), 0 0 0 4px var(--l-on-fill);
  --l-sh-tabbar: 0 10px 30px rgba(29, 29, 79, .12), 0 1px 3px rgba(29, 29, 79, .06);
  /* The tab bar as Apple's Liquid Glass (iOS 26; the owner, 15 Oct): a
     clear pane that blurs and lifts what scrolls under it, a lit rim, a
     sheen across its top half, and the current tab as a drop of glass
     (skall.css). The web view gets none of it from the system, so this is
     the CSS approximation; a native UITabBar would be the real thing. */
  --l-glass: rgba(255, 255, 255, .58);
  --l-glass-blur: blur(22px) saturate(185%);
  --l-glass-rand: rgba(255, 255, 255, .75);
  --l-glass-tett: rgba(255, 255, 255, .78);   /* a surface that floats over the page (sheet, menu, toast): denser than a track, so its words read over whatever is under it */
  --l-glass-lys: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 255, 255, .4);
  --l-glass-glans: linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 48%);
  --l-glass-strekk: 1.14 .94;   /* the pill, half-way between two tabs or under a moving finger: wider, flatter (Instagram's, 15 Oct) */
  --l-t-draape: 420ms;          /* a touch longer than --l-t-slow: it has a stretch to settle */

  /* ---- motion ---- */
  /* The coloured badge a stat card's icon sits in (komponenter.css § 31). */
  --l-stat-badge: 3rem;
  /* The founder's front-page design (26 Sept): four key-figure cards in
     tints lighter than the stat cards' own, so the icon and the number
     carry the colour (komponenter.css § 32). */
  --l-tint-cyan: #E9F8FD; --l-tint-green: #E6F7EE; --l-tint-pink: #FDE8ED; --l-tint-peach: #FFF4E3;
  --l-tint-blue: #EEF3FE; --l-blue-soft: #DCE6FD; --l-blue-ink: #2F5BD3;   /* Kunder's first card */
  --l-tint-lavender: #F2F1FE;                                          /* Kunder's «Kom via Pling» */
  --l-trend-graf: 5.25rem;    /* the small chart beside a Kunder stat's number */
  --l-nokkel-ikon: 3.5rem;    /* the illustrated icon on a key-figure card */
  --l-nokkel-go: 2.25rem;     /* its arrow circle, top right */
  --l-andel-strek: 18;        /* the booking-share ring's stroke, in viewBox units */
  /* The front page's map (7 Oct, components/NorwayMap.tsx), drawn from
     Kartverket's kommune boundaries: a calm pale sea, the neighbouring
     kommuner near-white with hairline borders, the firm's own in Lys's
     lavender with a firmer purple edge, and purple dots on top. */
  --l-kart-hav: #EEF3F8;
  --l-kart-land: #FBFBFD;
  --l-kart-grense: #E2E5EC;
  --l-kart-egen: var(--l-purple-soft);
  --l-kart-egen-kant: #B8AEF0;
  --l-kart-prikkant: #FFFFFF;  /* the white edge round a dot */
  --l-kart-glorie: 0 0 0 0.3125rem rgba(108, 93, 211, .16), 0 4px 10px rgba(29, 29, 79, .18);
  --l-kart-glorie-hover: 0 0 0 0.5rem rgba(108, 93, 211, .22), 0 6px 14px rgba(29, 29, 79, .22);
  --l-kart-merke: 0.75rem;     /* the list's dot beside a place's name */
  --l-kart-kant: 0.15625rem;   /* 2.5 px — the white edge round a dot */
  --l-kart-tomikon: 4rem;      /* the drawn pin in the empty state */
  /* The akutt edge down a critical beskjed's card (side-samtaler.css). */
  --l-kant-akutt: 0.375rem;
  /* The slider (innstillinger/_lys/Glidebryter): its line, its dot, the dot's ring. */
  --l-glide-spor: 0.375rem; --l-glide-dott: 1.375rem; --l-glide-kant: 0.1875rem;

  --l-t-fast: 120ms; --l-t-base: 200ms; --l-t-slow: 320ms;
  /* A page change (skall.css § «Sideskifte»): short enough never to be waited on. */
  --l-ease: cubic-bezier(.2, .7, .2, 1);
  --l-ease-fjaer: cubic-bezier(.34, 1.5, .64, 1);  /* a spring's small overshoot: the AI bubble growing out of its button */
  /* «Legg inn vanlige svar» (kunnskap-quiz.css, 7 Oct): one readable
     column for one question, the slide's distance, a progress bar that
     fills slower than a hover so it is seen moving, and the answer tiles. */
  --l-kq-maks: 46rem;         /* the quiz column, also on a wide desk */
  --l-kq-glid: 3rem;          /* how far a question slides in and out */
  --l-kq-fyll: 600ms;         /* the progress bar filling after a save */
  --l-kq-spor: 0.5rem;        /* the progress bar's height */
  --l-kq-alt: 4rem;           /* an answer tile's height: a thumb on a ladder */
  --l-kq-tast: 1.75rem;       /* the number-key badge on a tile */
  --l-kq-hake: 1.5rem;        /* the tick on the chosen tile */
  --l-kq-tall: 12rem;         /* the amount field */
  --l-kq-merke: 4.5rem;       /* the finish screen's tick */
  /* The desk's ⌘K palette (kommando.css, 19 Oct): one readable column,
     standing a little under the top bar so the eye does not travel to the
     middle of a tall screen, never taller than the screen leaves room for. */
  --l-kpal-w: 40rem;          /* the palette's width on a desk */
  --l-kpal-topp: 12dvh;       /* how far below the window's top edge it stands */
  --l-kpal-h: 70dvh;          /* its tallest, results included */
  /* The hover vocabulary (Jonatan, 25 Sept: «alt i dashboardet skal ha en
     liten motion når man har musen over»). One set of distances for every
     card, row, button and arrow, so a card on /okonomi and a card on the
     front page answer the mouse the same way. The movement itself is only
     ever applied inside prefers-reduced-motion: no-preference; the shadow
     step and the colour change are for everyone. */
  --l-lift: -2px;       /* a card rises this far under the mouse */
  --l-lift-sm: -1px;    /* a button or an icon button, which is smaller and must not jump */
  --l-press: .98;       /* the scale of anything clickable while it is pressed */
  --l-press-flate: .985;      /* a whole card or a long row while pressed: less than a button, it is larger */
  --l-nudge: 3px;       /* an arrow or a chevron moves this far toward where it leads */
  --l-sh-figur: drop-shadow(0 6px 10px rgba(29, 29, 79, .18));  /* a cut-out figure standing on the page (Pling-hjelperen) */
  --l-sh-hover: 0 18px 44px rgba(29, 29, 79, .11), 0 3px 8px rgba(29, 29, 79, .05);  /* one step above --l-sh-card */
  --l-go-glyph: 0.875rem;  /* 14 — the arrow inside the stat card's --l-go circle */

  /* ---- layers ---- */
  --l-z-sticky: 10; --l-z-pop: 30; --l-z-sheet: 40; --l-z-toast: 50;
  --l-z-statuslinje: 20; /* the strip behind the phone's clock (skall.css), over a scrolled page, under sheets */
  --l-z-omvisning: 1000; /* the first-run tour, over everything */
  --l-z-omv-velkommen: 1001; /* the tour's welcome page (OmvisningVelkommen.tsx), over the tour until its first screen is on */
  /* Every selector (the owner, 15 Oct: tabs, segments, filter pills and
     switches look and move like the phone's tab bar; app/styles/lys/glass.css).
     The track is the tab bar's own glass (--l-glass, --l-glass-blur,
     --l-glass-rand, --l-glass-lys) and its pill the plain grey
     --l-fane-pille. The first answer (#844), a lilac track under a white
     pill, was the one thing he said it must not be. Lifted off a white
     card by a lower cousin of --l-sh-tabbar: the bar floats over the page,
     a selector sits in it. A switch that is on fills with Pling's lilac
     under the same glass, so its state still reads at a glance. */
  --l-velger-skygge: var(--l-glass-lys), 0 4px 14px rgba(29, 29, 79, 0.08), 0 1px 2px rgba(29, 29, 79, 0.06);
  --l-glass-paa: linear-gradient(180deg, #8577E6, #6C5DD3);
  /* The zoom-open (glass-zoom.css, components/lys/GlassZoom.tsx; the
     owner, 15 Oct; 420 ms from 16 Oct, inside the 380–450 ms of the second
     brief, which asked for the feel of the iPhone's own apps): long enough
     to read as one movement and short enough that a page is never waited
     for. NO overshoot: the first version used a spring (.32, 1.24, .5, 1),
     and measured frame by frame in WebKit a page the width of the screen
     overshot to x = -6 px and came back — the sideways jump the owner saw
     as lag. A quick start and a long, soft landing instead. 16 Oct: the
     iPhone's own sheet curve (.32, .72, 0, 1) and not ease-out-quint, whose
     first frame is already 17 % of the way, so a round «+» popped open
     instead of growing (10 % on this curve, the same landing). */
  --l-t-glasszoom: 420ms;
  --l-ease-glasszoom: cubic-bezier(.32, .72, 0, 1);
  --l-z-oppstart: 1100; /* the signed-in opening (components/lys/Oppstart.tsx), over even the tour, for a second */
  --l-oppstart-merke: clamp(288px, 32vw, 544px); /* the wordmark's width in the web openings, large enough to read whole (the owner, 15 Oct: «MYE større»); the app's splash is 200 points */
  --l-omv-slor: rgba(29, 29, 79, 0.55); /* the veil round the lit thing (the ink, --l-ink) */
  --l-omv-hjorne: 20px;        /* the phone tour's hole corner, in the pictures' own pixels (HJORNE in Omvisning.tsx) */
  /* The desk's first-run tour (components/lys/PcOmvisning.tsx, pc-omvisning.css). */
  --l-pco-figur: 10rem;        /* the whole standing figure beside the lit thing (a pose, 300 × 480) */
  --l-pco-figur-slutt: 13rem;  /* the same figure presenting «Kom i gang» at the end */
  --l-pco-boble: 24rem;        /* the bubble's widest, beside his head: one line and its two buttons */
  --l-pco-boble-slutt: 26rem;  /* the end bubble, one sentence on two lines */
  --l-pco-knapp: 4rem;         /* 64 — the one big «Kom i gang» at the end */
  --l-pco-slor: 0.55;          /* the veil's strength: the ink at this opacity, as --l-omv-slor */
  --l-pco-hjorne: 1rem;        /* the rounding of the hole round the lit thing */
  --l-pco-flytt: 560ms;        /* the hole and the figure gliding to the next thing (FLYTT_MS) */
  --l-pco-dekke: 220ms;        /* the hole fading shut while the page changes (DEKKE_MS) */

  /* ---- charts ---- */
  --l-chart-grid: #EEF0F4;
  --l-chart-bar: var(--l-purple);
  --l-chart-bar-2: var(--l-orange);
  --l-chart-line: var(--l-purple);
  --l-chart-area: rgba(246, 194, 204, .75);
  --l-chart-axis: var(--l-mute);
  --l-chart-tip: var(--l-pink-deep);
}

/* ---- The bridge: the two older palettes resolve to Lys ---------------------
   globals.css still declares the product's first palette (--ink, --link,
   --accent … measured off a coral template) and Stille's (--p-ink,
   --p-rule-firm …, warm paper and khaki). Every legacy class that survives on
   a page — .hint, .note, .card-head, a calendar caption, a legacy table — paints
   through those names, and the production audit found them as grey headings,
   brown hints, khaki rules and red links on Lys pages. Rather than chase each
   class, the old NAMES are pointed at Lys values here: this sheet loads after
   globals.css, so an equal :root declaration wins, and a leftover anywhere now
   draws in the Lys palette. The measurements in globals.css's comments are of
   the values it declares, which this block overrides; they describe history.
   Semantic states (--ok, --warn and their fills) are left as they were. */
:root {
  --ink: var(--l-ink);
  --ink-2: var(--l-ink-2);
  --ink-muted: var(--l-mute);
  --ink-soft: var(--l-mute);
  --link: var(--l-purple-ink);
  --wash: var(--l-sunk);
  --wash-2: var(--l-sunk);
  --line: var(--l-line);
  --line-strong: var(--l-line-2);
  --line-head: var(--l-line-2);
  --accent: var(--l-purple);
  --accent-ink: var(--l-on-fill);
  --accent-text: var(--l-purple-ink);
  --accent-soft: var(--l-purple-soft);
  --accent-line: var(--l-purple-line);
  --accent-glow: var(--l-purple);
  --accent-2: var(--l-purple);
  --chart-1: var(--l-purple);
  --chart-2: var(--l-line-2);
  --p-paper: var(--l-frame);
  --p-sunk: var(--l-sunk);
  --p-rule: var(--l-line);
  --p-rule-group: var(--l-line-2);
  --p-rule-firm: var(--l-line-2);
  --p-ink: var(--l-ink);
  --p-ink-2: var(--l-ink-2);
  --p-ink-3: var(--l-mute);
  --p-voice: var(--l-cyan-ink);
  --p-attend: var(--l-orange-ink);
  --p-focus: var(--l-purple);
}

/* The translucent halo is below 3:1 on the light surfaces it outlines.
   Use the existing dark purple only while keyboard focus is visible;
   resting controls, pointer hover and the theme's normal colours stay put. */
:root :focus-visible {
  --l-sh-focus: 0 0 0 var(--l-focus-w) var(--l-purple-ink);
}

/* On a phone the two smallest sizes are one step up (QA 15 Oct, #25): week
   days at 10 px, tab words, section labels and «Haster nå · ringte» at
   12 px, and much grey at 13 px were hard to read in a van. Nothing on a
   phone is now under 13 px, and the small print is 14. The desk keeps its
   denser sizes. Each token is declared once (tests/lys-tokens); the phone
   sets the value it falls back past. */
@media (max-width: 55.99rem) {
  :root { --l-t-xs-telefon: 0.8125rem; --l-t-sm-telefon: 0.875rem; }
}

/* ---- THE DESK SCALE (22 Oct; the curve redone 23 Oct) -----------------------
   «On a 13" MacBook or a smaller window everything stays huge» (the owner,
   22 Oct) — and then, once it was out: «now everything on the desktop is just
   smaller; it isn't adapting to the size». The first curve reached the full
   16 px only at about 2070 px, so every real Mac window (1280–1728) was
   permanently 10–22 % smaller. A big screen is at normal size; only a small
   screen or window shrinks.
   Every size in Lys is a rem (type, spacing, cards, the sidebar, the top
   bar, icons), so the desk scales by the one number they hang on: the root's
   font size. Full 16 px from 1600 px of window and up (a 14" or 16" MacBook
   with a full-width window looks as it did before 22 Oct); below that it
   shrinks in a straight line to 13 px at 1024 px, and never under 13 px.
   Only on a desk (the phone is not touched); breakpoints in rem are
   unmoved: a media query reads rem as the browser's own 16 px.
   Small text does not shrink with it: --l-t-xs, --l-t-sm, --l-t-body and
   --l-t-md have floors in px (11, 12, 13, 13), the smallest a Mac screen
   reads comfortably.
   ABOVE 1600 px the root grows again, gently, to 20 px at 2560 px (23 Oct, the
   owner on a ~2000 px window: «it has to adapt to the size»): the sidebar,
   the type and the cards grow together with the window, and the page below
   fills it (--l-max), instead of a 16 px page standing small in the middle. */
@media (min-width: 56rem) {
  html { font-size: calc(clamp(0.8125rem, 0.4792rem + 0.5208vw, 1rem) + min(0.25rem, max(0rem, 100vw - 100rem) * 0.004167)); }
}