/* ============================================================================
   Moltn design tokens — EN KÄLLA, FLERA YTOR (grafisk-profil-moltn.md §1)
   Single source of truth for every public surface (teaser, landing, pricing,
   developers, trust, ui, mobile, cp). Served at /tokens.css. Do not redefine
   these in a surface's inline <style>; add surface-specific tokens locally if
   truly needed. Values are the on-spec palette from the design system doc.
   ========================================================================== */

/* Brand display face — Ronzino (Collletttivo, SIL OFL 1.1). Self-hosted at
   /fonts/*.woff2. §5 of the design doc had this as the open blocker; the
   wordmark and all display headings now render as designed. swap = show the
   fallback immediately, upgrade to Ronzino when it arrives (no invisible text). */
@font-face {
  font-family: 'Ronzino';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/Ronzino-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Ronzino';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/Ronzino-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Ronzino';
  font-style: normal;
  font-weight: 600 700; /* 600 titles + 700 display both map to Bold */
  font-display: swap;
  src: url('/fonts/Ronzino-Bold.woff2') format('woff2');
}

/* Body / UI face — Hanken Grotesk (Hanken Design Co., SIL OFL 1.1). A warm
   humanist grotesque, self-hosted as an OFL substitute for the proprietary
   Avenir Next the doc names. Variable file → one woff2 covers weights 400-700.
   Self-hosted (not Google Fonts CDN) to keep visitor IPs in the EU per /trust. */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/HankenGrotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/HankenGrotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* bas — ljust (§1.1). muted mörkad 2026-07-24: 4.27:1 → 5.5:1 på bg,
     så 12–13px metadata klarar WCAG AA. */
  --bg:#F6F6F8; --panel:#FFFFFF; --panel-2:#F0F0F4; --border:#ECECEF;
  --text:#101014; --body:#494952; --muted:#63636E;

  /* accentfamiljen (ren = fyllnad, *-ink = text på vitt/platta) (§1.2).
     Ink-värdena mörkade 2026-07-24 till ≥5:1 även på sina dim-plattor
     (tidigare 3.8–4.4:1) — fyllnadsfärgerna är orörda. */
  --accent:#ff6a3d; --accent-ink:#B93A10; --peach:#FCA577;
  --lav:#CAACF1; --lav-ink:#66429E; --blue:#A5C3EE; --blue-ink:#33619F;

  /* status — idéns livscykel, mörk ink för ljust (§1.3).
     Mörkade 2026-07-24: som badge-text på *-dim låg de på 3.1–3.9:1,
     nu ≥5:1 (grön klarar även vit text som fyllnad, 5.8:1). */
  --green:#12744D; --amber:#7E5A06; --red:#B02A2A;

  /* pastell-tinter bakom färgad text (§1.4) */
  --accent-dim:#FFEDE1; --green-dim:#E4F7EF; --amber-dim:#FBF0D6;
  --red-dim:#FBE4E4; --lav-dim:#F1EAFB; --blue-dim:#E7F0FB;

  /* typografi (§1.5) */
  --font-display:'Ronzino',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-ui:'Hanken Grotesk','Avenir Next',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:ui-monospace,'JetBrains Mono','SF Mono',Menlo,monospace;

  /* form — radier (§1.7) */
  --r-sm:8px; --r:12px; --r-lg:18px; --r-xl:24px; --pill:999px;

  /* spacing — 4-punktsskala (§1.6) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;

  /* elevation — mjuk ink-skugga (§1.8) */
  --e0:none;
  --e1:0 1px 2px rgba(16,16,20,.06);
  --e2:0 10px 30px rgba(16,16,20,.10);
  --e3:0 16px 48px rgba(16,16,20,.14);

  /* motion */
  --dur-1:120ms; --dur-2:220ms; --ease:cubic-bezier(.2,.7,.2,1);
}