/*
 * Theme contract
 * --------------
 * The current UI still contains a few legacy concrete colors. Therefore the
 * first themes intentionally share the same dark surface model and vary the
 * design language through semantic tokens. New components must use these
 * tokens only; a later light theme can then be added without feature changes.
 */
:root,
:root[data-theme="logicalis"] {
  color-scheme: dark;
  --theme-name: "Logicalis Operations";
  --color-red: #e41e26;
  --color-red-hover: #ff3842;
  --color-red-light: rgb(228 30 38 / 13%);
  --color-red-glow: rgb(228 30 38 / 22%);
  --color-grey: #9aa4b2;
  --color-grey-dark: #eef2f7;
  --color-grey-light: #151b24;
  --color-grey-mid: #6f7b8c;
  --color-bg-main: #070b11;
  --color-bg-card: #0d121a;
  --color-border: #1b2430;
  --color-success: #26c6a2;
  --color-info: #55c1d9;
  --color-warning: #f2b84b;
  --color-danger: #ff5a66;
  --logicalis-red: #e41e26;
  --logicalis-teal: #00a3a6;

  --bg: #070b11;
  --panel: #0d121a;
  --line: #1b2430;
  --text: #eef2f7;
  --muted: #9aa4b2;
  --accent: #e41e26;
  --accent-strong: #ff3842;
  --danger: #ff5a66;
  --shadow: 0 10px 26px rgb(0 0 0 / 24%);

  --surface-raised: #111925;
  --surface-subtle: #0a0f16;
  --surface-selected: #251418;
  --text-soft: #7f8b9c;
  --focus-ring: rgb(228 30 38 / 24%);
}

:root[data-theme="aurora"] {
  color-scheme: dark;
  --theme-name: "Aurora";
  --color-red: #61b8ff;
  --color-red-hover: #8bcaff;
  --color-red-light: rgb(97 184 255 / 13%);
  --color-red-glow: rgb(97 184 255 / 24%);
  --color-grey: #a4b3c4;
  --color-grey-dark: #eff7ff;
  --color-grey-light: #111b27;
  --color-grey-mid: #708297;
  --color-bg-main: #07101a;
  --color-bg-card: #0c1723;
  --color-border: #1b2b3d;
  --color-success: #65ddb7;
  --color-info: #74c9ff;
  --color-warning: #f5c76d;
  --color-danger: #ff7180;
  --logicalis-red: #61b8ff;
  --logicalis-teal: #70e1de;

  --bg: #07101a;
  --panel: #0c1723;
  --line: #1b2b3d;
  --text: #eff7ff;
  --muted: #a4b3c4;
  --accent: #61b8ff;
  --accent-strong: #8bcaff;
  --danger: #ff7180;
  --shadow: 0 10px 30px rgb(0 0 0 / 28%);

  --surface-raised: #111f2e;
  --surface-subtle: #09131e;
  --surface-selected: #10283d;
  --text-soft: #7e91a7;
  --focus-ring: rgb(97 184 255 / 27%);
}

:root[data-theme="terminal"] {
  color-scheme: dark;
  --theme-name: "Terminal";
  --color-red: #77d69b;
  --color-red-hover: #9ae5b6;
  --color-red-light: rgb(119 214 155 / 12%);
  --color-red-glow: rgb(119 214 155 / 20%);
  --color-grey: #a6b1aa;
  --color-grey-dark: #eef5f0;
  --color-grey-light: #151b17;
  --color-grey-mid: #748078;
  --color-bg-main: #090d0a;
  --color-bg-card: #0f1511;
  --color-border: #223027;
  --color-success: #77d69b;
  --color-info: #9dc4af;
  --color-warning: #d6bd77;
  --color-danger: #e87979;
  --logicalis-red: #77d69b;
  --logicalis-teal: #8fd6aa;

  --bg: #090d0a;
  --panel: #0f1511;
  --line: #223027;
  --text: #eef5f0;
  --muted: #a6b1aa;
  --accent: #77d69b;
  --accent-strong: #9ae5b6;
  --danger: #e87979;
  --shadow: 0 10px 26px rgb(0 0 0 / 26%);

  --surface-raised: #151d18;
  --surface-subtle: #0b100d;
  --surface-selected: #16271c;
  --text-soft: #7d8981;
  --focus-ring: rgb(119 214 155 / 24%);
}

