:root {
  /*-------
    FARBEN
    ------- */

  /* Primary Colors Blau */
  --primary: hsl(191, 47%, 23%);
  --primary-light: hsl(189, 25%, 56%);
  --primary-ultra-light: hsl(187, 24%, 70%);
  --primary-dark: hsl(194, 75%, 15%);
  --primary-ultra-dark: hsl(196, 90%, 10%);

  /* Secondary Colors Gold */
  --secondary: hsl(42, 51%, 30%);
  --secondary-light: hsl(40, 26%, 56%);
  --secondary-ultra-light: hsl(38, 18%, 65%);

  /* Black Colors */
  --black: hsl(0, 0%, 9%);
  --black-light: hsl(0, 0%, 15%);

  /* White Colors */
  --white: hsl(32, 48%, 95%);
  --white-dark: hsl(26, 28%, 89%);

  /* Text Colors */
  --text-dark: var(--black);
  --text-dark-muted: hsl(0, 0%, 30%);
  --text-light: var(--white);
  --text-light-muted: var(--white-dark);

  /*------------------
  TEXT
  -------------------*/

  /* Fonts */
  --font-base: "Noto Sans", system-ui, sans-serif;
  --font-heading: "Lora", serif;

  /* Typography Scale */
  --text-xs: clamp(0.875rem, 0.2vw + 0.8rem, 0.95rem);

  --text-s: clamp(1rem, 0.2vw + 0.85rem, 1.12rem);

  --text-m: clamp(1.125rem, 0.35vw + 1rem, 1.25rem);

  --text-l: clamp(1.25rem, 0.5vw + 1.1rem, 1.5rem);

  --text-xl: clamp(1.5rem, 0.6vw + 1.3rem, 1.875rem);
  --text-nav: clamp(0.95rem, 0.9rem + 0.25vw, 1.15rem);

  /* Heading Sizes */
  --heading-xs: clamp(1rem, 0.5vw + 0.85rem, 1.25rem);
  --heading-s: clamp(1.125rem, 0.7vw + 0.95rem, 1.5rem);
  --heading-m: clamp(1.5rem, 1vw + 1.2rem, 2.25rem);
  --heading-l: clamp(1.875rem, 1.3vw + 1.4rem, 2.75rem);
  --heading-xl: clamp(2.25rem, 1.6vw + 1.7rem, 3.25rem);
  --heading-2xl: clamp(2.75rem, 2vw + 2rem, 4rem);
  --heading-3xl: clamp(3.25rem, 2.5vw + 2.5rem, 4.75rem);

  /* --------------
    SPACING
    ---------------*/
  --space-xs: clamp(0.5rem, 0.4rem + 0.35vw, 0.8rem);
  --space-s: clamp(0.75rem, 0.6rem + 0.5vw, 1.2rem);
  --space-m: clamp(1rem, 0.8rem + 0.7vw, 1.6rem);
  --space-l: clamp(1.5rem, 1rem + 1vw, 2.4rem);
  --space-xl: clamp(2rem, 1.5rem + 1.2vw, 3.2rem);
  --flow-space: var(--space-xs); /* GLOBALE FLOW VARIABLE */
  --gutter: clamp(1.5rem, 8vw, 9rem);
  --section-padding-block: clamp(4rem, 1.5vw + 2rem, 7rem);

  /*-------------
    RADIUS
    ---------------*/
  --radius-xs: 0.2rem;
  --radius-s: 0.4rem;
  --radius-m: 0.8rem;
  --radius-l: 1.6rem;
  --radius-pill: 50vh;
  --radius-circle: 50%;

  /*---------------
  SHADOWS
  -------------*/
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-s: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-m: 0 4px 8px rgba(0, 0, 0, 0.12);
  --shadow-l: 0 8px 16px rgba(0, 0, 0, 0.16);

  /*--------
  HEADER
  ---------*/
  --header-height: 5rem;
}