/* ProcureValor Design-Tokens v2
   Entwurf Claude 01.10.2026, Status: freigegeben 02.10.2026 (Daniel, Markensystem_CI.md).
   Eine Quelle fuer Websites (procurevalor.com, spendvalor.com, rheinvalor.com) und das Tool.
   Herkunft je Wert: siehe tokens.json (Feld source). Q1 bis Q5 = Bestand, neu = Vorschlag Claude.
   Verwendung: <html data-theme="dark"> fuer Websites, <html data-theme="light"> fuer das Tool.
   Modulkontext: data-module="spend" (usw.) auf einem Container setzt --pv-mod und --pv-mod-tint.
   Dunkle Teilflaechen in hellem Layout (z.B. Tool-Menue): data-surface="dark". */

:root {
  /* Primitive: Kernfarben */
  --pv-ink-900: #0b1622; /* Hintergrund dunkel (Websites, Tool-Dark); Q2 --ink */
  --pv-ink-800: #122233; /* Fläche dunkel, Tool-Menüleiste; Q2 --ink-2 */
  --pv-ink-700: #1a3046; /* Karte / erhöhte Fläche dunkel; Q2 --ink-3 */
  --pv-ink-600: #243e58; /* Hover / Rahmen stark dunkel; neu */
  --pv-line-dark: #2e4a66; /* Linien auf dunkel; neu */
  --pv-text-dark: #eef4f9; /* Text auf dunkel; Q2 --text */
  --pv-muted-dark: #9fb3c4; /* Sekundärtext auf dunkel; Q2 --muted */
  --pv-signal: #7fb3d5; /* Signal Blue: Akzent auf dunkel; Q1, Q2, Q3 --accent */
  --pv-signal-2: #a9d0ea; /* Signal hell (Hover, Verlauf); Q2 */
  --pv-signal-deep: #2c4c66; /* Signal tief (Flächen, Diagramm-Hintergrund); Q1, Q2 */
  --pv-signal-paper: #2c5a7a; /* Akzent auf Weiss (Links, Primärbutton hell); Q1, Q2 --mid, Q3 --brand */
  --pv-signal-tint: #e6f0f8; /* Akzentfläche hell (Hinweis, Auswahl); Q3 --calc-bg */
  --pv-paper-0: #ffffff; /* Karte / Papier hell; Q3 --card */
  --pv-paper-50: #f5f7f9; /* Hintergrund hell (Tool); Q3 --bg */
  --pv-line-light: #e2e6eb; /* Linien auf hell; Q3 --line */
  --pv-text-light: #0b1622; /* Text auf hell (= ink-900); neu (statt Q3 #1b1f24) */
  --pv-muted-light: #546271; /* Sekundärtext auf hell; neu (statt Q3 #5f6670) */
  --pv-note: #facc15; /* Notiz-Gelb, nur Annotationen (ersetzt Amber #E0B45C); Q4, Entscheid E5 02.10.2026 */
  --pv-swiss: #da291c; /* nur Schweizerkreuz; Q2 */
  /* Primitive: Modulfarben (600 = auf hell, 300 = auf dunkel, 50 = Tint hell, 950 = Tint dunkel) */
  --pv-mod-procure-600: #2c5a7a; --pv-mod-procure-300: #7fb3d5; --pv-mod-procure-50: #e6f0f8; --pv-mod-procure-950: #23394d; /* ProcureValor; Q2/Q3 (= Signal) */
  --pv-mod-spend-600: #2a64a5; --pv-mod-spend-300: #8fbbe8; --pv-mod-spend-50: #e9f1fa; --pv-mod-spend-950: #263a50; /* SpendValor; Q3 app.css */
  --pv-mod-source-600: #0e7268; --pv-mod-source-300: #6dd0c2; --pv-mod-source-50: #e2f3f0; --pv-mod-source-950: #213e4a; /* SourceValor; Q3 app.css */
  --pv-mod-contract-600: #4b4fae; --pv-mod-contract-300: #aeb1f3; --pv-mod-contract-50: #ecedf9; --pv-mod-contract-950: #2b3952; /* ContractValor; Q3 app.css */
  --pv-mod-margin-600: #a65a0c; --pv-mod-margin-300: #f0b968; --pv-mod-margin-50: #fbf0e1; --pv-mod-margin-950: #363a3b; /* MarginValor; Q3 app.css */
  --pv-mod-strategy-600: #914d9c; --pv-mod-strategy-300: #dba4e3; --pv-mod-strategy-50: #f7ecf9; --pv-mod-strategy-950: #32374f; /* StrategyValor; neu */
  --pv-mod-terms-600: #ac4072; --pv-mod-terms-300: #f59dbf; --pv-mod-terms-50: #fdeaf1; --pv-mod-terms-950: #363649; /* TermsValor; neu */
  --pv-mod-advisor-600: #5d6976; --pv-mod-advisor-300: #aeb8c3; --pv-mod-advisor-50: #ecf1f5; --pv-mod-advisor-950: #2b3a4a; /* AdvisorValor; neu */
  --pv-mod-learn-600: #517118; --pv-mod-learn-300: #a4c081; --pv-mod-learn-50: #ecf3e4; --pv-mod-learn-950: #293b3f; /* LearnValor; neu */
  /* Typografie */
  --pv-font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pv-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --pv-font-office: "Segoe UI", Arial, sans-serif;
  --pv-weight-display: 700; --pv-weight-display-light: 500;
  /* Form */
  --pv-radius-s: 6px; --pv-radius-m: 10px; --pv-radius-tile: 23%;
}

