/* Angelina Hoppe — Design-Tokens, erzeugt aus dem Design System (tokens.json). Nicht von Hand pflegen. */
:root {
  /* Farbe */
  --orange: #ee7e31;
  --cobalt: #2535e0;
  --beige: #e9e3da;
  --white: #ffffff;
  --black: #0a0a0a;
  --black-raised: #222222;
  --surface: var(--beige);
  --surface-white: var(--white);
  --surface-stage: var(--black);
  --surface-stage-raised: var(--black-raised);
  --surface-signal: var(--orange);
  --surface-blue: var(--cobalt);
  --ink: var(--black);
  --ink-muted: #57524b;
  --ink-inverse: var(--white);
  --ink-inverse-muted: #a6a29c;
  --accent: var(--orange);
  --on-accent: var(--black);
  --accent-text: var(--cobalt);
  --link: var(--cobalt);
  --link-on-stage: var(--orange);
  --highlight-orange: var(--orange);
  --highlight-blue: var(--cobalt);
  --hairline: var(--black);
  --hairline-soft: rgba(10, 10, 10, 0.16);
  --hairline-inverse: rgba(255, 255, 255, 0.28);
  --focus-ring: var(--cobalt);
  --focus-ring-on-color: var(--black);
  --focus-ring-on-dark: var(--orange);
  --focus-ring-on-blue: var(--white);
  /* Schriften */
  --font-display: "Archivo Black", "Arial Black", Impact, sans-serif;
  --font-sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
  --font-marker: "Permanent Marker", "Marker Felt", cursive;
  /* spacing */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --space-128: 128px;
  --space-192: 192px;
  /* radius */
  --radius-none: 0px;
  --radius-full: 9999px;
  /* layout */
  --container-max: 1360px;
  --text-max: 640px;
  --grid-columns: 12;
  --gutter: 24px;
  --margin-mobile: 20px;
  --margin-desktop: 64px;
  /* breakpoint */
  --bp-sm: 640px;
  --bp-md: 960px;
  --bp-lg: 1280px;
  /* border */
  --border-hairline: 1px;
  --border-strong: 2px;
  --focus-width: 3px;
}