/* Emberloom designtokens
 *
 * GENERERADE UR DESIGNSYSTEMET. Källa: Claude Design, projekt
 * 06a7249b-2f21-470f-b380-60eddc4abc57, hämtat 2026-08-16 via DesignSync.
 * Motsvarar designsystemets styles.css, som importerar tokens/fonts.css,
 * tokens/colors.css, tokens/typography.css, tokens/spacing.css, tokens/shape.css.
 * Kopior av källfilerna ligger i design/.
 *
 * Riktningen är enkelriktad. Ändra utseende i Claude Design och hämta ner hit.
 * Redigera aldrig ett värde här för att fixa en sida, då divergerar sajten från
 * designsystemet ett värde i taget. Se CLAUDE.md.
 *
 * Två avvikelser mot källan, båda medvetna och listade längst ned:
 * typsnittsfilernas sökvägar, och avsnittet med komponenttokens.
 */

/* ── Typsnitt ─────────────────────────────────────────────────────────────
   Självhostade. Designsystemets fonts.css pekar på ../assets/fonts/, sajten
   serverar från /assets/fonts/. Latinskt subset, vilket täcker svenska.
   Pilen → (U+2192) ligger utanför Googles latinska subset och hämtas som eget
   mikrosubset, annars faller pilarna i knappar och länkar tillbaka på
   systemtypsnittet. */

@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/InterTight-var.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/InterTight-pilar.woff2") format("woff2");
  unicode-range: U+2192;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/InstrumentSerif-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/InstrumentSerif-Italic.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/IBMPlexMono-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/IBMPlexMono-Medium.woff2") format("woff2");
}
/* Viktdeskriptorn måste vara identisk med basfacets, inte ett intervall som
   omsluter den. Med font-weight: 400 500 här vinner basfacet viktmatchningen,
   och eftersom det saknar glyfen faller pilen ut till systemets monospace. */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/IBMPlexMono-pilar.woff2") format("woff2");
  unicode-range: U+2192;
}

/* ── Färg ─────────────────────────────────────────────────────────────────
   Ljust tema är standard. Mörka segment sätts med class="theme-dark" på valfri
   sektion. De inverterar ALLA tokens, inte bara bakgrunden. */

:root,
.theme-light {
  --paper: #f5f3ed;
  --surface: #fcfbf7;
  --surface-2: #efebe1;
  --ink: #14120f;
  --ink-soft: #55504a;
  --ink-faint: #8c857b;
  --rule: #e2ddd3;
  --ember: #d9531f;
  --ember-deep: #a63a12;

  /* semantiska alias */
  --bg-page: var(--paper);
  --bg-card: var(--surface);
  --bg-inset: var(--surface-2);
  --text-heading: var(--ink);
  --text-body: var(--ink-soft);
  --text-meta: var(--ink-faint);
  --border-default: var(--rule);
  --accent: var(--ember);
  --accent-pressed: var(--ember-deep);

  /* knapp */
  --pill-bg: var(--ink);
  --pill-fg: var(--paper);
  --pill-hover: var(--ember-deep);

  /* märke */
  --mark-ink: #14120f;
  --mark-ember: #d9531f;
  --mark-bg: #f5f3ed;

  /* vävmönster för bildplatshållare */
  --grid-a: rgba(20, 18, 15, 0.055);
  --grid-b: rgba(20, 18, 15, 0.045);
  --glow: rgba(217, 83, 31, 0.13);
}

.theme-dark {
  --paper: #100e0c;
  --surface: #191512;
  --surface-2: #221d19;
  --ink: #f3eee7;
  --ink-soft: #a79d93;
  --ink-faint: #7a716a;
  --rule: #2c2622;
  --ember: #e86636;
  --ember-deep: #f07d50;

  --pill-bg: var(--ember);
  --pill-fg: #120f0d;
  --pill-hover: var(--ember-deep);

  --mark-ink: #f3eee7;
  --mark-ember: #e86636;
  --mark-bg: #191512;

  --grid-a: rgba(255, 248, 240, 0.06);
  --grid-b: rgba(255, 248, 240, 0.045);
  --glow: rgba(232, 102, 54, 0.18);

  background: var(--paper);
  color: var(--ink);
}

/* ── Typografi ───────────────────────────────────────────────────────────── */

:root {
  --font-sans: "Inter Tight", system-ui, sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --font-heading: var(--font-sans);
  --font-card-heading: var(--font-serif);
  --font-emphasis: var(--font-serif);
  --font-label: var(--font-mono);

  --size-h1: clamp(36px, 4.6vw, 54px);
  --size-h2: clamp(29px, 3.5vw, 42px);
  --size-h3: 27px;
  --size-lead: 18px;
  --size-body: 17px;
  --size-body-sm: 15.5px;
  --size-label: 11.5px;

  --lh-display: 1.06;
  --lh-h3: 1.1;
  --lh-body: 1.62;
  --lh-label: 1.4;

  --track-display: -0.028em;
  --track-serif: -0.004em;
  --track-h3: -0.006em;
  --track-label: 0.15em;
  --track-label-tight: 0.12em;

  --weight-heading: 600;
  --weight-body: 400;
  --weight-label: 400;
  --weight-label-strong: 500;
}

/* ── Rytm och mått ───────────────────────────────────────────────────────── */

:root {
  --content-width: 1060px;
  --page-gutter: 30px;
  --section-y: 104px;
  --section-y-dark: 120px;
  --card-gap: 20px;
  --card-padding: 26px;
  --grid-gap-wide: 56px;
  --breakpoint: 920px;

  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 20px;
  --space-5: 26px;
  --space-6: 34px;
  --space-7: 52px;
  --space-8: 76px;
  --space-9: 104px;
}

/* ── Form ────────────────────────────────────────────────────────────────── */

:root {
  --radius-card: 10px;
  --radius-image: 10px;
  --radius-pill: 999px;
  --border-hairline: 1px;
  --rule-eyebrow-width: 28px;
  --dot-size: 6px;
  --transition-theme: background 0.18s, color 0.18s;
  --transition-hover: background 0.15s, color 0.15s, border-color 0.15s;
}

/* ── Komponenttokens ─────────────────────────────────────────────────────────
 * SAKNAS I DESIGNSYSTEMET. Designsystemets komponenter är JSX med värdena
 * inskrivna direkt i style-objekten: Caption 14.5px, TextLink 12px, Metric
 * 25px, ProcessStep 22px, DashList 16.5px och så vidare. Sajten får inte ha
 * hårdkodade typsnittsstorlekar utanför den här filen, så de är lyfta hit med
 * exakt de värden komponenterna har idag.
 *
 * Att ta tillbaka till Claude Design, så att nästa synk kan radera avsnittet.
 */

:root {
  --size-caption: 14.5px;
  --size-caption-meta: 11px;
  --size-link: 12px;
  --size-metric: 25px;
  --size-metric-label: 11px;
  --size-step-title: 22px;
  --size-step-body: 15px;
  --size-prose: 16.5px;
  --size-button: 15px;
  --size-button-sm: 14.5px;
  --size-wordmark: 21px;

  --lh-card: 1.55;
  --lh-caption: 1.5;
  --lh-button: 1.2;
  --lh-metric: 1.1;

  --track-link: 0.13em;
  --track-number: 0.14em;
  --track-wordmark: -0.03em;
}