/* Marco Ancora — generiert aus marke.json. Nicht von Hand ändern: node skripte/tokens.mjs */
:root {
  /* Farben */
  --person-navy: #002169;
  --person-black: #101820;
  --person-off-white: #F6F6F4;
  --person-white: #FFFFFF;
  --person-ink: #28324D;
  --person-muted: #5C6170;
  --person-line: #DEDCD7;
  --person-photo: #ECECEA;
  /* Funktionsfarben */
  --person-funktion-fokus: var(--person-navy);
  --person-funktion-fokus-invers: var(--person-off-white);
  --person-funktion-feldrand: var(--person-muted);
  --person-funktion-statustext-fehler: #B42318;
  --person-funktion-statustext-erfolg: #1F7A45;
  /* Schrift */
  --person-font-sans: "Borna", "Helvetica Neue", Arial, system-ui, sans-serif;
  /* Rollen, Fläche standard */
  --person-flaeche: var(--person-off-white);
  --person-flaeche-erhoeht: var(--person-white);
  --person-text: var(--person-ink);
  --person-text-stark: var(--person-black);
  --person-text-akzent: var(--person-navy);
  --person-text-leise: var(--person-muted);
  --person-rand: var(--person-line);
  --person-rand-feld: var(--person-funktion-feldrand);
  --person-aktion: var(--person-navy);
  --person-aktion-text: var(--person-white);
  --person-aktion-hover: #001852;
  --person-aktion-gedrueckt: #00103A;
  --person-link: var(--person-navy);
  --person-link-hover: var(--person-navy);
  --person-fokus: var(--person-funktion-fokus);
  --person-status-fehler: var(--person-funktion-statustext-fehler);
  --person-status-erfolg: var(--person-funktion-statustext-erfolg);
  --person-aktion-sekundaer: var(--person-navy);
  --person-abdunkeln: var(--person-black);
  --person-abdunkeln-text: var(--person-white);
  /* Radien (vorschlag, noch nicht freigegeben) */
  --person-radius-klein: 4px;
  --person-radius-gross: 8px;
  /* Bewegung: nur Deckkraft, Position und Farbe; bei reduzierter Bewegung aus */
  --person-dauer-kurz: 150ms;
  --person-dauer-mittel: 200ms;
  --person-dauer-lang: 300ms;
  --person-kurve: cubic-bezier(.22,.61,.36,1);
  --person-kurve-aus: ease-in;
  /* Frühere Namen, nur noch als Verweis */
  --font-sans: var(--person-font-sans);
}

/* Rollen, Fläche invers: <section data-flaeche="invers"> */
[data-flaeche="invers"] {
  --person-flaeche: var(--person-navy);
  --person-text: var(--person-off-white);
  --person-text-stark: var(--person-white);
  --person-aktion: var(--person-off-white);
  --person-aktion-text: var(--person-navy);
  --person-link: var(--person-off-white);
  --person-fokus: var(--person-funktion-fokus-invers);
  --person-aktion-hover: var(--person-white);
  --person-aktion-gedrueckt: var(--person-line);
  --person-aktion-sekundaer: var(--person-white);
  --person-text-leise: var(--person-off-white);
  --person-abdunkeln: var(--person-black);
  --person-abdunkeln-text: var(--person-white);
  --person-status-fehler: var(--person-white);
}

/* Rollen, Fläche standard innerhalb einer anderen Fläche: <div data-flaeche="standard"> */
[data-flaeche="standard"] {
  --person-flaeche: var(--person-off-white);
  --person-text: var(--person-ink);
  --person-text-stark: var(--person-black);
  --person-text-leise: var(--person-muted);
  --person-aktion: var(--person-navy);
  --person-aktion-text: var(--person-white);
  --person-aktion-hover: #001852;
  --person-aktion-gedrueckt: #00103A;
  --person-link: var(--person-navy);
  --person-fokus: var(--person-funktion-fokus);
  --person-status-fehler: var(--person-funktion-statustext-fehler);
  --person-aktion-sekundaer: var(--person-navy);
  --person-abdunkeln: var(--person-black);
  --person-abdunkeln-text: var(--person-white);
}

