:root {
  --radius-xs: 0.35rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.14);
  --shadow-md: 0 10px 24px rgb(0 0 0 / 0.24);
}

html[data-theme="midnight"][data-mode="dark"] {
  --chrome-bg: #0b121d;
  --chrome-surface: #111c2d;
  --chrome-border: #2d405d;
  --chrome-text: #e8f1ff;
  --chrome-muted: #b9c8e2;
  --canvas-bg: #0f1826;
  --surface: #162235;
  --surface-alt: #1a2a41;
  --text: #eaf2ff;
  --muted: #a6b8d5;
  --border: #2e425f;
  --primary: #58b4ff;
  --accent: #58b4ff;
  --success: #39ca9a;
  --warning: #ffbe55;
  --danger: #ff7f93;
  --bg-grain: radial-gradient(circle at 15% 20%, rgb(88 180 255 / 0.05) 0, transparent 42%),
    radial-gradient(circle at 85% 10%, rgb(255 190 85 / 0.04) 0, transparent 40%),
    repeating-linear-gradient(0deg, rgb(255 255 255 / 0.016) 0 1px, transparent 1px 3px);
  --overlay-bg: rgb(0 0 0 / 0.58);
}

html[data-theme="midnight"][data-mode="light"] {
  --chrome-bg: #0d1626;
  --chrome-surface: #152238;
  --chrome-border: #324a6a;
  --chrome-text: #edf4ff;
  --chrome-muted: #c3d2eb;
  --canvas-bg: #e9eff8;
  --surface: #f7faff;
  --surface-alt: #eef4fd;
  --text: #162238;
  --muted: #50617f;
  --border: #c8d6ea;
  --primary: #165fb5;
  --accent: #165fb5;
  --success: #177c5a;
  --warning: #9c6700;
  --danger: #bb2547;
  --bg-grain: radial-gradient(circle at 15% 18%, rgb(22 95 181 / 0.08) 0, transparent 40%),
    radial-gradient(circle at 84% 12%, rgb(156 103 0 / 0.06) 0, transparent 36%),
    repeating-linear-gradient(0deg, rgb(255 255 255 / 0.46) 0 1px, transparent 1px 3px);
  --overlay-bg: rgb(5 10 25 / 0.35);
}

html[data-theme="graphite"][data-mode="dark"] {
  --chrome-bg: #11141a;
  --chrome-surface: #1a1f28;
  --chrome-border: #353d4d;
  --chrome-text: #eef2fa;
  --chrome-muted: #c0c7d7;
  --canvas-bg: #12161f;
  --surface: #1a202c;
  --surface-alt: #212938;
  --text: #edf1f8;
  --muted: #afb7ca;
  --border: #374154;
  --primary: #7f9dff;
  --accent: #7f9dff;
  --success: #4ac49d;
  --warning: #efc45f;
  --danger: #ff8a9f;
  --bg-grain: radial-gradient(circle at 18% 22%, rgb(127 157 255 / 0.06) 0, transparent 38%),
    repeating-linear-gradient(0deg, rgb(255 255 255 / 0.012) 0 1px, transparent 1px 3px);
  --overlay-bg: rgb(0 0 0 / 0.58);
}

html[data-theme="graphite"][data-mode="light"] {
  --chrome-bg: #181c25;
  --chrome-surface: #212838;
  --chrome-border: #3b465d;
  --chrome-text: #f0f4fd;
  --chrome-muted: #c4ccdd;
  --canvas-bg: #edf0f6;
  --surface: #ffffff;
  --surface-alt: #f3f6fb;
  --text: #1a2233;
  --muted: #5a677f;
  --border: #d0d9e6;
  --primary: #425fb6;
  --accent: #425fb6;
  --success: #20785f;
  --warning: #8e6200;
  --danger: #b7324f;
  --bg-grain: radial-gradient(circle at 16% 24%, rgb(66 95 182 / 0.07) 0, transparent 38%),
    repeating-linear-gradient(0deg, rgb(255 255 255 / 0.4) 0 1px, transparent 1px 3px);
  --overlay-bg: rgb(5 10 25 / 0.35);
}

html[data-theme="plum"][data-mode="dark"] {
  --chrome-bg: #181222;
  --chrome-surface: #231b30;
  --chrome-border: #43355a;
  --chrome-text: #f8ecff;
  --chrome-muted: #d2c0e8;
  --canvas-bg: #191326;
  --surface: #251d33;
  --surface-alt: #2d2340;
  --text: #f6ecff;
  --muted: #c7b4dd;
  --border: #45365d;
  --primary: #c191ff;
  --accent: #c191ff;
  --success: #61d1b1;
  --warning: #f7bf68;
  --danger: #ff93ba;
  --bg-grain: radial-gradient(circle at 16% 20%, rgb(193 145 255 / 0.08) 0, transparent 40%),
    repeating-linear-gradient(0deg, rgb(255 255 255 / 0.012) 0 1px, transparent 1px 3px);
  --overlay-bg: rgb(0 0 0 / 0.58);
}

html[data-theme="plum"][data-mode="light"] {
  --chrome-bg: #24192f;
  --chrome-surface: #2f2240;
  --chrome-border: #533f6d;
  --chrome-text: #f7ecff;
  --chrome-muted: #d6c3ea;
  --canvas-bg: #f4ecfa;
  --surface: #fff9ff;
  --surface-alt: #f9efff;
  --text: #2a1e3a;
  --muted: #6d5a84;
  --border: #decde9;
  --primary: #7d42bd;
  --accent: #7d42bd;
  --success: #1f8167;
  --warning: #9a6704;
  --danger: #b43866;
  --bg-grain: radial-gradient(circle at 16% 21%, rgb(125 66 189 / 0.08) 0, transparent 38%),
    repeating-linear-gradient(0deg, rgb(255 255 255 / 0.45) 0 1px, transparent 1px 3px);
  --overlay-bg: rgb(5 10 25 / 0.35);
}

html:not([data-theme]) {
  --chrome-bg: #0b121d;
  --chrome-surface: #111c2d;
  --chrome-border: #2d405d;
  --chrome-text: #e8f1ff;
  --chrome-muted: #b9c8e2;
  --canvas-bg: #0f1826;
  --surface: #162235;
  --surface-alt: #1a2a41;
  --text: #eaf2ff;
  --muted: #a6b8d5;
  --border: #2e425f;
  --primary: #58b4ff;
  --accent: #58b4ff;
  --success: #39ca9a;
  --warning: #ffbe55;
  --danger: #ff7f93;
  --bg-grain: radial-gradient(circle at 15% 20%, rgb(88 180 255 / 0.05) 0, transparent 42%),
    radial-gradient(circle at 85% 10%, rgb(255 190 85 / 0.04) 0, transparent 40%),
    repeating-linear-gradient(0deg, rgb(255 255 255 / 0.016) 0 1px, transparent 1px 3px);
  --overlay-bg: rgb(0 0 0 / 0.58);
}

html {
  --bg: var(--canvas-bg);
  --panel: var(--surface);
  --panel-alt: var(--surface-alt);
}

html,
body {
  background-color: var(--canvas-bg);
  color: var(--text);
}

body {
  background-image: var(--bg-grain);
}