/* GENERATED by tools/sync-shared.mjs — edit /shared/tokens.css instead. */
/* Shared design primitives — source of truth lives in /shared. Do not edit the synced copies.
 *
 * Deliberately NEUTRAL. Only the scales that every site shares live here:
 * type, spacing, radii, measure. Colour and typeface are per-site identity and
 * belong in each site's own brand.css — planimator.se is visually distinct;
 * optimering.se and simulering.se share a system with each other.
 */

:root {
  /* Type scale — 1.250 major third, fluid between 22rem and 80rem viewports */
  --step--2: clamp(0.72rem, 0.70rem + 0.11vw, 0.79rem);
  --step--1: clamp(0.83rem, 0.79rem + 0.19vw, 0.94rem);
  --step-0:  clamp(1.00rem, 0.93rem + 0.33vw, 1.19rem);
  --step-1:  clamp(1.20rem, 1.09rem + 0.54vw, 1.48rem);
  --step-2:  clamp(1.44rem, 1.27rem + 0.85vw, 1.85rem);
  --step-3:  clamp(1.73rem, 1.47rem + 1.29vw, 2.31rem);
  --step-4:  clamp(2.07rem, 1.70rem + 1.89vw, 2.89rem);
  --step-5:  clamp(2.49rem, 1.95rem + 2.71vw, 3.62rem);

  /* Spacing scale */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2rem;
  --space-xl:  3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  /* Layout */
  --measure: 65ch;          /* comfortable reading width */
  --wrapper-max: 72rem;
  --wrapper-pad: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);

  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 16px;

  --focus-ring: 2px solid currentColor;
  --focus-offset: 3px;
}

.wrapper {
  max-width: var(--wrapper-max);
  margin-inline: auto;
  padding-inline: var(--wrapper-pad);
}

.flow > * + * { margin-block-start: var(--flow-space, var(--space-s)); }

.visually-hidden:not(:focus):not(:active) {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}