/* colors_and_type.css — NAVY v3 (2026-07-04)
   Redesign nach RG-adaptierter Linie: Navy #002266 auf Weiß, Hellblau-Flächen, EIN Signalblau-Akzent.
   Schrift: Plus Jakarta Sans (self-hosted, DSGVO). DM Mono bleibt als Zahlen-/Eyebrow-Ebene (Eigenständigkeits-Signatur).
   Alt-Namen (--color-gold/--color-loden) bleiben als Aliase auf den Akzent — kein Massen-Rename in JSX nötig.
   EB Garamond / DM Sans / Inter bleiben als @font-face verfügbar (buch.html, geldsystem.html, Blog, Cover-Welt). */

/* ---- Plus Jakarta Sans: Display + Body (Navy v3) ---- */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/plusjakarta-variable.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/plusjakarta-italic-variable.woff2') format('woff2-variations');
}

/* ---- Inter (Bestand, ungenutzt auf der Site) ---- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-variable.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-italic-variable.woff2') format('woff2-variations');
}

/* ---- Alt-Fonts (Bestand — NICHT löschen: buch.html, geldsystem.html, Blog, Cover) ---- */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/ebgaramond-variable.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/ebgaramond-italic-variable.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/dmsans-variable.woff2') format('woff2-variations');
}

/* ---- DM Mono: Labels/Eyebrows/Zahlen (self-hosted, Latin-Subset, DSGVO) ---- */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/dmmono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/dmmono-500.woff2') format('woff2');
}

:root {
  /* Type stack — Navy v3 (2026-07-04): Plus Jakarta Sans Display + Body, DM Mono Labels.
     Löst die Editorial-Wende (EB Garamond + DM Sans) auf der Website ab. */
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'DM Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;

  /* Flächen — weißer Grund, hellblau getönte Wechselbänder (RG-Logik) */
  --color-canvas:  #FFFFFF;   /* Seiten-Hintergrund + Default-Sektionen */
  --color-paper:   #FFFFFF;   /* Karten (Differenzierung über Border/Shadow) + helle Schrift auf Dunkel */
  --color-paper-2: #F0F6FF;   /* hellblaues Wechselband, leicht */
  --color-bone:    #E4EFFC;   /* alternierende Sektion (.sect.bone) — hellblaues Band */

  /* Stone — blaugraue Stufen (RG-Body-Grau #344054), WCAG-AA auf Weiß */
  --color-stone-1: #98A2B3;   /* NUR Labels/Deko, kein Fließtext */
  --color-stone-2: #344054;   /* Sekundär-Fließtext */
  --color-stone-3: #475467;   /* Eyebrows, Captions, tertiär */
  --color-stone-4: #1D2939;   /* dunkle Labels */

  /* Ink — Text + Headlines (Deep Navy) */
  --color-ink: #0C1B3A;

  /* Navy = CTAs, Buttons, Dunkelflächen (echtes RG-Navy statt Fast-Schwarz) */
  --color-navy: #002266;
  --color-navy-deep: #001744;
  --color-navy-soft: #16357F;
  --color-navy-tint: #D1E9FF;  /* Akzent/Hervorhebung AUF Navy-Flächen = Hellblau */

  /* Akzent — EIN Signalblau für Akzentwörter, Punkte, aktive Zustände (6.6:1 auf Weiß) */
  --color-accent-ink: #1D4FD8;
  --color-accent-soft: #4D79E8;
  --color-accent-tint: rgba(29, 79, 216, 0.10);

  /* Gold = Alias auf den Akzent (Alt-Name aus Messing-Ära, referenziert in JSX/CSS) */
  --color-gold: var(--color-accent-ink);
  --color-gold-soft: var(--color-accent-soft);
  --color-gold-tint: var(--color-accent-tint);
  --color-gold-deep: #163FA8;

  /* Loden = Akzent-Alias (Alt-Name, zeigt über gold auf den Akzent) */
  --color-loden: var(--color-gold);
  --color-loden-deep: #163FA8;
  --color-loden-soft: var(--color-gold-soft);
  --color-loden-tint: var(--color-gold-tint);

  /* Ampel/Status — semantische Datenfarben (ersetzen harte Hex in JSX) */
  --color-pos:  #0E7A55;
  --color-neg:  #C0392B;
  --color-warn: #B7791F;

  /* Border / Rule — fein, navy-getönt */
  --color-rule: rgba(0, 34, 102, 0.12);
  --hairline: rgba(0, 34, 102, 0.07);
  --hairline-strong: rgba(0, 34, 102, 0.16);

  /* Radius — Rundungen (Pill-Buttons bleiben als Eigenständigkeits-Signatur) */
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 24px;

  /* Easing + Shadow (weich, navy-getönt) */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --shadow-sm: 0 1px 2px rgba(12,27,58,0.05), 0 2px 6px rgba(12,27,58,0.05);
  --shadow-md: 0 2px 4px rgba(12,27,58,0.05), 0 14px 36px -10px rgba(12,27,58,0.14);

  --border-strong: var(--hairline-strong);
  --border-subtle: var(--hairline);
}

/* Body-Default */
html { color: var(--color-ink); background: var(--color-canvas); }
body { font-family: var(--font-body); background: var(--color-canvas); }