:root[data-theme="graphite"] {
  color-scheme: dark;
  --theme-name: "Graphite";
  --color-red: #aab2bd;
  --color-red-hover: #c3cad3;
  --color-red-light: rgb(170 178 189 / 12%);
  --color-red-glow: rgb(170 178 189 / 18%);
  --color-grey: #a7adb6;
  --color-grey-dark: #f0f3f6;
  --color-grey-light: #181b1f;
  --color-grey-mid: #7b838d;
  --color-bg-main: #101214;
  --color-bg-card: #181b1f;
  --color-border: #2a2f36;
  --color-success: #9bc7ad;
  --color-info: #a8bfd6;
  --color-warning: #d5bd82;
  --color-danger: #e28b91;
  --logicalis-red: #aab2bd;
  --logicalis-teal: #a8bfd6;

  --bg: #101214;
  --panel: #181b1f;
  --line: #2a2f36;
  --text: #f0f3f6;
  --muted: #a7adb6;
  --accent: #aab2bd;
  --accent-strong: #c3cad3;
  --danger: #e28b91;
  --shadow: 0 10px 26px rgb(0 0 0 / 24%);

  --surface-raised: #1e2227;
  --surface-subtle: #121518;
  --surface-selected: #25282d;
  --text-soft: #858d98;
  --focus-ring: rgb(170 178 189 / 22%);
}

:root[data-theme="berry"] {
  color-scheme: dark;
  --theme-name: "Berry";
  --color-red: #e879f9;
  --color-red-hover: #f0abfc;
  --color-red-light: rgb(232 121 249 / 13%);
  --color-red-glow: rgb(232 121 249 / 22%);
  --color-grey: #b9a8c2;
  --color-grey-dark: #fbf4ff;
  --color-grey-light: #1d1022;
  --color-grey-mid: #8d7799;
  --color-bg-main: #120914;
  --color-bg-card: #1d1022;
  --color-border: #33213b;
  --color-success: #7dd3c7;
  --color-info: #c4b5fd;
  --color-warning: #f4c97a;
  --color-danger: #fb7185;
  --logicalis-red: #e879f9;
  --logicalis-teal: #7dd3c7;

  --bg: #120914;
  --panel: #1d1022;
  --line: #33213b;
  --text: #fbf4ff;
  --muted: #b9a8c2;
  --accent: #e879f9;
  --accent-strong: #f0abfc;
  --danger: #fb7185;
  --shadow: 0 10px 30px rgb(0 0 0 / 30%);

  --surface-raised: #27152e;
  --surface-subtle: #160b19;
  --surface-selected: #32193a;
  --text-soft: #90799d;
  --focus-ring: rgb(232 121 249 / 25%);
}

:root[data-theme="logicalis-light"] {
  color-scheme: light;
  --theme-name: "Logicalis Light";
  --color-red: #d71920;
  --color-red-hover: #b9141b;
  --color-red-light: rgb(228 30 38 / 9%);
  --color-red-glow: rgb(228 30 38 / 16%);
  --color-grey: #5f6875;
  --color-grey-dark: #1f252d;
  --color-grey-light: #eef1f5;
  --color-grey-mid: #7b8491;
  --color-bg-main: #f6f7f9;
  --color-bg-card: #ffffff;
  --color-border: #dfe4ea;
  --color-success: #0f8f76;
  --color-info: #167da0;
  --color-warning: #a46b00;
  --color-danger: #c72532;
  --logicalis-red: #d71920;
  --logicalis-teal: #008f92;

  --bg: #f6f7f9;
  --panel: #ffffff;
  --line: #dfe4ea;
  --text: #1f252d;
  --muted: #5f6875;
  --accent: #d71920;
  --accent-strong: #b9141b;
  --danger: #c72532;
  --shadow: 0 10px 24px rgb(17 24 39 / 10%);

  --surface-raised: #ffffff;
  --surface-subtle: #eef1f5;
  --surface-selected: #fff0f1;
  --text-soft: #7b8491;
  --focus-ring: rgb(215 25 32 / 20%);
}

/* Legacy bridge: these selectors still used concrete operations-theme colors. */
:root[data-theme="aurora"] header,
:root[data-theme="aurora"] .ribbon,
:root[data-theme="terminal"] header,
:root[data-theme="terminal"] .ribbon,
:root[data-theme="graphite"] header,
:root[data-theme="graphite"] .ribbon,
:root[data-theme="berry"] header,
:root[data-theme="berry"] .ribbon,
:root[data-theme="logicalis-light"] header,
:root[data-theme="logicalis-light"] .ribbon {
  background: var(--surface-subtle);
  border-color: var(--line);
}

:root[data-theme="aurora"] main,
:root[data-theme="terminal"] main,
:root[data-theme="graphite"] main,
:root[data-theme="berry"] main,
:root[data-theme="logicalis-light"] main {
  background: var(--bg);
}

:root[data-theme="aurora"] header h1::before,
:root[data-theme="terminal"] header h1::before,
:root[data-theme="graphite"] header h1::before,
:root[data-theme="berry"] header h1::before,
:root[data-theme="logicalis-light"] header h1::before {
  background:
    linear-gradient(135deg, transparent 0 34%, var(--bg) 34% 47%, transparent 47%),
    var(--accent);
  box-shadow: 0 0 0 1px var(--focus-ring), 0 0 18px var(--focus-ring);
}