/* Designtokens — extraherade ur den nya grafiska profilen (onepager-app.css). */
:root {
  /* Färger */
  --navy: #16213d;        /* mörk marinblå — hero/footer, rubriker */
  --cyan: #009ac3;        /* primär accent, knappar */
  --cyan-light: #c1f1ff;  /* ljus accentyta */
  --orange: #e15a31;      /* kontrastaccent, confetti */
  --white: #ffffff;
  --black: #000000;

  /* Roller */
  --ink: var(--navy);         /* standard textfärg */
  --ink-muted: #5a6478;       /* dämpad text */
  --bg: var(--white);
  --bg-dark: var(--navy);
  --line: rgba(22, 33, 61, 0.12);
  --line-light: rgba(255, 255, 255, 0.12);

  /* Typsnitt */
  --font-body: "KlarheitGrotesk", system-ui, -apple-system, "Segoe UI", Roboto,
    Arial, sans-serif;
  --font-title: "KlarheitKurrent", var(--font-body);

  /* Typskala (px-ankare ur profilen: 14/16/32/48/58/90) */
  --fs-xxs: 0.875rem;   /* 14 */
  --fs-xs: 1rem;        /* 16 */
  --fs-base: 1rem;      /* 16 — brödtext (matchar profilen) */
  --fs-lead: 1.375rem;  /* 22 — ingress */
  --fs-sm: 2rem;        /* 32 */
  --fs-md: 3rem;        /* 48 */
  --fs-lg: 3.625rem;    /* 58 */
  --fs-xl: 5.625rem;    /* 90 */

  --lh-tight: 1;        /* rubriker — profilen kör 90px/90px */
  --lh-snug: 1.25;
  --lh-body: 1.5;       /* 24/16 som profilen */

  /* Layout */
  --maxw: 1440px;
  --maxw-text: 760px;
  --gutter: 1rem;       /* 16px — matchar .holder i profilen */
  --radius: 0;          /* profilen använder skarpa hörn */
  --radius-lg: 0;

  /* Vertikal sektionsrytm (profilen: py-16 / md:py-32) */
  --section-y: 4rem;      /* 64px mobil */
  --section-y-lg: 8rem;   /* 128px desktop */
  --hero-y: 4rem;         /* 64px (py-16) */

  /* Spacing-skala (rem) */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-12: 6rem;
  --space-16: 8rem;

  /* Effekter */
  --shadow: 0 10px 30px rgba(22, 33, 61, 0.1);
  --transition: 200ms ease;
}