/* ===============================
   Design Tokens & Farbvariablen
   =============================== */

/*
  Global proportional scale:
  1rem grows/shrinks with viewport width, so typography, spacing and components
  scale together without many media queries.
*/
html {
  font-size: clamp(14px, calc(10px + 0.625vw), 20px);
}

:root {
  /* Navigation tokens */
  --nav-bg: #fff;
  --nav-link-color: #076633;
  --nav-submenu-bg: #002611;
  --nav-submenu-hover: #076633;

  /* Brand colors */
  --color-primary: #0e7a3d;
  --color-primary-rgb: 14 122 61;
  --color-primary-alt: #076633;
  --color-primary-alt-rgb: 7 102 51;
  --color-secondary: #f39200;
  --color-secondary-rgb: 243 146 0;
  --color-secondary-alt: #d28a1e;
  --color-secondary-alt-rgb: 210 138 30;
  --color-tertiary: #002611;
  --color-tertiary-rgb: 0 38 17;

  /* Neutral channels */
  --color-white: #fff;
  --color-white-rgb: 255 255 255;
  --color-black: #000;
  --color-black-rgb: 0 0 0;

  /* Semantic colors */
  --color-bg: var(--color-tertiary);
  --color-text: #fff;
  --color-text-alt: #c3d3c4;

  /* Interaction */
  --color-form-focus-ring: rgb(var(--color-primary-alt-rgb) / 0.16);

  /* Motion */
  --transition-default: 0.4s;
  --transition-fast: 0.3s;

  /* Fonts */
  --font-primary: "Figtree", sans-serif;
  --font-weight-regular: 400;
  --font-weight-bold: 800;
  --line-height-tight: 1.2;
  --line-height-base: 1.5;

  /* Type scale */
  --fs-h1: 2.5rem;
  --fs-h2: 2rem;
  --fs-h3: 1.5rem;
  --fs-h4: 1.25rem;
  --fs-h5: 1.1rem;
  --fs-h6: 1rem;
  --fs-body: 1rem;

  /* Spacing scale */
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.25rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 4rem;
  --space-3xl: 5rem;

  /* Radius and icon sizes */
  --radius-sm: 0.5rem;
  --radius-pill: 3rem;
  --icon-size-sm: 1.5rem;

  /* Layout */
  --gutter: 4rem;
  --container-max: 90rem;
  --content-max: 75rem;

  /* Layering */
  --z-header: 1000;
  --z-overlay: 1100;
  --z-modal: 1200;
  --z-base: 1;
  --z-content: 2;
  --z-ui: 10;
  --z-nav-header: 1001;
  --z-nav-logo: 1002;
  --z-nav-wrapper: 990;
  --z-nav-dropdown: 1005;
  --z-nav-mobile: 980;
  --z-spinner: 5000;
  --z-lightbox: 999999;

}