/* ============================================================
   KI-Lernstatt — Marken-Tokens
   Natives CSS, kein JS, kein Inline-CSS. Schriften selbst gehostet.
   Diese Datei extern einbinden: <link rel="stylesheet" href="/css/brand-tokens.css">
   ============================================================ */

/* ---------- Selbst gehostete Schriften (IBM Plex, OFL) ----------
   Lege die .woff2-Dateien unter /fonts/ ab (siehe Markenrichtlinie). */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/IBMPlexSans-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/IBMPlexSans-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/IBMPlexSans-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/IBMPlexMono-Medium.woff2") format("woff2");
}

/* ---------- Design-Tokens ---------- */
:root {
  /* Marken-Farben */
  --color-petrol:        #14545C;  /* Primär */
  --color-petrol-dark:   #0D3A40;  /* Hover / Tiefe */
  --color-petrol-tint:   #E9F1F0;  /* helle Flächen, Badges */
  --color-ochre:         #DE9F2C;  /* Akzent (NICHT für Text auf Hell) */
  --color-ochre-dark:    #B97D14;  /* Akzent-Hover / Akzenttext auf Hell, falls nötig */
  --color-ink:           #1B2125;  /* Fließtext, Überschriften */
  --color-paper:         #FAF7F1;  /* Seitenhintergrund */
  --color-surface:       #FFFFFF;  /* Karten */
  --color-line:          #E6DFD3;  /* Rahmen, Trenner */
  --color-muted:         #51606A;  /* Sekundärtext */

  /* Semantische Zuordnung */
  --bg:            var(--color-paper);
  --surface:       var(--color-surface);
  --text:          var(--color-ink);
  --text-muted:    var(--color-muted);
  --border:        var(--color-line);
  --brand:         var(--color-petrol);
  --brand-strong:  var(--color-petrol-dark);
  --accent:        var(--color-ochre);
  --link:          var(--color-petrol);
  --link-hover:    var(--color-petrol-dark);

  /* Typografie */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Cascadia Mono",
               Consolas, "Liberation Mono", monospace;

  /* Schriftgrößen (modulare Skala ~1.25) */
  --fs-300: 0.875rem;   /* Klein / Labels */
  --fs-400: 1.0625rem;  /* Fließtext */
  --fs-500: 1.25rem;
  --fs-600: 1.5rem;     /* h3 */
  --fs-700: 1.95rem;    /* h2 */
  --fs-800: 2.5rem;     /* h1 */
  --lh-body: 1.6;
  --lh-tight: 1.2;

  /* Raster / Abstände */
  --measure: 70ch;      /* max. Textbreite */
  --radius: 12px;
  --radius-lg: 16px;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
}

/* ---------- Basis-Anwendung (optional, anpassbar) ---------- */
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-400);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-weight: 600; line-height: var(--lh-tight); color: var(--text); }
h1 { font-size: var(--fs-800); }
h2 { font-size: var(--fs-700); }
h3 { font-size: var(--fs-600); }

a { color: var(--link); text-decoration-thickness: 2px; text-underline-offset: 2px; }
a:hover, a:focus { color: var(--link-hover); }

/* Primärer Button */
.btn {
  display: inline-block;
  background: var(--brand);
  color: var(--color-paper);
  padding: 0.7em 1.3em;
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
}
.btn:hover, .btn:focus { background: var(--brand-strong); color: var(--color-paper); }

/* Ocker als Akzent: Unterstrich/Linie, NICHT als Textfarbe auf Hell */
.accent-rule { border: none; border-top: 3px solid var(--accent); width: 3rem; }

/* Mono-Label (z. B. „Stand: …") */
.label-mono { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-300); color: var(--brand); }

/* Sichtbarer Fokus für Barrierefreiheit */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }