/* files/css/tokens.css — Design-Tokens connect2net.de
 *
 * Quelle: export/variante3.html (Inline-Styles + Hell-Thema im <style>-Block),
 * Umsetzungsplan Abschnitt 3. Farben ausschließlich hier pflegen.
 *
 * :root      = dunkles Thema (Standard)
 * html.light = helles Thema (wird vom Inline-Script im <head> bzw. von site.js gesetzt)
 *
 * Breakpoints (in Media Queries nicht als Variable nutzbar, deshalb nur dokumentiert):
 *   1100px  Navigation reduziert (Burger), 12er-Raster einspaltig, 3er-Raster zweispaltig
 *    820px  alles einspaltig, Sektions-Padding 64/20 px, Schriftgrößen per clamp()
 */

:root {
  /* Farben */
  --c-bg: #141619;
  --c-surface: #1d2126;
  --c-header-bg: rgba(20, 22, 25, .92);
  --c-text: #ecebe7;
  --c-text-soft: #c9ccd0;
  --c-text-muted: #b4b8bd;
  --c-text-faint: #8a9097;
  --c-accent: #4888c7;
  --c-accent-text: #4888c7;
  --c-on-accent: #141619;
  --c-border: #2a2e33;
  --c-border-2: #2f343a;
  --c-border-strong: #3a3f45;
  --c-input-line: #6b7178;
  --c-focus: #4888c7;
  --c-selection-text: #141619;
  --c-error: #ff8f85;       /* Formularfehler, ca. 7:1 auf --c-surface */

  /* Schriften */
  --font-sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Abstände / Maße */
  --pad-x: 56px;          /* seitlicher Mindestabstand Header, Sektionen, Footer */
  /* Inhaltsbreite: bis 1580 px Fensterbreite 1328 px (bei 1440 px genau 1440 - 2 × 56), darüber wächst
     sie mit (84 % der Fensterbreite) bis höchstens 1760 px, damit breite Schirme kein schmales Band zeigen */
  --container: clamp(1328px, 84vw, 1760px);
  /* Seitlicher Innenabstand für volle Breite: mindestens --pad-x, auf breiten Bildschirmen so viel,
     dass der Inhalt mittig auf --container bleibt. 100% löst sich erst dort auf, wo das Token
     verwendet wird (Breite des umgebenden Blocks), deshalb nur in padding/margin einsetzen. */
  --gutter: max(var(--pad-x), (100% - var(--container)) / 2);
  --header-h: 84px;       /* Sprungziel-Versatz (scroll-margin-top) */

  color-scheme: dark;
}

html.light {
  --c-bg: #f4f3ef;
  --c-surface: #ffffff;
  --c-header-bg: rgba(244, 243, 239, .92);
  --c-text: #141619;
  --c-text-soft: #3a4048;
  --c-text-muted: #4a5058;
  --c-text-faint: #5f656c;
  --c-accent: #4888c7;
  --c-accent-text: #2f6aa8;
  --c-on-accent: #141619;
  --c-border: #d8dadd;
  --c-border-2: #d8dadd;
  --c-border-strong: #a3a8ae;
  --c-input-line: #a3a8ae;
  --c-focus: #4888c7;
  --c-selection-text: #ffffff;
  --c-error: #b3261e;       /* ca. 6,5:1 auf Weiß */

  color-scheme: light;
}

@media (max-width: 820px) {
  :root {
    --pad-x: 20px;
  }
}

/* Smartphones (bis 430 px): etwas weniger Rand als im Export (20 px), mehr Platz für Text und Buttons */
@media (max-width: 430px) {
  :root {
    --pad-x: 16px;
  }
}