:root {
  --border-thin: 1px;
  --border-med: 2px;
  --border-thick: 3px;
  --border-accent: 5px;

  /* Breakpoint */
  --bp-sm: 720px;

  --font-sans: "Lato", sans-serif;
  --font-serif: "Merriweather", serif;

  --icon-size: 1.1em;
  --icon-align: -0.15em;

  --outline-thin: 1px;
  --outline-med: 2px;
  --outline-thick: 3px;

  --outline-offset: 2px;

  --radius-sm: .25rem;   /* 4px */
  --radius-md: .5rem;    /* 8px */
  --radius-lg: .75rem;   /* 12px */
  --radius-pill: 999px;  /* full rounded */

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-24: 6rem;

  --step--2: 0.75rem;   /* 12px - små etiketter, meta */
  --step--1: 0.875rem;  /* 14px - brödtext liten */
  --step-0: 1rem;       /* 16px - bas/brödtext */
  --step-1: 1.25rem;    /* 20px - större brödtext / underrubriker */
  --step-2: 1.5rem;     /* 24px - rubriknivå */
  --step-3: 2rem;       /* 32px - större rubriker */
  --step-4: 2.5rem;     /* 40px - hero-rubriker */
  --step-5: 3rem;       /* 48px - riktigt stora hero-rubriker */

  --tilt-subtle: -2deg;
}