/* Chemkeys – Prototyp 3: Layout, Formen und Schrift von Prototyp 2 ("Laborinstrument"),
   Farben von Prototyp 1 (Tintenblau, hell als Standard).
   Hell ist Standard; Dunkel über System-Einstellung oder data-theme="dark" (assets/theme-init.js). */
    :root {
      color-scheme: light;
      --font-sans: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
      --font-serif: var(--font-sans); /* keine Serifenschrift */
      --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

      --bg: #f5f6f7; --surface: #fdfdfd; --surface2: #f0f1f3; --surface3: #e6e8eb;
      --accent: #2446b0; --accent2: #2446b0; --accent-glow: rgba(36,70,176,0.08);
      --accent-soft: rgba(36,70,176,0.07); --accent-line: rgba(36,70,176,0.32);
      --on-accent: #ffffff;
      --text: #15171b; --text2: #474c56; --text3: #6a707b;
      --green: #1e7a4c; --red: #b3261e; --yellow: #946200; --orange: #b0520f; --box5: var(--accent2);
      --green-soft: rgba(30,122,76,0.08); --red-soft: rgba(179,38,30,0.07);
      --yellow-soft: rgba(148,98,0,0.08); --orange-soft: rgba(176,82,15,0.08);
      --border: #e1e3e7; --border-strong: #cdd0d6;
      --grid-line: rgba(20,24,33,0.045);
      --paper: #ffffff;
      /* Strukturformeln (RDKit-PNGs, weiss hinterlegt) werden in die Fläche eingeblendet */
      --struct-filter: none; --struct-blend: multiply;
      --shadow: 0 1px 2px rgba(20,24,33,0.04), 0 8px 24px rgba(20,24,33,0.06);
      --overlay: rgba(21,23,27,0.42);
      --radius: 2px; --radius-sm: 2px;
      --nav-w: 216px; --nav-rail: 56px;
      /* Aliase: im Code referenziert, waren bisher undefiniert */
      --surface1: var(--surface); --text1: var(--text);
    }
    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg: #111315; --surface: #17191c; --surface2: #1e2024; --surface3: #272a2f;
        --accent: #4a6ee0; --accent2: #9db4ff; --accent-glow: rgba(125,155,255,0.10);
        --accent-soft: rgba(125,155,255,0.08); --accent-line: rgba(125,155,255,0.38);
        --on-accent: #ffffff;
        --text: #e9eaec; --text2: #aeb2ba; --text3: #868b95;
        --green: #58c58f; --red: #f0776f; --yellow: #e0b44a; --orange: #eb9a55;
        --green-soft: rgba(88,197,143,0.10); --red-soft: rgba(240,119,111,0.10);
        --yellow-soft: rgba(224,180,74,0.10); --orange-soft: rgba(235,154,85,0.10);
        --border: #2a2d32; --border-strong: #3a3e45;
        --grid-line: rgba(255,255,255,0.035);
        --paper: #eceef1;
        --struct-filter: invert(1) hue-rotate(180deg) saturate(1.3); --struct-blend: screen;
        --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 10px 30px rgba(0,0,0,0.35);
        --overlay: rgba(5,6,8,0.66);
      }
    }
    :root[data-theme="dark"] {
      color-scheme: dark;
      --bg: #111315; --surface: #17191c; --surface2: #1e2024; --surface3: #272a2f;
      --accent: #4a6ee0; --accent2: #9db4ff; --accent-glow: rgba(125,155,255,0.10);
      --accent-soft: rgba(125,155,255,0.08); --accent-line: rgba(125,155,255,0.38);
      --on-accent: #ffffff;
      --text: #e9eaec; --text2: #aeb2ba; --text3: #868b95;
      --green: #58c58f; --red: #f0776f; --yellow: #e0b44a; --orange: #eb9a55;
      --green-soft: rgba(88,197,143,0.10); --red-soft: rgba(240,119,111,0.10);
      --yellow-soft: rgba(224,180,74,0.10); --orange-soft: rgba(235,154,85,0.10);
      --border: #2a2d32; --border-strong: #3a3e45;
      --grid-line: rgba(255,255,255,0.035);
      --paper: #eceef1;
      --struct-filter: invert(1) hue-rotate(180deg) saturate(1.3); --struct-blend: screen;
      --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 10px 30px rgba(0,0,0,0.35);
      --overlay: rgba(5,6,8,0.66);
    }