/* GENERERAD FIL, redigera inte. Källa: lipio-platform/design/lipio-tokens.css (node scripts/sync-tokens.mjs) */
/* Lipios gemensamma tokens för systersajterna (lipio.se, intyg.app,
   blodprover.nu, vard.lipio.se). KÄLLA: lipio-platform/design/lipio-tokens.css.
   Kopieras till varje sajt med `node scripts/sync-tokens.mjs <mål.css>`;
   redigera aldrig kopian. Samma värden som app.lipio.se (src/app/globals.css)
   och appen (lipio-mobile/src/theme.ts).

   Prefix --lp- så tokens aldrig krockar med sajternas egna variabler. Varje
   sajt behåller sin accentfärg genom att peka sina variabler hit, t.ex.
   `--pine: var(--lp-brand)`.

   Regler (samma som plattformen):
   - Neutraler med salviaton; ytor ljusnar uppåt: page < surface < raised.
   - Märkesfärgen bara för handling och aktivt läge.
   - Status: success, warning, danger. campaign (terrakotta) bara kampanj/tidsfrist.
   - All text minst 12 px och minst 4,5:1 mot sin bakgrund.
   - Avstånd i 4 px-steg; mellan grupper alltid mer än inom en grupp.
   - Inre radie = yttre radie minus utfyllnad.
   - Djup i stället för ramar: raised för det viktiga, well för fält och spår.
   - Rörelse 150-400 ms, ease-out; prefers-reduced-motion = slutläge direkt. */
