/* ============================================================
   Bexon Industries — Design Tokens & Base
   Shared by index.php (Onepager) and styleguide.php
   Source: Bexon Brand Styleguide v3.0
   ============================================================ */

:root {
  /* ─── Brand · Primärfarben ─────────────────────────────── */
  --bex-green:    #7FBA45;   /* gemessen aus Logo            */
  --bex-green-d:  #6AA235;
  --bex-green-l:  #98D060;
  --bex-blue:     #1594C9;   /* Industrie-Blau, vom Kunden   */
  --bex-blue-d:   #0F7AAA;
  --bex-blue-l:   #3FAEDB;

  /* ─── Chrome / Stahl-Material (Wortmark) ───────────────── */
  --steel-bright: #E8EAED;
  --steel-mid:    #C0C5CB;
  --steel-base:   #8D959E;
  --steel-shadow: #5E646C;
  --chrome-gradient: linear-gradient(180deg,
    #E8EAED 0%, #C0C5CB 45%, #8D959E 50%, #C0C5CB 55%, #E8EAED 100%);

  /* ─── Neutrale Grauskala ───────────────────────────────── */
  --gray-100: #F2F4F6;
  --gray-200: #DCE0E5;
  --gray-300: #B6BDC5;
  --gray-400: #8D959E;
  --gray-500: #5E646C;
  --gray-700: #2E343A;
  --gray-900: #14181C;

  /* ─── Surfaces ─────────────────────────────────────────── */
  --bg:        #F5F7F9;
  --bg-paper:  #FFFFFF;
  --bg-dark:   #0E1418;
  --bg-darker: #06090C;
  --ink:       #14181C;
  --ink-soft:  #5E646C;
  --rule:      #DCE0E5;

  /* ─── Typografie ───────────────────────────────────────── */
  --font-display: "Saira", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  /* ─── Layout ───────────────────────────────────────────── */
  --page-max: 1440px;
}

/* ─── Reset & Base ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }
a { color: inherit; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  margin: 0;
}

/* Long German compound words wrap gracefully on narrow screens */
p { hyphens: auto; }

:focus-visible {
  outline: 2px solid var(--bex-blue);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}