/* Echtzeitnetz – Farbpalette und Designs zum Weiterverwenden
   Designs: standard | steampunk | forschung, jeweils Tag und Nacht.
   Einbinden: <html data-design="steampunk" data-theme="dark">  (ohne data-theme: folgt dem Gerät)
   Variablennamen wie in Echtzeitnetz (--red = Systemfarbe), dazu neutrale Aliase (--primary …). */

:root {
  --std-gruen: #2e7d4f;
  --sp-brass-1: #f0cf7e;
  --sp-brass-2: #c9973f;
  --sp-brass-3: #8a5c1c;
  --sp-leather-1: #4a2e1b;
  --sp-leather-2: #2b190d;
  --fo-tuerkis: #00c9d8;
  --fo-himmel: #94e3fe;
  --fo-on: #03262b;
  --fo-indigo: #4b3fd1;
  --fo-space-1: #0b1030;
  --fo-space-2: #1d1756;
  --fo-star: #e5b84a;
  --radius: 10px; --radius-lg: 14px; --radius-pill: 999px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

/* ---------- Standard ---------- */
:root, :root[data-design="standard"] {
  --red: #2e7d4f;
  --red-dark: #23633e;
  --red-soft: #e8f3ec;
  --fo-text: #2e7d4f;
  --error: #b3122e;
  --error-soft: #fbeef0;
  --ink: #1c2230;
  --ink-2: #4a5263;
  --ink-3: #7a8293;
  --paper: #f7f5f1;
  --card: #ffffff;
  --line: #e4dfd7;
  --line-2: #efebe5;
  --green: #1f7a4d;
  --green-soft: #e8f4ee;
  --amber: #9a6200;
  --amber-soft: #fdf3e1;
  --blue: #2a5a9e;
  --blue-soft: #eaf0f9;
  --primary: var(--red);
  --primary-dark: var(--red-dark);
  --primary-soft: var(--red-soft);
  --primary-text: var(--fo-text);
  --shadow: 0 1px 2px rgba(28, 34, 48, .06), 0 2px 8px rgba(28, 34, 48, .04);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-design]):not([data-theme="light"]),
  :root[data-design="standard"]:not([data-theme="light"]) {
    --red: #5fb784;
    --red-dark: #7fcaa0;
    --red-soft: #1a2e22;
    --fo-text: #5fb784;
    --error: #f06a7e;
    --error-soft: #3a1c22;
    --ink: #ecebe8;
    --ink-2: #b9bcc4;
    --ink-3: #8a8f9b;
    --paper: #15181e;
    --card: #1e222a;
    --line: #333844;
    --line-2: #2a2e37;
    --green: #5fcf97;
    --green-soft: #18302a;
    --amber: #e8b25a;
    --amber-soft: #352a17;
    --blue: #8ab2ef;
    --blue-soft: #1c2638;
    --primary: var(--red);
    --primary-dark: var(--red-dark);
    --primary-soft: var(--red-soft);
    --primary-text: var(--fo-text);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3);
  }
}

