/* AjPerformance — Kinetic Precision
   Einzige Quelle der Wahrheit für alle Tokens. */

/* Schriften: siehe fonts.css — bewusst selbst ausgeliefert, damit
   keine Besucher-IP an Google geht. Wird im Seitenkopf vor dieser
   Datei eingebunden. */

:root {
  /* ---- Farbe: Flächen ---- */
  --ajp-background: #0b0b0d;
  --ajp-surface: #141418;
  --ajp-surface-high: #1d1d23;
  --ajp-surface-highest: #2a2a35;

  /* ---- Farbe: Text ---- */
  --ajp-on-background: #ffffff;
  --ajp-on-surface: #ffffff;
  --ajp-on-surface-variant: #9a9aa5;

  /* ---- Farbe: Linien ---- */
  --ajp-outline: #2a2a35;
  --ajp-outline-strong: #4a4a5a;
  --ajp-hairline: rgba(255, 255, 255, 0.1);

  /* ---- Farbe: Akzente ----
     Rot = "Optimiert". Blau = "Serie". Diese Zuordnung ist verbindlich. */
  --ajp-primary: #f0525e;
  --ajp-primary-dim: #b93a44;
  --ajp-on-primary: #ffffff;
  --ajp-on-primary-strong: #14060a; /* für Text unter 18px auf roter Fläche */

  --ajp-secondary: #4fa5e8;
  --ajp-secondary-dim: #2f6e9e;
  --ajp-on-secondary: #04121d;

  --ajp-success: #3fbf87;
  --ajp-warning: #e8b54f;
  --ajp-error: #ff6b5e;

  /* ---- Typografie ---- */
  --ajp-font-display: "Archivo Narrow", "Oswald", sans-serif;
  --ajp-font-body: "Geist", "Inter", system-ui, sans-serif;
  --ajp-font-data: "JetBrains Mono", ui-monospace, monospace;

  --ajp-text-display-lg: 700 72px/1 var(--ajp-font-display);
  --ajp-text-headline-lg: 700 48px/1.08 var(--ajp-font-display);
  --ajp-text-headline-md: 600 32px/1.12 var(--ajp-font-display);
  --ajp-text-body-lg: 400 18px/1.6 var(--ajp-font-body);
  --ajp-text-body-md: 400 16px/1.5 var(--ajp-font-body);
  --ajp-text-label-caps: 500 12px/1.33 var(--ajp-font-data);
  --ajp-text-data: 400 14px/1.43 var(--ajp-font-data);

  --ajp-tracking-display: -0.04em;
  --ajp-tracking-headline: -0.02em;
  --ajp-tracking-caps: 0.1em;

  /* ---- Raster ---- */
  --ajp-unit: 4px;
  --ajp-gutter: 24px;
  --ajp-margin: 16px;
  --ajp-section-gap: 80px;
  --ajp-max-width: 1200px;

  /* ---- Form ---- */
  --ajp-radius: 0px;
  --ajp-skew-angle: 20deg;
  --ajp-skew-offset: 14px; /* tan(20°) × 40px Standardhöhe */

  /* ---- Tiefe ---- */
  --ajp-glow-primary: 0 0 20px rgba(240, 82, 94, 0.3);
  --ajp-glow-secondary: 0 0 20px rgba(79, 165, 232, 0.35);
  --ajp-blur-overlay: blur(12px);

  /* ---- Bewegung ---- */
  --ajp-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ajp-duration-fast: 150ms;
  --ajp-duration: 320ms;
  --ajp-duration-slow: 700ms;
}

@media (min-width: 768px) {
  :root {
    --ajp-margin: 64px;
    --ajp-section-gap: 120px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ajp-duration-fast: 0ms;
    --ajp-duration: 0ms;
    --ajp-duration-slow: 0ms;
  }
}