/* ==========================================================================
   GEMEC – Designtokens
   Farben aus dem Firmenlogo ausgemessen (Bilder/Logo/FirmenLogo.jpeg).
   Kontrastwerte gegen Weiss bzw. --navy-800 geprueft, Ziel WCAG AA.
   ========================================================================== */

:root {
  /* --- Marke: Navy aus dem Logobogen --- */
  --navy-900: #061a3b;   /* dunkelster Logoton, Footer */
  --navy-800: #0b2349;   /* Primaerflaeche          15,8:1 auf Weiss */
  --navy-700: #0e2a56;
  --navy-600: #12305c;   /* Verlaufsmitte, Hover */

  /* --- Interaktion: aufgehelltes Markenblau --- */
  --blue-500: #1d5fa8;   /* Links, CTA               6,5:1 auf Weiss */
  --blue-400: #2b74c4;   /* Hover auf hellem Grund */
  --blue-300: #7db2e8;   /* Links auf Navy           6,9:1 auf navy-800 */

  /* --- Chrom/Silber aus der Logokante --- */
  --steel-500: #6b6c70;  /* Meta-Text auf Weiss      5,6:1 */
  --steel-400: #8e9095;  /* nur Rahmen + Text ab 18px  3,1:1 */
  --steel-300: #c1c4ca;  /* Trennlinien */
  --steel-200: #dfe3e9;
  --steel-100: #eef1f5;

  /* --- Flaechen --- */
  --paper: #f4f6f9;
  --white: #ffffff;
  --ink: #16203a;        /* Fliesstext              14,2:1 auf Weiss */
  --ink-muted: #4a5568;  /*                          7,6:1 auf Weiss */

  /* --- Signal --- */
  --error: #a4262c;      /* Formularfehler           6,4:1 auf Weiss */
  --error-bg: #fdf3f3;
  --success: #145c3a;    /* Bestaetigung             7,3:1 auf Weiss */
  --success-bg: #f0f7f3;

  /* --- Typografie --- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Helvetica Neue", Arial, sans-serif;

  --step--1: clamp(0.83rem, 0.81rem + 0.09vw, 0.89rem);
  --step-0:  clamp(1rem, 0.96rem + 0.18vw, 1.11rem);
  --step-1:  clamp(1.2rem, 1.13rem + 0.33vw, 1.39rem);
  --step-2:  clamp(1.44rem, 1.33rem + 0.55vw, 1.74rem);
  --step-3:  clamp(1.73rem, 1.55rem + 0.87vw, 2.18rem);
  --step-4:  clamp(2.07rem, 1.81rem + 1.32vw, 2.72rem);
  --step-5:  clamp(2.49rem, 2.1rem + 1.94vw, 3.4rem);

  /* --- Raster --- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2rem;
  --space-xl:  3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  --width-max: 76rem;
  --width-text: 42rem;

  --radius-s: 3px;
  --radius-m: 5px;

  /* --- Tiefe: sparsam, technisch --- */
  --shadow-s: 0 1px 2px rgb(6 26 59 / 0.08);
  --shadow-m: 0 2px 8px rgb(6 26 59 / 0.1);
  --shadow-l: 0 8px 28px rgb(6 26 59 / 0.14);

  --border: 1px solid var(--steel-300);
  --transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Die Seite ist bewusst auf eine helle Darstellung festgelegt: Baufotos und
   das Logo mit weissem Grund wirken in einer dunklen Variante unruhig.
   color-scheme verhindert, dass Browser Formularfelder eigenmaechtig umfaerben. */
:root {
  color-scheme: light;
}