/* Semantik hell (Standard, Tool) */
:root, [data-theme="light"] {
  --pv-bg: var(--pv-paper-50);
  --pv-surface: var(--pv-paper-0);
  --pv-surface-2: var(--pv-signal-tint);
  --pv-line: var(--pv-line-light);
  --pv-text: var(--pv-text-light);
  --pv-muted: var(--pv-muted-light);
  --pv-accent: var(--pv-signal-paper); /* interaktiv: Links, Primaerbutton, Fokus; white-label ueberschreibbar */
  --pv-on-accent: #ffffff;
  --pv-mark-fg: var(--pv-ink-900); /* Kern und Ring der Bildmarke */
  --pv-nav-bg: var(--pv-ink-800); /* Tool-Menue bleibt dunkel */
  --pv-mod-procure: var(--pv-mod-procure-600); --pv-mod-procure-tint: var(--pv-mod-procure-50);
  --pv-mod-spend: var(--pv-mod-spend-600); --pv-mod-spend-tint: var(--pv-mod-spend-50);
  --pv-mod-source: var(--pv-mod-source-600); --pv-mod-source-tint: var(--pv-mod-source-50);
  --pv-mod-contract: var(--pv-mod-contract-600); --pv-mod-contract-tint: var(--pv-mod-contract-50);
  --pv-mod-margin: var(--pv-mod-margin-600); --pv-mod-margin-tint: var(--pv-mod-margin-50);
  --pv-mod-strategy: var(--pv-mod-strategy-600); --pv-mod-strategy-tint: var(--pv-mod-strategy-50);
  --pv-mod-terms: var(--pv-mod-terms-600); --pv-mod-terms-tint: var(--pv-mod-terms-50);
  --pv-mod-advisor: var(--pv-mod-advisor-600); --pv-mod-advisor-tint: var(--pv-mod-advisor-50);
  --pv-mod-learn: var(--pv-mod-learn-600); --pv-mod-learn-tint: var(--pv-mod-learn-50);
}

