/* Design tokens as CSS custom properties.
 *
 * Brand colours and fonts are linked to the Elementor global colours/fonts
 * (Elementor → Website-Einstellungen → Globale Farben / Globale Schriftarten):
 * change them there and the whole site follows. The values after the comma are the
 * defaults, used where the Elementor kit is not loaded.
 *
 * Elementor defines its globals on <body class="elementor-kit-…">, so colours, gradients and
 * fonts are declared on :root (defaults) AND body (resolved with the Elementor values).
 *
 * Breakpoints used in the CSS (no variables in media queries):
 *   xs 480 · sm 640 · md 768 · lg 900 · xl 1080 · xxl 1280
 *   "below md" = @media (max-width: 767.98px), "from lg" = @media (min-width: 900px)
 */

:root,
body {
  /* Brand colours (logo / design draft) */
  --color-primary: var(--e-global-color-primary, #e8401c);
  --color-primary-700: var(--e-global-color-accent, #b52d0e);
  --color-primary-600: var(--e-global-color-argus_primary_600, #cf3513);
  --color-primary-400: var(--e-global-color-argus_primary_400, #f26a4f);
  --color-primary-300: var(--e-global-color-argus_primary_300, #f8977f);
  --color-primary-100: var(--e-global-color-argus_primary_100, #fde3dc);
  --color-primary-50: var(--e-global-color-argus_primary_50, #fff4f1);

  /* Neutrals */
  --color-ink: var(--e-global-color-secondary, #222222);
  --color-text: var(--e-global-color-text, #3b3b3b);
  --color-muted: var(--e-global-color-argus_muted, #6c6c6c);
  --color-line: var(--e-global-color-argus_line, #e4e2e0);
  --color-surface: #ffffff;
  --color-surface-alt: var(--e-global-color-argus_surface_alt, #f6f5f3);
  --color-surface-dark: var(--e-global-color-argus_surface_dark, #1e1c1b);

  /* Gradients */
  --gradient-primary: linear-gradient(160deg, #f47458 0%, var(--color-primary) 100%);
  --gradient-footer: linear-gradient(180deg, #ee5232 0%, #f6866a 100%);

  /* Typography */
  --font-heading: var(--e-global-typography-primary-font-family, 'Exo 2'), system-ui, sans-serif;
  --font-body: var(--e-global-typography-text-font-family, 'Source Sans 3'), system-ui, sans-serif;
}

:root {
  --fs-base: 1.0625rem;

  /* Shape & depth */
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 8px rgba(34, 24, 18, .06);
  --shadow-card: 0 12px 32px rgba(34, 24, 18, .09);
  --shadow-primary: 0 16px 32px -10px rgba(232, 64, 28, .45);

  /* Layout */
  --container: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --header-h: 84px;
  --section-space: clamp(64px, 9vw, 120px);

  --ease: cubic-bezier(.2, .7, .2, 1);
}