/* ============================================================
   meinprozentrechner.de — Design Tokens
   Alle Farben, Abstände und Schriften ausschließlich hier.
   Komponenten enthalten keine fest verdrahteten Farbwerte.
   ============================================================ */

/* --- Selbst gehostete Schriften (kein Google-Fonts-Request) --- */
@font-face {
  font-family: 'Fira Sans';
  src: url('../fonts/FiraSans-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Fira Sans';
  src: url('../fonts/FiraSans-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Fira Sans Condensed';
  src: url('../fonts/FiraSansCondensed-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Fira Sans Condensed';
  src: url('../fonts/FiraSansCondensed-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Fira Mono';
  src: url('../fonts/FiraMono-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* Farbe — hell */
  --paper:       #F5F7F5;
  --card:        #FFFFFF;
  --ink:         #121A17;
  --ink-2:       #41504A;
  --ink-3:       #626F68;  /* korrigiert von #6B7A73: 4,19:1 → 4,88:1 auf --paper */
  --rule:        #DCE3DF;  /* dekorative Trennlinien */
  --rule-strong: #7E8C85;  /* Umrandung von Bedienelementen, 3,51:1 auf --card */
  --brand:       #0E6B4E;
  --brand-soft:  #E2F0EA;
  --brand-ink:   #FFFFFF;  /* Text auf --brand */
  --positive:    #146B3A;
  --negative:    #A8201A;
  --alert-soft:  #FBEAE8;

  /* Typografie */
  --f-sans: 'Fira Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-cond: 'Fira Sans Condensed', 'Fira Sans', system-ui, sans-serif;
  --f-mono: 'Fira Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Abstände — 4px-Skala */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* Form */
  --radius: 4px;
  --tap: 44px;
  --field-h: 48px;
  --bund: 1080px;

  color-scheme: light;
}

/* --- Dunkles Thema: ausschließlich Token-Neudefinition --- */
/* Kein automatisches Dunkelschema mehr.
   In WordPress bestimmt das Kadence-Theme den Seitenhintergrund. Ein per
   prefers-color-scheme umgeschaltetes Textfarbset landete deshalb auf weissem
   Grund — helle Schrift auf hellem Grund, gemessene 1,85:1. Dunkel gibt es
   jetzt nur noch auf ausdrücklichen Wunsch über den Umschalter, und dann
   faerben wir den Hintergrund selbst mit. */

:root[data-theme='dunkel'] {
  --paper:       #0E1512;
  --card:        #16201C;
  --ink:         #EAF0EC;
  --ink-2:       #B4C2BB;
  --ink-3:       #93A39B;
  --rule:        #2E3D37;
  --rule-strong: #5C736A;
  --brand:       #5CC79B;
  --brand-soft:  #17332A;
  --brand-ink:   #0B120F;
  --positive:    #5FD39A;
  --negative:    #FF9B8F;
  --alert-soft:  #33201D;
  color-scheme: dark;
}

/* Ausdrücklich dunkel: dann übernehmen wir auch den Seitenhintergrund,
   damit Text und Grund immer aus demselben Satz stammen. */
:root[data-theme='dunkel'] body,
:root[data-theme='dunkel'] .site,
:root[data-theme='dunkel'] .content-bg,
:root[data-theme='dunkel'] .entry-content {
  background-color: var(--paper);
  color: var(--ink);
}