/* CI-Datei agathon. Aktiv, wenn in .env FRONTEND_CI=agathon steht; Caddy liefert diesen
   Ordner dann unter /ci/active/ aus (infrastructure/caddy/Caddyfile).
   Quelle: Webseite https://agathon-moulding.com/ (Theme-Variablen --motto-*, Stand 2026-10-07):
   primary #787E82 (RAL 7037), secondary/Headlines #232323, Fliesstext #444444,
   Sekundaertext #7B7B7B, Formular-/Untermenue-Flaeche #E1E1E1, Seitenhintergrund #EBEBEB,
   Button-Rahmen hover #424A5E, Headlines Outfit 600, Fliesstext Poppins 400.
   Logo: Wortmarke „agathon moulding 1949" (LOGO-RALweiss-270.png der Webseite, auf #787E82
   umgefaerbt und auf 670 px verkleinert); Favicon: cropped-logofavicon-192x192.png.
   Abstaende, Schriftgroessen und Radien sind aus der onconnecting-CI-Datei uebernommen,
   damit das Layout der Oberflaeche unveraendert bleibt. */

/* Schriften selbst ausgeliefert (CSP: nur eigene Quelle), latin-Subset von
   @fontsource/outfit@5.3.0 und @fontsource/poppins@5.3.0, Lizenz SIL OFL 1.1 (fonts/OFL-*.txt). */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/outfit-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/outfit-latin-600-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/poppins-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/poppins-latin-600-normal.woff2') format('woff2');
}

:root {
  /* Marke: Name (Alt-Text des Logos), Logo und Favicon relativ zu diesem Ordner. */
  --ci-name: 'agathon';
  --ci-logo: 'logo.png';
  --ci-favicon: 'favicon.png';

  /* Accent: 500 = primary #787E82 (RAL 7037), 700 = #424A5E (Button-Rahmen hover).
     Eigene Ergaenzung: 50, 300 und 600 aus #787E82 aufgehellt bzw. abgedunkelt. */
  --color-accent-50: #f1f2f3;
  --color-accent-300: #b4b8bb;
  --color-accent-500: #787e82;
  --color-accent-600: #5f6569;
  --color-accent-700: #424a5e;

  /* Neutral: 100 = #EBEBEB (Seitenhintergrund), 200 = #E1E1E1 (Formularflaeche),
     500 = #7B7B7B (Sekundaertext), 700 = #444444 (Fliesstext), 900 = #232323 (Headlines).
     Eigene Ergaenzung: 50, 300, 400, 600 und 800 als Zwischenstufen derselben Grauskala. */
  --color-neutral-50: #f5f5f5;
  --color-neutral-100: #ebebeb;
  --color-neutral-200: #e1e1e1;
  --color-neutral-300: #cccccc;
  --color-neutral-400: #a3a3a3;
  --color-neutral-500: #7b7b7b;
  --color-neutral-600: #5c5c5c;
  --color-neutral-700: #444444;
  --color-neutral-800: #2e2e2e;
  --color-neutral-900: #232323;

  --color-gray-400: #a3a3a3;
  --color-gray-700: #444444;

  /* Functional: Eigene Ergaenzung, die Webseite definiert keine Ampelfarben.
     Gleiche Werte wie onconnecting, damit die Ampel der Formen gleich lesbar bleibt. */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;

  /* Flaeche von Panels und Karten, Text auf Accent-Flaechen (Button-Text #FFFFFF) */
  --color-surface: #ffffff;
  --color-on-accent: #ffffff;

  /* Headlines Outfit 600, Fliesstext Poppins 400; Mono fuer Messwerte und Achsen wie onconnecting */
  --font-headline: Outfit, 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: Poppins, 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: Consolas, 'Cascadia Mono', 'DejaVu Sans Mono', monospace;

  --font-weight-headline: 600;
  --letter-spacing-headline: -0.02em;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 0.9375rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.375rem;
  --font-size-2xl: 1.75rem;
  --font-size-3xl: 2rem;
  --font-size-4xl: 2.625rem;
  --font-size-5xl: 3.5rem;

  --line-height-tight: 1.1;
  --line-height-snug: 1.3;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.65;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
}