/* Semantik dunkel: OS-Einstellung, solange kein data-theme gesetzt ist */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pv-bg: var(--pv-ink-900);
    --pv-surface: var(--pv-ink-800);
    --pv-surface-2: var(--pv-ink-700);
    --pv-line: var(--pv-line-dark);
    --pv-text: var(--pv-text-dark);
    --pv-muted: var(--pv-muted-dark);
    --pv-accent: var(--pv-signal);
    --pv-on-accent: var(--pv-ink-900);
    --pv-mark-fg: var(--pv-text-dark);
    --pv-nav-bg: var(--pv-ink-800);
    --pv-mod-procure: var(--pv-mod-procure-300); --pv-mod-procure-tint: var(--pv-mod-procure-950);
    --pv-mod-spend: var(--pv-mod-spend-300); --pv-mod-spend-tint: var(--pv-mod-spend-950);
    --pv-mod-source: var(--pv-mod-source-300); --pv-mod-source-tint: var(--pv-mod-source-950);
    --pv-mod-contract: var(--pv-mod-contract-300); --pv-mod-contract-tint: var(--pv-mod-contract-950);
    --pv-mod-margin: var(--pv-mod-margin-300); --pv-mod-margin-tint: var(--pv-mod-margin-950);
    --pv-mod-strategy: var(--pv-mod-strategy-300); --pv-mod-strategy-tint: var(--pv-mod-strategy-950);
    --pv-mod-terms: var(--pv-mod-terms-300); --pv-mod-terms-tint: var(--pv-mod-terms-950);
    --pv-mod-advisor: var(--pv-mod-advisor-300); --pv-mod-advisor-tint: var(--pv-mod-advisor-950);
    --pv-mod-learn: var(--pv-mod-learn-300); --pv-mod-learn-tint: var(--pv-mod-learn-950);
  }
}

/* Semantik dunkel: explizit (Websites) und dunkle Teilflaechen */
[data-theme="dark"], [data-surface="dark"] {
  --pv-bg: var(--pv-ink-900);
  --pv-surface: var(--pv-ink-800);
  --pv-surface-2: var(--pv-ink-700);
  --pv-line: var(--pv-line-dark);
  --pv-text: var(--pv-text-dark);
  --pv-muted: var(--pv-muted-dark);
  --pv-accent: var(--pv-signal);
  --pv-on-accent: var(--pv-ink-900);
  --pv-mark-fg: var(--pv-text-dark);
  --pv-nav-bg: var(--pv-ink-800);
  --pv-mod-procure: var(--pv-mod-procure-300); --pv-mod-procure-tint: var(--pv-mod-procure-950);
  --pv-mod-spend: var(--pv-mod-spend-300); --pv-mod-spend-tint: var(--pv-mod-spend-950);
  --pv-mod-source: var(--pv-mod-source-300); --pv-mod-source-tint: var(--pv-mod-source-950);
  --pv-mod-contract: var(--pv-mod-contract-300); --pv-mod-contract-tint: var(--pv-mod-contract-950);
  --pv-mod-margin: var(--pv-mod-margin-300); --pv-mod-margin-tint: var(--pv-mod-margin-950);
  --pv-mod-strategy: var(--pv-mod-strategy-300); --pv-mod-strategy-tint: var(--pv-mod-strategy-950);
  --pv-mod-terms: var(--pv-mod-terms-300); --pv-mod-terms-tint: var(--pv-mod-terms-950);
  --pv-mod-advisor: var(--pv-mod-advisor-300); --pv-mod-advisor-tint: var(--pv-mod-advisor-950);
  --pv-mod-learn: var(--pv-mod-learn-300); --pv-mod-learn-tint: var(--pv-mod-learn-950);
}

/* Modulkontext: Modulfarbe ist im eigenen Modul der Akzent (Markensystem_CI.md Abschn. 8, Daniel 02.10.2026).
   Hell = 600, dunkel = 300. Suite-Ebene (procure) behaelt Signal. White Label setzt --pv-accent danach neu. */
[data-module="procure"] { --pv-mod: var(--pv-mod-procure); --pv-mod-tint: var(--pv-mod-procure-tint); --pv-accent: var(--pv-mod-procure); }
[data-module="procure"] [data-surface="dark"], [data-module="procure"][data-surface="dark"], [data-theme="dark"][data-module="procure"] { --pv-accent: var(--pv-mod-procure-300); }
[data-module="spend"] { --pv-mod: var(--pv-mod-spend); --pv-mod-tint: var(--pv-mod-spend-tint); --pv-accent: var(--pv-mod-spend); }
[data-module="spend"] [data-surface="dark"], [data-module="spend"][data-surface="dark"], [data-theme="dark"][data-module="spend"] { --pv-accent: var(--pv-mod-spend-300); }
[data-module="source"] { --pv-mod: var(--pv-mod-source); --pv-mod-tint: var(--pv-mod-source-tint); --pv-accent: var(--pv-mod-source); }
[data-module="source"] [data-surface="dark"], [data-module="source"][data-surface="dark"], [data-theme="dark"][data-module="source"] { --pv-accent: var(--pv-mod-source-300); }
[data-module="contract"] { --pv-mod: var(--pv-mod-contract); --pv-mod-tint: var(--pv-mod-contract-tint); --pv-accent: var(--pv-mod-contract); }
[data-module="contract"] [data-surface="dark"], [data-module="contract"][data-surface="dark"], [data-theme="dark"][data-module="contract"] { --pv-accent: var(--pv-mod-contract-300); }
[data-module="margin"] { --pv-mod: var(--pv-mod-margin); --pv-mod-tint: var(--pv-mod-margin-tint); --pv-accent: var(--pv-mod-margin); }
[data-module="margin"] [data-surface="dark"], [data-module="margin"][data-surface="dark"], [data-theme="dark"][data-module="margin"] { --pv-accent: var(--pv-mod-margin-300); }
[data-module="strategy"] { --pv-mod: var(--pv-mod-strategy); --pv-mod-tint: var(--pv-mod-strategy-tint); --pv-accent: var(--pv-mod-strategy); }
[data-module="strategy"] [data-surface="dark"], [data-module="strategy"][data-surface="dark"], [data-theme="dark"][data-module="strategy"] { --pv-accent: var(--pv-mod-strategy-300); }
[data-module="terms"] { --pv-mod: var(--pv-mod-terms); --pv-mod-tint: var(--pv-mod-terms-tint); --pv-accent: var(--pv-mod-terms); }
[data-module="terms"] [data-surface="dark"], [data-module="terms"][data-surface="dark"], [data-theme="dark"][data-module="terms"] { --pv-accent: var(--pv-mod-terms-300); }
[data-module="advisor"] { --pv-mod: var(--pv-mod-advisor); --pv-mod-tint: var(--pv-mod-advisor-tint); --pv-accent: var(--pv-mod-advisor); }
[data-module="advisor"] [data-surface="dark"], [data-module="advisor"][data-surface="dark"], [data-theme="dark"][data-module="advisor"] { --pv-accent: var(--pv-mod-advisor-300); }
[data-module="learn"] { --pv-mod: var(--pv-mod-learn); --pv-mod-tint: var(--pv-mod-learn-tint); --pv-accent: var(--pv-mod-learn); }
[data-module="learn"] [data-surface="dark"], [data-module="learn"][data-surface="dark"], [data-theme="dark"][data-module="learn"] { --pv-accent: var(--pv-mod-learn-300); }


/* ===== Site-Ebene: websites/tokens.css ===== */
/* ==========================================================================
   tokens.css (Websites) – Site-Ebene ueber den Markentokens CI v2
   Farben kommen NUR aus branding/tokens.css (freigegeben 02.10.2026, Markensystem_CI.md).
   build.py haengt diese Datei hinter branding/tokens.css an (assets/tokens.css).
   Hier keine Hex-Werte ausser Weiss/Schwarz fuer Mischungen.
   Varianten (Markensystem_CI.md Abschn. 6a):
     R0 dunkel  <html data-theme="dark"  data-module="procure|spend|source|…">  procurevalor.com, spendvalor.com
     R1 Papier  <html data-theme="light" data-module="procure">                 rheinvalor.com
   Akzent = --pv-accent: Suite/Rheinvalor = Signal, Modulseite = Modulfarbe (Abschn. 8).
   ========================================================================== */

/* Schriften (lokal, SIL Open Font License, Lizenzen in /assets/fonts/) */
@font-face{font-family:"Space Grotesk";font-weight:500;font-display:swap;src:url(fonts/space-grotesk-500.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:700;font-display:swap;src:url(fonts/space-grotesk-700.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:100 900;font-display:swap;src:url(fonts/inter-var.woff2) format("woff2")}

/* R0 dunkel (Standard der Websites) */
:root,[data-theme="dark"]{
  --ink:var(--pv-ink-900);
  --ink-2:var(--pv-ink-800);
  --ink-3:var(--pv-ink-700);
  --band-1:var(--pv-ink-700);
  --band-2:var(--pv-ink-800);
  --signal:var(--pv-accent);
  --signal-2:color-mix(in srgb,var(--pv-accent) 62%,#fff);
  --signal-3:color-mix(in srgb,var(--pv-accent) 70%,#000);
  --mid:var(--pv-signal-paper);
  --line:color-mix(in srgb,var(--pv-accent) 16%,transparent);
  --text:var(--pv-text-dark);
  --muted:var(--pv-muted-dark);
  --on-accent:var(--pv-ink-900);
  --chip-line:color-mix(in srgb,#fff 14%,transparent);
  --chip-bg:color-mix(in srgb,#fff 4%,transparent);
  --swiss:var(--pv-swiss);
  --swiss-2:color-mix(in srgb,var(--pv-swiss) 55%,#fff);
  --focus:var(--signal-2);
  --display:var(--pv-font-display);
  --body:var(--pv-font-body);
}

/* R1 Papier (rheinvalor.com) */
[data-theme="light"]{
  --ink:var(--pv-paper-50);
  --ink-2:var(--pv-paper-0);
  --ink-3:var(--pv-paper-0);
  --band-1:var(--pv-ink-800);
  --band-2:var(--pv-ink-900);
  --signal:var(--pv-accent);
  --signal-2:var(--pv-accent);
  --signal-3:color-mix(in srgb,var(--pv-accent) 75%,#000);
  --mid:var(--pv-signal-tint);
  --line:var(--pv-line-light);
  --text:var(--pv-text-light);
  --muted:var(--pv-muted-light);
  --on-accent:#fff;
  --chip-line:var(--pv-line-light);
  --chip-bg:var(--pv-paper-0);
  --swiss:var(--pv-swiss);
  --swiss-2:var(--pv-swiss);
  --focus:var(--pv-signal-paper);
  --display:var(--pv-font-display);
  --body:var(--pv-font-body);
}

/* Bildmarke inline: Ring + Kern in Markenvordergrund, Punkt in Marken-/Modulfarbe */
.mk .mk-r{stroke:var(--pv-mark-fg)}
.mk .mk-c{fill:var(--pv-mark-fg)}
.mk .mk-d{fill:var(--mk-dot)}
.mk[data-m="procure"]{--mk-dot:var(--pv-mod-procure)}
.mk[data-m="spend"]{--mk-dot:var(--pv-mod-spend)}
.mk[data-m="source"]{--mk-dot:var(--pv-mod-source)}
.mk[data-m="contract"]{--mk-dot:var(--pv-mod-contract)}
.mk[data-m="margin"]{--mk-dot:var(--pv-mod-margin)}
.mk[data-m="strategy"]{--mk-dot:var(--pv-mod-strategy)}
.mk[data-m="terms"]{--mk-dot:var(--pv-mod-terms)}
.mk[data-m="advisor"]{--mk-dot:var(--pv-mod-advisor)}
.mk[data-m="learn"]{--mk-dot:var(--pv-mod-learn)}
/* Wortmarke: «Valor» in Marken-/Modulfarbe (E6) */
.vm-procure{color:var(--pv-mod-procure)}.vm-spend{color:var(--pv-mod-spend)}.vm-source{color:var(--pv-mod-source)}
.vm-contract{color:var(--pv-mod-contract)}.vm-margin{color:var(--pv-mod-margin)}.vm-strategy{color:var(--pv-mod-strategy)}
.vm-terms{color:var(--pv-mod-terms)}.vm-advisor{color:var(--pv-mod-advisor)}.vm-learn{color:var(--pv-mod-learn)}