/* Dunkler Modus: <html data-thema="auto"> folgt dem System, data-thema="dunkel" erzwingt; ohne Attribut hell */
@media (prefers-color-scheme: dark) {
:root[data-thema="auto"], :root[data-thema="auto"] [data-flaeche="standard"] {
  color-scheme: dark;
  --person-flaeche: var(--person-black);
  --person-text: var(--person-off-white);
  --person-text-stark: var(--person-white);
  --person-aktion: var(--person-off-white);
  --person-aktion-text: var(--person-navy);
  --person-link: var(--person-off-white);
  --person-fokus: var(--person-funktion-fokus-invers);
  --person-aktion-hover: var(--person-white);
  --person-aktion-gedrueckt: var(--person-line);
  --person-aktion-sekundaer: var(--person-white);
  --person-text-leise: var(--person-off-white);
  --person-abdunkeln: var(--person-black);
  --person-abdunkeln-text: var(--person-white);
  --person-status-fehler: var(--person-white);
  --person-flaeche-erhoeht: var(--person-navy);
  --person-text-akzent: var(--person-white);
  --person-rand: #2A4596;
  --person-rand-feld: #8492C6;
  --person-link-hover: var(--person-white);
  --person-status-erfolg: var(--person-white);
}
}
:root[data-thema="dunkel"], :root[data-thema="dunkel"] [data-flaeche="standard"] {
  color-scheme: dark;
  --person-flaeche: var(--person-black);
  --person-text: var(--person-off-white);
  --person-text-stark: var(--person-white);
  --person-aktion: var(--person-off-white);
  --person-aktion-text: var(--person-navy);
  --person-link: var(--person-off-white);
  --person-fokus: var(--person-funktion-fokus-invers);
  --person-aktion-hover: var(--person-white);
  --person-aktion-gedrueckt: var(--person-line);
  --person-aktion-sekundaer: var(--person-white);
  --person-text-leise: var(--person-off-white);
  --person-abdunkeln: var(--person-black);
  --person-abdunkeln-text: var(--person-white);
  --person-status-fehler: var(--person-white);
  --person-flaeche-erhoeht: var(--person-navy);
  --person-text-akzent: var(--person-white);
  --person-rand: #2A4596;
  --person-rand-feld: #8492C6;
  --person-link-hover: var(--person-white);
  --person-status-erfolg: var(--person-white);
}

/* Kern-Anschluss: Komponenten verwenden nur --kern-… */
:root, [data-flaeche] {
  --kern-flaeche: var(--person-flaeche);
  --kern-flaeche-erhoeht: var(--person-flaeche-erhoeht);
  --kern-text: var(--person-text);
  --kern-text-stark: var(--person-text-stark);
  --kern-text-leise: var(--person-text-leise);
  --kern-rand: var(--person-rand);
  --kern-rand-feld: var(--person-rand-feld);
  --kern-aktion: var(--person-aktion);
  --kern-aktion-text: var(--person-aktion-text);
  --kern-aktion-hover: var(--person-aktion-hover);
  --kern-aktion-gedrueckt: var(--person-aktion-gedrueckt);
  --kern-aktion-sekundaer: var(--person-aktion-sekundaer);
  --kern-link: var(--person-link);
  --kern-link-hover: var(--person-link-hover);
  --kern-fokus: var(--person-fokus);
  --kern-status-fehler: var(--person-status-fehler);
  --kern-status-erfolg: var(--person-status-erfolg);
  --kern-abdunkeln: var(--person-abdunkeln);
  --kern-abdunkeln-text: var(--person-abdunkeln-text);
  --kern-radius-aktion: var(--person-radius-klein);
  --kern-radius-karte: var(--person-radius-gross);
  --kern-radius-tag: var(--person-radius-klein);
  --kern-font: var(--person-font-sans);
  --kern-dauer-kurz: var(--person-dauer-kurz);
  --kern-dauer-mittel: var(--person-dauer-mittel);
  --kern-dauer-lang: var(--person-dauer-lang);
  --kern-kurve: var(--person-kurve);
  --kern-kurve-aus: var(--person-kurve-aus);
}