:root {
  /* Ytor och text */
  --lp-bg-page: #f3f8f5;
  --lp-bg-surface: #fafcfa;
  --lp-bg-raised: #ffffff;
  --lp-bg-sunken: #edf1ee;
  --lp-line: #dbe2dd;
  --lp-line-strong: #c1cac3;
  --lp-ink: #171e1a;        /* rubriker 17:1 */
  --lp-ink-soft: #434a44;   /* brödtext 9:1 */
  --lp-ink-muted: #5a625c;  /* stödtext, minst 4,9:1 även på ljusa tonade ytor */
  --lp-ink-subtle: #6c736d; /* metadata, bara på vitt */

  /* Handling */
  --lp-brand: #2d5a3f;
  --lp-brand-hover: #275037;
  --lp-brand-deep: #204130;
  --lp-brand-press: #1b3d2a;
  --lp-brand-quiet: #b9ebc8;
  --lp-brand-tint: #eef6f0;
  --lp-on-brand: #ffffff;

  /* Status */
  --lp-success: #2f7d52;
  --lp-success-bg: #e8f4ec;
  --lp-warning: #8a5a12;
  --lp-warning-bg: #fdf4e3;
  --lp-danger: #b04545;
  --lp-danger-bg: #fbeeee;
  --lp-badge: #dc2626;      /* olästa, vit text 4,8:1 */
  --lp-campaign: #cf6244;   /* bara dekor/ytor */
  --lp-campaign-strong: #ad4f35; /* kampanjtext, 4,7:1 på campaign-bg */
  --lp-campaign-bg: #fbeee8;
  --lp-dot: #cf6244;        /* punkten i ordmärket */

  /* Typografi (2026-09-25). Hierarki skapas med storlek + vikt + färg
     (ink > ink-soft > ink-muted > ink-subtle) + avstånd, inte med små
     storlekar. Få steg, alltid i rem så att användarens textstorlek följer
     med. Bas: 16 (patienter, marknad) eller 14 (täta personalvyer), ±2 vid
     behov, sedan rubriksteg. Inget under 12 px. Rubriker Cabinet 700,
     brödtext en familj (Inter Tight på systersajterna, Inter i app.lipio.se).
     Siffror som ändras: font-variant-numeric: tabular-nums. */
  --lp-font-display: "Cabinet Grotesk", "Inter Tight", "Inter", system-ui, sans-serif; /* rubriker, 700 */
  --lp-font-body: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --lp-text-meta: 0.75rem;      /* 12: etiketter, metadata, juridisk finstil */
  --lp-leading-meta: 1rem;
  --lp-text-small: 0.875rem;    /* 14: sekundärtext, täta listor, personalvyernas bas */
  --lp-leading-small: 1.25rem;
  --lp-text-body: 1rem;         /* 16: brödtext, patienternas bas */
  --lp-leading-body: 1.55;
  --lp-text-lead: 1.125rem;     /* 18: ingress */
  --lp-leading-lead: 1.6;
  --lp-text-title-sm: 1.25rem;  /* 20: kort- och sektionsrubrik */
  --lp-text-title: 1.5rem;      /* 24: sidrubrik i appar */
  --lp-text-title-lg: 1.875rem; /* 30: stor rubrik */
  --lp-leading-title: 1.2;
  --lp-text-display: clamp(2.25rem, 1.5rem + 3.2vw, 3.5rem); /* hero, 36-56 */
  --lp-leading-display: 1.05;
  /* Redaktionell jätterubrik, bara för enstaka avsiktliga ögonblick
     (Kunskap-heron, kapitelrubriker, prissiffran, "0 kr"). 56-96. */
  --lp-text-mega: clamp(3.5rem, 1rem + 7vw, 6rem);
  --lp-leading-mega: 0.95;
  /* Äldre namn, behålls tills sajterna migrerat */
  --lp-text-xs: var(--lp-text-meta);
  --lp-text-sm: var(--lp-text-small);
  --lp-text-md: var(--lp-text-body);
  --lp-text-lg: var(--lp-text-lead);
  --lp-leading: 1.55;
  --lp-measure: 65ch;

  /* Avstånd och hörn */
  --lp-space-1: 4px;
  --lp-space-2: 8px;   /* inom grupp */
  --lp-space-3: 12px;
  --lp-space-4: 16px;  /* utfyllnad */
  --lp-space-6: 24px;  /* mellan grupper */
  --lp-space-8: 32px;  /* mellan sektioner */
  --lp-space-12: 48px;
  --lp-space-16: 64px;
  --lp-r-sm: 8px;
  --lp-r-md: 12px;
  --lp-r-lg: 16px;
  --lp-r-xl: 20px;
  --lp-r-2xl: 24px;
  --lp-r-pill: 999px;

  /* Djup: ljuset kommer uppifrån */
  --lp-elev-1: inset 0 1px 0 rgba(255,255,255,.75), 0 1px 2px rgba(22,41,29,.06), 0 2px 6px -2px rgba(22,41,29,.08);
  --lp-elev-2: inset 0 1px 0 rgba(255,255,255,.75), 0 2px 4px rgba(22,41,29,.06), 0 12px 28px -12px rgba(22,41,29,.22);
  --lp-elev-3: inset 0 1px 0 rgba(255,255,255,.8), 0 4px 8px rgba(22,41,29,.06), 0 24px 48px -20px rgba(22,41,29,.30);
  --lp-inset: inset 0 1px 2px rgba(22,41,29,.10), inset 0 -1px 0 rgba(255,255,255,.7);

  /* Rörelse */
  --lp-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --lp-dur-fast: 150ms;
  --lp-dur: 220ms;
  --lp-dur-slow: 400ms;

  --lp-focus: 0 0 0 3px rgba(45, 90, 63, 0.35);
  color-scheme: light;
}

/* Små hjälpklasser, samma namn som plattformens utilities med lp-prefix */
.lp-elev-1 { box-shadow: var(--lp-elev-1); }
.lp-elev-2 { box-shadow: var(--lp-elev-2); }
.lp-elev-3 { box-shadow: var(--lp-elev-3); }
.lp-well { box-shadow: var(--lp-inset); background-color: var(--lp-bg-sunken); }
.lp-measure { max-width: var(--lp-measure); }
.lp-num { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}