:root {
  /* Shinefour: Indigo */
  --b-50: #f5f4fb;
  --b-100: #e3dff2;
  --b-200: #c5bde4;
  --b-300: #a095cb;
  --b-400: #756aae;
  --b-500: #4d4391;
  --b-600: #2f2776;
  --b-700: #221a66;
  --b-800: #1e136e;
  --b-900: #150b4d;
  --b-950: #0b0632;

  /* Shinefour: Lavendel (zweite Suchspur, Agenten) */
  --hl-300: #c9b7ff;

  /* Hivefour: Honig (bewusster Akzent statt Lavendel) */
  --honey-100: #fff3cc;
  --honey-200: #ffe7a3;
  --honey-300: #ffd36b;
  --honey-400: #ffba3a;
  --honey-500: #f5a00f;
  --honey-600: #d17f06;

  --n-200: #e5e5ec;
  --n-300: #d1d1da;

  --text: #fff;
  --text-soft: rgba(255, 255, 255, 0.65);
  --text-faint: rgba(255, 255, 255, 0.58);
  --line: rgba(255, 255, 255, 0.13);
  --line-strong: rgba(255, 255, 255, 0.22);
  --panel: rgba(255, 255, 255, 0.06);
  --panel-honey: rgba(255, 211, 107, 0.09);

  --font-sans: 'Lato', system-ui, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 999px;

  /* 8px-Raster */
  --sp-xs: 8px;
  --sp-sm: 16px;
  --sp-md: 24px;
  --sp-lg: 48px;
  --sp-xl: 80px;
  --sp-2xl: 96px;

  --gutter: clamp(16px, 4vw, 48px);
  --nav-height: 80px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --fast: 140ms;
  --med: 240ms;
  --slow: 900ms;
}