/* CoreDev IT – Design Tokens
   Grundlage für Website und alle digitalen Anwendungen.
   Die Schriften liegen lokal in ./webfonts/ – kein CDN, siehe branding-guide.md */

@font-face {
  font-family: "IBM Plex Sans";
  src: url("./webfonts/IBMPlexSans-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("./webfonts/IBMPlexSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("./webfonts/IBMPlexSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Marke */
  --cd-primary:        #385591;  /* Klammern, "Core", "IT", Buttons, Links */
  --cd-primary-hover:  #2C4474;
  --cd-core:           #5E80BC;  /* Kernquadrat und "Dev" auf hellem Grund */
  --cd-core-invers:    #8FA9D0;  /* dasselbe auf dunklem Grund */

  /* Text */
  --cd-text:           #17243D;
  --cd-text-muted:     #6B7280;
  --cd-text-invers:    #FFFFFF;
  --cd-text-muted-inv: #A3AEC0;

  /* Flächen und Linien */
  --cd-surface:        #FFFFFF;
  --cd-surface-alt:    #F6F7F9;
  --cd-surface-dark:   #17243D;
  --cd-line:           #DDE3EC;
  --cd-line-dark:      #2C3B57;

  /* Typografie */
  --cd-font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cd-size-caption: 0.875rem;   /* 14px */
  --cd-size-body:    1rem;       /* 16px */
  --cd-size-lead:    1.125rem;   /* 18px */
  --cd-size-h3:      1.25rem;    /* 20px */
  --cd-size-h2:      1.5rem;     /* 24px */
  --cd-size-h1:      2rem;       /* 32px */
  --cd-size-hero:    2.75rem;    /* 44px */
  --cd-leading-tight: 1.25;      /* Überschriften */
  --cd-leading-body:  1.65;      /* Fließtext */
  --cd-measure:       34rem;     /* max. Zeilenlänge, ca. 70 Zeichen */

  /* Raster: Vielfache von 8 */
  --cd-space-1: 0.25rem;
  --cd-space-2: 0.5rem;
  --cd-space-3: 1rem;
  --cd-space-4: 1.5rem;
  --cd-space-5: 2rem;
  --cd-space-6: 3rem;
  --cd-space-7: 4rem;
  --cd-space-8: 6rem;

  --cd-radius:      8px;
  --cd-radius-card: 12px;
  --cd-border:      1px solid var(--cd-line);
}

/* Dunkler Modus.
   Umsetzung von Regel 1 aus Abschnitt 5 des Branding-Guides: die Kernfarbe
   ist modusabhängig. #5E80BC säuft auf dunklem Grund ab, deshalb wechselt
   sie dort auf #8FA9D0; Sekundärtext geht von #6B7280 auf #A3AEC0.

   Überschrieben werden nur die Rollen, nicht die Markenwerte – die
   Komponenten-Schicht bleibt dadurch modusunabhängig und referenziert
   durchgehend dieselben Variablen.

   Zwei Werte sind abgeleitet statt neu erfunden, damit die Palette nicht
   wächst: die zweite Fläche und der Link-Hover entstehen per color-mix()
   aus bereits festgelegten Farben. */

@media (prefers-color-scheme: dark) {
  :root {
    --cd-surface:        #17243D;
    --cd-surface-alt:    color-mix(in srgb, #17243D 92%, #FFFFFF);
    --cd-text:           #FFFFFF;
    --cd-text-muted:     #A3AEC0;
    --cd-line:           #2C3B57;

    /* Links und Buttons: #385591 hat auf #17243D nur 1,6:1 und ist dort
       unbrauchbar. Die Invers-Kernfarbe kommt auf rund 6:1. */
    --cd-primary:        #8FA9D0;
    --cd-primary-hover:  color-mix(in srgb, #8FA9D0 80%, #FFFFFF);
    --cd-core:           #8FA9D0;
  }
}

/* Grundsatz für Fließtext: die Kernfarbe ist keine Textfarbe.
   #5E80BC kommt auf 4,0:1 – genug für große Schrift und Grafik,
   zu wenig für Fließtext. Dafür ist --cd-text da. */

body {
  font-family: var(--cd-font);
  font-size: var(--cd-size-body);
  font-weight: 400;
  line-height: var(--cd-leading-body);
  color: var(--cd-text);
  background: var(--cd-surface);
}

h1, h2, h3 { font-weight: 500; line-height: var(--cd-leading-tight); }

a { color: var(--cd-primary); text-underline-offset: 0.15em; }
a:hover { color: var(--cd-primary-hover); }

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--cd-primary);
  outline-offset: 2px;
}

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