/* Custom Properties
   Wenige, gezielt gewählte Variablen. Hier zentral änderbar,
   damit eigene Anpassungen an genau einer Stelle passieren. */

:root {
  /* Farben */
  --color-bg: #000;
  --color-fg: #F5EEE0;
  --color-muted: #D6D0C4;
  --color-line: #474541;
  --color-accent: #5DC19B;

  /* Schriften */
  --font-display: "Asap", system-ui, sans-serif;
  --font-body: "Asap", system-ui, sans-serif;
  --font-mono: "Asap", "Courier New", monospace;

  /* Schriftgrößen – Fibonacci-Skala (Fibonacci-Zahlen × 1 px ÷ 16 = rem)
     Folge: … 8 · 13 · 21 · 34 · 55 · 89 · 144 … */
  --fs-2xs:  0.5rem;     /*   8 px – Fib   8 */
  --fs-xs:   0.8125rem;  /*  13 px – Fib  13 */
  --fs-base: 1rem;       /*  16 px – Ankergröße (Browser-Default) */
  --fs-md:   1.3125rem;  /*  21 px – Fib  21 */
  --fs-lg:   2.125rem;   /*  34 px – Fib  34 */
  --fs-xl:   3.4375rem;  /*  55 px – Fib  55 */
  --fs-2xl:  5.5625rem;  /*  89 px – Fib  89 */
  --fs-3xl:  9rem;       /* 144 px – Fib 144 */

  /* Abstände */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 8rem;

  /* Layout */
  --maxw: 76rem;
}