/* ===========================================================================
   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 {
  /* ---- 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 */

  /* ---- 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 */

  /* ---- 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;
  --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-pling-hode: 1.375rem;   /* 22 — Pling's head beside «Booket av Pling» */
  /* 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 */

  /* ---- gradients ---- */
  --l-grad-warm: linear-gradient(110deg, var(--l-orange-2), var(--l-salmon));
  /* The voice stage's core on /assistent: a white pearl lit from the top
     left, the same object as a card's white icon tile drawn large. It
     replaced --l-grad-ring (purple to --l-pink-deep), whose purple half
     vanished into the purple card and whose middle went mauve. */
  --l-grad-perle: radial-gradient(circle at 35% 30%, var(--l-frame), var(--l-purple-soft));
  --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: 0.75rem;                                        /* 12 — the «NY» pill, axis labels */
  --l-t-sm: 0.8125rem;                                      /* 13 — meta lines, stat badge labels */
  --l-t-body: 1rem;                                         /* 16 — never smaller in an input */
  --l-t-md: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);           /* 15–16 — 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: 72rem;                                        /* content never wider than this */

  /* ---- sizes ---- */
  --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: 7.5rem;    /* 120 — the voice orb on /assistent, a desk */
  --l-stemme-kule-sm: 5.5rem; /* 88 — 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: 5.5rem;
  --l-hjelper-str-tlf: 4rem;  /* 64 — on a phone, where it stood over the cards' corners (28 Sept) */
  /* «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, 22vw, 19.25rem);   /* the sidebar: 22 % of the frame at 1440 */
  --l-frame-inset: clamp(0px, 1.6vw, 1.5rem); /* the grey margin around the frame: 24 at 1440, 0 on a phone */
  --l-tabbar-h: 4rem;         /* the phone's tab bar, excluding the safe area */
  --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);
  --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);
  /* 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 -8px 24px rgba(29, 29, 79, .06);

  /* ---- 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 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;
  --l-ease: cubic-bezier(.2, .7, .2, 1);
  /* 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-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;

  /* ---- 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);
}