:root:not([data-design])[data-theme="dark"], :root[data-design="standard"][data-theme="dark"] {
  --red: #5fb784;
  --red-dark: #7fcaa0;
  --red-soft: #1a2e22;
  --fo-text: #5fb784;
  --error: #f06a7e;
  --error-soft: #3a1c22;
  --ink: #ecebe8;
  --ink-2: #b9bcc4;
  --ink-3: #8a8f9b;
  --paper: #15181e;
  --card: #1e222a;
  --line: #333844;
  --line-2: #2a2e37;
  --green: #5fcf97;
  --green-soft: #18302a;
  --amber: #e8b25a;
  --amber-soft: #352a17;
  --blue: #8ab2ef;
  --blue-soft: #1c2638;
  --primary: var(--red);
  --primary-dark: var(--red-dark);
  --primary-soft: var(--red-soft);
  --primary-text: var(--fo-text);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

/* ---------- Steampunk ---------- */
:root[data-design="steampunk"] {
  --red: #a8742a;
  --red-dark: #7f5317;
  --red-soft: #f1e2bf;
  --fo-text: #a8742a;
  --error: #9b2a16;
  --error-soft: #f6dfd3;
  --ink: #33210f;
  --ink-2: #5a3f22;
  --ink-3: #85694a;
  --paper: #eadbb8;
  --card: #f8eed6;
  --line: #cdb68a;
  --line-2: #e2d0a6;
  --green: #5f6b2a;
  --green-soft: #e8e6c8;
  --amber: #8c4a22;
  --amber-soft: #f3dcc4;
  --blue: #3d5a6c;
  --blue-soft: #dfe5e3;
  --primary: var(--red);
  --primary-dark: var(--red-dark);
  --primary-soft: var(--red-soft);
  --primary-text: var(--fo-text);
  --shadow: 0 1px 0 rgba(255, 250, 235, .7) inset, 0 3px 10px rgba(60, 35, 10, .18);
}

:root[data-design="steampunk"] { --radius: 6px; }

@media (prefers-color-scheme: dark) {
  :root[data-design="steampunk"]:not([data-theme="light"]) {
    --red: #d7a24a;
    --red-dark: #f0c472;
    --red-soft: #3b2814;
    --fo-text: #d7a24a;
    --error: #e58a6e;
    --error-soft: #3a1d14;
    --ink: #f1e3c4;
    --ink-2: #d4bf98;
    --ink-3: #a68f6a;
    --paper: #1b120b;
    --card: #2a1c11;
    --line: #5a3f22;
    --line-2: #3a2816;
    --green: #b9c27a;
    --green-soft: #2b2c16;
    --amber: #e39a62;
    --amber-soft: #3a2414;
    --blue: #9fbccc;
    --blue-soft: #1e2a30;
    --primary: var(--red);
    --primary-dark: var(--red-dark);
    --primary-soft: var(--red-soft);
    --primary-text: var(--fo-text);
    --shadow: 0 1px 0 rgba(255, 220, 160, .06) inset, 0 4px 14px rgba(0, 0, 0, .5);
  }
}

:root[data-design="steampunk"][data-theme="dark"] {
  --red: #d7a24a;
  --red-dark: #f0c472;
  --red-soft: #3b2814;
  --fo-text: #d7a24a;
  --error: #e58a6e;
  --error-soft: #3a1d14;
  --ink: #f1e3c4;
  --ink-2: #d4bf98;
  --ink-3: #a68f6a;
  --paper: #1b120b;
  --card: #2a1c11;
  --line: #5a3f22;
  --line-2: #3a2816;
  --green: #b9c27a;
  --green-soft: #2b2c16;
  --amber: #e39a62;
  --amber-soft: #3a2414;
  --blue: #9fbccc;
  --blue-soft: #1e2a30;
  --primary: var(--red);
  --primary-dark: var(--red-dark);
  --primary-soft: var(--red-soft);
  --primary-text: var(--fo-text);
  --shadow: 0 1px 0 rgba(255, 220, 160, .06) inset, 0 4px 14px rgba(0, 0, 0, .5);
}

/* ---------- Forschung ---------- */
:root[data-design="forschung"] {
  --red: #00c9d8;
  --red-dark: #0097a3;
  --red-soft: #d6f6f9;
  --fo-text: #007a84;
  --error: #c2264d;
  --error-soft: #fbe6ec;
  --ink: #141a33;
  --ink-2: #3c4466;
  --ink-3: #6b7393;
  --paper: #eef1f8;
  --card: #ffffff;
  --line: #d3d9ea;
  --line-2: #e6eaf4;
  --green: #0f8a6c;
  --green-soft: #e0f4ee;
  --amber: #a85a06;
  --amber-soft: #fdf0dc;
  --blue: #1f5fbf;
  --blue-soft: #e5eefb;
  --primary: var(--red);
  --primary-dark: var(--red-dark);
  --primary-soft: var(--red-soft);
  --primary-text: var(--fo-text);
  --shadow: 0 1px 2px rgba(20, 26, 70, .08), 0 4px 14px rgba(40, 40, 120, .08);
}

@media (prefers-color-scheme: dark) {
  :root[data-design="forschung"]:not([data-theme="light"]) {
    --red: #00c9d8;
    --red-dark: #5fe3ec;
    --red-soft: #08323a;
    --fo-text: #00c9d8;
    --error: #ff7a9a;
    --error-soft: #3a1626;
    --ink: #e8ebff;
    --ink-2: #b7bde6;
    --ink-3: #848bb8;
    --paper: #070a1d;
    --card: #10153a;
    --line: #283063;
    --line-2: #1a2050;
    --green: #4fd1a8;
    --green-soft: #10302a;
    --amber: #f0b35c;
    --amber-soft: #36260f;
    --blue: #7fb0ff;
    --blue-soft: #14224a;
    --primary: var(--red);
    --primary-dark: var(--red-dark);
    --primary-soft: var(--red-soft);
    --primary-text: var(--fo-text);
    --shadow: 0 0 0 1px rgba(143, 134, 255, .08), 0 6px 22px rgba(0, 0, 0, .55);
  }
}

:root[data-design="forschung"][data-theme="dark"] {
  --red: #00c9d8;
  --red-dark: #5fe3ec;
  --red-soft: #08323a;
  --fo-text: #00c9d8;
  --error: #ff7a9a;
  --error-soft: #3a1626;
  --ink: #e8ebff;
  --ink-2: #b7bde6;
  --ink-3: #848bb8;
  --paper: #070a1d;
  --card: #10153a;
  --line: #283063;
  --line-2: #1a2050;
  --green: #4fd1a8;
  --green-soft: #10302a;
  --amber: #f0b35c;
  --amber-soft: #36260f;
  --blue: #7fb0ff;
  --blue-soft: #14224a;
  --primary: var(--red);
  --primary-dark: var(--red-dark);
  --primary-soft: var(--red-soft);
  --primary-text: var(--fo-text);
  --shadow: 0 0 0 1px rgba(143, 134, 255, .08), 0 6px 22px rgba(0, 0, 0, .55);
}