/* ============================================================
   NO PIXELS - Design-Tokens
   Eine Quelle fuer Farben, Schrift und Abstaende. Alle Bausteine
   des Themes und die Plugin-Anpassungen ziehen ihre Werte hier.
   Die Farbwerte stammen aus dem bestehenden Seiten-CSS, damit
   sich optisch nichts verschiebt.
   ============================================================ */

/* ---------- Schriften, lokal ---------- */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:300 900;
  font-display:swap;
  src:url('../fonts/inter-variable.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
                U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Sora';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('../fonts/sora-variable.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
                U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* ---------- Flaechen ---------- */
  --np-bg:#0c3236;
  --np-bg-deep:#0a2e32;
  --np-bg-darker:#003e3f;
  --np-flaeche:#0f383d;
  --np-flaeche-hoch:#154349;

  /* ---------- Akzente ---------- */
  --np-accent:#114a50;
  --np-accent-2:#1a6970;
  --np-accent-3:#2a8a93;
  --np-eyebrow:#133837;
  --np-line:#15779b;
  --np-gold:#e8b14c;
  --np-gruen:#15a392;

  /* Akzentfarbe fuer TEXT.
     --np-accent-3 (#2a8a93) ist als Flaeche und Rand richtig, als
     Schrift auf dem dunklen Grund aber zu dunkel: nur 3,4:1, wo
     4,5:1 noetig sind. --np-gruen kommt auf 4,4:1, also auch knapp
     darunter. Dieser Ton erreicht 5,0:1 und bleibt in derselben
     Farbfamilie - Flaechen und Raender bleiben unveraendert. */
  --np-akzent-text:#49a9b2;

  /* Knopfflaeche: satter als --np-accent-3, damit weisse Schrift
     darauf 6,8:1 erreicht. Auf dem hellen Ton kaeme sie nur auf 3,0:1. */
  --np-knopf:#15646d;
  --np-knopf-hover:#1a7681;
  --np-knopf-rand:#1d7c86;

  /* ---------- Text ---------- */
  --np-text:#ffffff;
  --np-text-dim:rgba(255,255,255,.78);
  --np-text-leise:rgba(255,255,255,.62);

  /* ---------- Raender ---------- */
  --np-rand:rgba(42,138,147,.28);
  --np-rand-hell:rgba(42,138,147,.55);

  /* ---------- Schrift ---------- */
  --np-font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --np-font-display:'Sora','Inter',system-ui,sans-serif;

  --np-s-xs:.78rem;
  --np-s-sm:.88rem;
  --np-s-md:1rem;
  --np-s-lg:1.25rem;
  --np-s-xl:1.75rem;
  --np-s-2xl:2.5rem;
  --np-s-3xl:clamp(2.2rem,5vw,3.8rem);

  /* ---------- Abstaende ---------- */
  --np-1:.5rem;
  --np-2:1rem;
  --np-3:1.5rem;
  --np-4:2.5rem;
  --np-5:4rem;
  --np-6:6.5rem;

  /* ---------- Rundungen ---------- */
  --np-r-sm:6px;
  --np-r-md:12px;
  --np-r-lg:20px;
  --np-r-pille:999px;

  /* ---------- Breiten ---------- */
  --np-breite:1280px;
  --np-breite-text:68ch;
}