/* Design tokens: every color, radius and font as CSS custom properties.
   :root                              -> base variant (Violet & Mist), light
   :root[data-theme="dark"]           -> base variant, dark
   :root[data-variant="<id>"]         -> other variants, light
   :root[data-variant="<id>"][data-theme="dark"] -> other variants, dark
   Load this file before styles.css. Never hardcode colors outside this file. */

:root {
  color-scheme: light;
  --bg-0: #f7f6f9;
  --bg-1: #ffffff;
  --bg-2: #f2f0f5;
  --bg-3: #ebe8f0;
  --bg-hover: #f0edf6;
  --border: #e3dfe9;
  --border-strong: #c9c3d5;
  --border-control: #877d95;
  --fg-0: #292338;
  --fg-1: #595365;
  --fg-2: #655d70;
  --fg-3: #6b6278;
  --accent: #5436a4;
  --accent-weak: #eee8fa;
  --danger: #b9324a;
  --danger-weak: #fff0f2;
  --warn: #8f5b14;
  --ok: #267652;
  --chrome: #292040;
  --chrome-border: #463959;
  --chrome-focus: #b5a0e7;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
  --primary: #5436a4;
  --primary-hover: #43288a;
  --sidebar-bg: #f1eff5;
  --table-header-bg: #eeebf2;
  --row-hover: #faf8ff;
  --quiet-surface: #ffffff80;
  --focus-ring: #5436a412;
  --checker-bg: #fff;
  --checker-cell: #ddd;
  --type-color-bg: #eee8fa;
  --type-color-fg: #6c469f;
  --type-color-border: #e1d4f5;
  --type-string-bg: #faf0e1;
  --type-string-fg: #94611c;
  --type-string-border: #f0dfc4;
  --type-dimension-bg: #e8f4ed;
  --type-dimension-fg: #287853;
  --type-dimension-border: #cfe8d9;
  --type-shadow-bg: #eceef6;
  --type-shadow-fg: #5a668c;
  --type-shadow-border: #dce0ed;
  --type-border-bg: #f9eaf0;
  --type-border-fg: #a24570;
  --type-border-border: #f0d6e2;
  --type-gradient-bg: #e8f2fa;
  --type-gradient-fg: #286e9e;
  --type-gradient-border: #d4e7f5;
  --type-motion-bg: #eff4e7;
  --type-motion-fg: #4a722c;
  --type-motion-border: #dfe9ce;
  /* chrome (top bar) surfaces and text */
  --chrome-surface: #3a3051;
  --chrome-surface-border: #584b6e;
  --chrome-input-fg: #c6bdd8;
  --chrome-placeholder: #b9afcb;
  --on-chrome: #d5cbe5;
  --on-chrome-focus-ring: #a58bc326;
  /* text/icons on the primary (active row) background */
  --on-primary-muted: #e0d6f2;
  /* shared by every variant (defined once, here) */
  --on-solid: #ffffff; /* text/icons on --primary and --chrome fills */
  --on-primary-hover-bg: #ffffff26;
  --on-primary-hover-border: #ffffff4d;
  --chrome-ok: #a7d5ba; /* status icons on the dark top bar */
  --chrome-danger: #ff9aac;
  --folder-icon: #88759e;
  --file-icon: #90859f;
  /* tinted shadows and overlays */
  --shadow-xs: #29204012;
  --shadow-md: #29204024;
  --shadow-tooltip: #29204026;
  --shadow-lg: #21183233;
  --backdrop: #21183266;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-0: #19161f;
  --bg-1: #231f2b;
  --bg-2: #2a2534;
  --bg-3: #342d40;
  --bg-hover: #383044;
  --border: #3a3345;
  --border-strong: #51465f;
  --border-control: #8c7c96;
  --fg-0: #eee9f5;
  --fg-1: #c8bfd6;
  --fg-2: #afa3bf;
  --fg-3: #a497b5;
  --accent: #c0a2f3;
  --accent-weak: #382c50;
  --primary: #7250b7;
  --primary-hover: #805dc5;
  --danger: #ff91a6;
  --danger-weak: #442631;
  --warn: #edc38c;
  --ok: #9ed5b7;
  --chrome: #211a32;
  --chrome-border: #40344f;
  --sidebar-bg: #201b2a;
  --table-header-bg: #2c2539;
  --row-hover: #2b2537;
  --quiet-surface: #231f2b80;
  --focus-ring: #c0a2f326;
  --checker-bg: #28232f;
  --checker-cell: #51465f;
  --type-color-bg: #382d4c;
  --type-color-fg: #cbb3f4;
  --type-color-border: #51406a;
  --type-string-bg: #3d3125;
  --type-string-fg: #edc38c;
  --type-string-border: #5c4933;
  --type-dimension-bg: #233b31;
  --type-dimension-fg: #9ed5b7;
  --type-dimension-border: #365648;
  --type-shadow-bg: #2c3043;
  --type-shadow-fg: #bcc5e9;
  --type-shadow-border: #454b64;
  --type-border-bg: #402a37;
  --type-border-fg: #e7a8c4;
  --type-border-border: #604152;
  --type-gradient-bg: #243647;
  --type-gradient-fg: #a0ccef;
  --type-gradient-border: #38536a;
  --type-motion-bg: #303b26;
  --type-motion-fg: #bddb9c;
  --type-motion-border: #48553a;
  --chrome-surface: #3a3051;
  --chrome-surface-border: #584b6e;
  --on-chrome: #d5cbe5;
  --on-primary-muted: #f3eefc;
  --shadow-xs: #00000020;
  --shadow-md: #00000066;
  --shadow-tooltip: #00000066;
  --shadow-lg: #00000080;
  --backdrop: #000000aa;
}

/* ===== VARIANTS =====
   Each variant overrides the tokens above. "violet-mist" is the base (:root) palette.
   To add one: copy a block pair below, rename the data-variant, change values,
   and register it in the VARIANTS list in the script at the end of the file. */

/* Sand & Clay: warm paper surfaces, espresso chrome, terracotta accent
   (light values from dacosta.lu [data-theme=sand-clay]) */
:root[data-variant="sand-clay"] {
  --bg-0: #faf7f3;
  --bg-1: #ffffff;
  --bg-2: #f5f0ea;
  --bg-3: #ebe3d9;
  --bg-hover: #f3ece4;
  --border: #ebe3d9;
  --border-strong: #d8cdbf;
  --border-control: #8c8074;
  --fg-0: #2b2622;
  --fg-1: #574f47;
  --fg-2: #6a6259;
  --fg-3: #675f56;
  --accent: #a34e33;
  --accent-weak: #f8ece6;
  --danger: #b3243c;
  --danger-weak: #fdeeee;
  --warn: #8a5a12;
  --ok: #2f6f4a;
  --chrome: #2b2118;
  --chrome-border: #4a3c30;
  --chrome-focus: #e0a88f;
  --primary: #a34e33;
  --primary-hover: #843e28;
  --sidebar-bg: #f6f1ea;
  --table-header-bg: #f3ede5;
  --row-hover: #fcf9f5;
  --focus-ring: #a34e3320;
  --checker-cell: #ddd5ca;
  --type-color-bg: #f8ece6;
  --type-color-fg: #a34e33;
  --type-color-border: #efd5c9;
  --type-string-bg: #faf0dc;
  --type-string-fg: #8a5a12;
  --type-string-border: #efdcb8;
  --type-dimension-bg: #eaf2e6;
  --type-dimension-fg: #3f6b3a;
  --type-dimension-border: #d3e5cb;
  --type-shadow-bg: #efece8;
  --type-shadow-fg: #6a6258;
  --type-shadow-border: #e0dbd3;
  --type-border-bg: #f9eaee;
  --type-border-fg: #a23a58;
  --type-border-border: #f0d3db;
  --type-gradient-bg: #e8f0f4;
  --type-gradient-fg: #3a6a86;
  --type-gradient-border: #d2e2ea;
  --type-motion-bg: #f0f1de;
  --type-motion-fg: #66691f;
  --type-motion-border: #e0e2c0;
  --chrome-surface: #3c3025;
  --chrome-surface-border: #5c4a3b;
  --chrome-input-fg: #d6c7b8;
  --chrome-placeholder: #bfae9d;
  --on-chrome: #e6d8ca;
  --on-chrome-focus-ring: #e0a88f26;
  --on-primary-muted: #fdeee7;
  --folder-icon: #8a7058;
  --file-icon: #86735f;
  --shadow-xs: #2b221812;
  --shadow-md: #2b221824;
  --shadow-tooltip: #2b221826;
  --shadow-lg: #2b221833;
  --backdrop: #2b221866;
}

:root[data-variant="sand-clay"][data-theme="dark"] {
  --bg-0: #1a1613;
  --bg-1: #231e1a;
  --bg-2: #2b2520;
  --bg-3: #352e28;
  --bg-hover: #3b332c;
  --border: #3d352d;
  --border-strong: #55493e;
  --border-control: #8f8173;
  --fg-0: #f1ebe4;
  --fg-1: #d0c6bb;
  --fg-2: #b3a79a;
  --fg-3: #a79b8e;
  --accent: #e49a7e;
  --accent-weak: #43291f;
  --primary: #a84e33;
  --primary-hover: #964229;
  --danger: #ff9a9e;
  --danger-weak: #45262a;
  --warn: #edc38c;
  --ok: #a6d6b0;
  --chrome: #221a14;
  --chrome-border: #43362b;
  --sidebar-bg: #1f1a16;
  --table-header-bg: #2d2621;
  --row-hover: #2c2520;
  --quiet-surface: #231e1a80;
  --focus-ring: #e49a7e26;
  --checker-bg: #28221d;
  --checker-cell: #55493e;
  --type-color-bg: #43291f;
  --type-color-fg: #f0b9a3;
  --type-color-border: #66402f;
  --type-string-bg: #3d3123;
  --type-string-fg: #edc38c;
  --type-string-border: #5c4933;
  --type-dimension-bg: #28382a;
  --type-dimension-fg: #a9d3a3;
  --type-dimension-border: #3d5640;
  --type-shadow-bg: #302c27;
  --type-shadow-fg: #cfc5b8;
  --type-shadow-border: #4b443b;
  --type-border-bg: #43262f;
  --type-border-fg: #eba6b8;
  --type-border-border: #61404a;
  --type-gradient-bg: #253540;
  --type-gradient-fg: #a0c8de;
  --type-gradient-border: #3a5262;
  --type-motion-bg: #35371f;
  --type-motion-fg: #cfd18c;
  --type-motion-border: #4e5133;
  --chrome-surface: #3c3025;
  --chrome-surface-border: #5c4a3b;
  --on-chrome: #e6d8ca;
  --on-primary-muted: #fff1ea;
  --shadow-xs: #00000020;
  --shadow-md: #00000066;
  --shadow-tooltip: #00000066;
  --shadow-lg: #00000080;
  --backdrop: #000000aa;
}

/* Moss & Fern: soft sage surfaces, deep forest chrome, fern-green accent */
:root[data-variant="moss-fern"] {
  --bg-0: #f5f8f3;
  --bg-1: #ffffff;
  --bg-2: #eef3ea;
  --bg-3: #e2eadc;
  --bg-hover: #e8efe3;
  --border: #dfe7d9;
  --border-strong: #c6d3bd;
  --border-control: #72846f;
  --fg-0: #1f2a21;
  --fg-1: #435446;
  --fg-2: #536456;
  --fg-3: #566759;
  --accent: #2f6b45;
  --accent-weak: #e3f1e6;
  --danger: #b02a37;
  --danger-weak: #fdeeed;
  --warn: #85580e;
  --ok: #28694f;
  --chrome: #1c2b21;
  --chrome-border: #34493a;
  --chrome-focus: #a9d6b4;
  --primary: #2f6b45;
  --primary-hover: #24573a;
  --sidebar-bg: #edf2e9;
  --table-header-bg: #e9f0e4;
  --row-hover: #f9fbf7;
  --focus-ring: #2f6b4520;
  --checker-cell: #d5ddcf;
  --type-color-bg: #e3f1e6;
  --type-color-fg: #2f6b45;
  --type-color-border: #c9e2cf;
  --type-string-bg: #f8f0d9;
  --type-string-fg: #7f5a0f;
  --type-string-border: #ecdfb4;
  --type-dimension-bg: #e0f1ef;
  --type-dimension-fg: #1f6b66;
  --type-dimension-border: #c2e2de;
  --type-shadow-bg: #ecefe9;
  --type-shadow-fg: #566055;
  --type-shadow-border: #d9dfd5;
  --type-border-bg: #f7e9ef;
  --type-border-fg: #9c3a5c;
  --type-border-border: #eed2dd;
  --type-gradient-bg: #e5eff6;
  --type-gradient-fg: #2f6585;
  --type-gradient-border: #cfe1ed;
  --type-motion-bg: #f1ece2;
  --type-motion-fg: #6b5230;
  --type-motion-border: #e1d8c6;
  --chrome-surface: #2a3d2f;
  --chrome-surface-border: #46614d;
  --chrome-input-fg: #c5dcca;
  --chrome-placeholder: #aac4b0;
  --on-chrome: #d2e4d6;
  --on-chrome-focus-ring: #a9d6b426;
  --on-primary-muted: #e6f4e9;
  --folder-icon: #5f7a60;
  --file-icon: #5c775d;
  --shadow-xs: #1c2b2112;
  --shadow-md: #1c2b2124;
  --shadow-tooltip: #1c2b2126;
  --shadow-lg: #1c2b2133;
  --backdrop: #1c2b2166;
}

:root[data-variant="moss-fern"][data-theme="dark"] {
  --bg-0: #121a14;
  --bg-1: #1a241d;
  --bg-2: #212d25;
  --bg-3: #2a382f;
  --bg-hover: #304036;
  --border: #2f3d33;
  --border-strong: #475a4c;
  --border-control: #809680;
  --fg-0: #e9f1ea;
  --fg-1: #c3d2c6;
  --fg-2: #a8baab;
  --fg-3: #9bad9e;
  --accent: #86c99b;
  --accent-weak: #1f3a2a;
  --primary: #2f7a4c;
  --primary-hover: #276a41;
  --danger: #ff9a98;
  --danger-weak: #3f2426;
  --warn: #edc38c;
  --ok: #9ed5b7;
  --chrome: #0f1913;
  --chrome-border: #263a2d;
  --sidebar-bg: #151f18;
  --table-header-bg: #202b23;
  --row-hover: #212d25;
  --quiet-surface: #1a241d80;
  --focus-ring: #86c99b26;
  --checker-bg: #1f2923;
  --checker-cell: #475a4c;
  --type-color-bg: #1f3a2a;
  --type-color-fg: #a6dcb7;
  --type-color-border: #35573f;
  --type-string-bg: #3a3220;
  --type-string-fg: #edc38c;
  --type-string-border: #584a2e;
  --type-dimension-bg: #1f3a38;
  --type-dimension-fg: #9fd8d2;
  --type-dimension-border: #34585a;
  --type-shadow-bg: #2a312b;
  --type-shadow-fg: #c4d0c5;
  --type-shadow-border: #445046;
  --type-border-bg: #3e2631;
  --type-border-fg: #eba6bf;
  --type-border-border: #5d3f4c;
  --type-gradient-bg: #243645;
  --type-gradient-fg: #a0c8de;
  --type-gradient-border: #3a5262;
  --type-motion-bg: #352f22;
  --type-motion-fg: #dcc59c;
  --type-motion-border: #54492f;
  --chrome-surface: #2a3d2f;
  --chrome-surface-border: #46614d;
  --on-chrome: #d2e4d6;
  --on-primary-muted: #eefaf0;
  --shadow-xs: #00000020;
  --shadow-md: #00000066;
  --shadow-tooltip: #00000066;
  --shadow-lg: #00000080;
  --backdrop: #000000aa;
}

/* Mono & Signal: neutral grays with a single orange signal color */
:root[data-variant="mono-signal"] {
  --bg-0: #f6f6f6;
  --bg-1: #ffffff;
  --bg-2: #efefef;
  --bg-3: #e4e4e4;
  --bg-hover: #ebebeb;
  --border: #e2e2e2;
  --border-strong: #c9c9c9;
  --border-control: #737373;
  --fg-0: #141414;
  --fg-1: #444444;
  --fg-2: #555555;
  --fg-3: #5c5c5c;
  --accent: #c2410c;
  --accent-weak: #fdeee6;
  --primary: #c2410c;
  --primary-hover: #9a3412;
  --danger: #b4132a;
  --danger-weak: #fdecee;
  --warn: #85580e;
  --ok: #2a6a47;
  --chrome: #111111;
  --chrome-border: #2e2e2e;
  --chrome-focus: #ffa36b;
  --sidebar-bg: #efefef;
  --table-header-bg: #ececec;
  --row-hover: #fafafa;
  --focus-ring: #c2410c20;
  --checker-cell: #dcdcdc;
  --type-color-bg: #fdeee6;
  --type-color-fg: #c2410c;
  --type-color-border: #f6d3c2;
  --type-string-bg: #faf0dc;
  --type-string-fg: #7f5a0f;
  --type-string-border: #efdcb8;
  --type-dimension-bg: #e6f2e8;
  --type-dimension-fg: #2f6b45;
  --type-dimension-border: #cfe5d4;
  --type-shadow-bg: #eeeeee;
  --type-shadow-fg: #555555;
  --type-shadow-border: #dcdcdc;
  --type-border-bg: #f9eaee;
  --type-border-fg: #a23a58;
  --type-border-border: #f0d3db;
  --type-gradient-bg: #e8f0f6;
  --type-gradient-fg: #2f6585;
  --type-gradient-border: #d2e2ea;
  --type-motion-bg: #f0f1de;
  --type-motion-fg: #66691f;
  --type-motion-border: #e0e2c0;
  --chrome-surface: #262626;
  --chrome-surface-border: #474747;
  --chrome-input-fg: #cfcfcf;
  --chrome-placeholder: #b0b0b0;
  --on-chrome: #d6d6d6;
  --on-chrome-focus-ring: #ffa36b26;
  --on-primary-muted: #ffeee4;
  --folder-icon: #6b6b6b;
  --file-icon: #6b6b6b;
  --shadow-xs: #11111112;
  --shadow-md: #11111124;
  --shadow-tooltip: #11111126;
  --shadow-lg: #11111133;
  --backdrop: #11111166;
}

:root[data-variant="mono-signal"][data-theme="dark"] {
  --bg-0: #0e0e0e;
  --bg-1: #171717;
  --bg-2: #1f1f1f;
  --bg-3: #292929;
  --bg-hover: #303030;
  --border: #2c2c2c;
  --border-strong: #444444;
  --border-control: #8a8a8a;
  --fg-0: #f2f2f2;
  --fg-1: #cfcfcf;
  --fg-2: #b0b0b0;
  --fg-3: #a3a3a3;
  --accent: #ff9a62;
  --accent-weak: #3a2216;
  --primary: #c2410c;
  --primary-hover: #a8380a;
  --danger: #ff8a95;
  --danger-weak: #3d2024;
  --warn: #edc38c;
  --ok: #9ed5b7;
  --chrome: #080808;
  --chrome-border: #262626;
  --chrome-focus: #ffa36b;
  --sidebar-bg: #121212;
  --table-header-bg: #1f1f1f;
  --row-hover: #1f1f1f;
  --focus-ring: #ff9a6226;
  --checker-cell: #444444;
  --quiet-surface: #17171780;
  --checker-bg: #222222;
  --type-color-bg: #3a2216;
  --type-color-fg: #ffb48a;
  --type-color-border: #5c3822;
  --type-string-bg: #3d3123;
  --type-string-fg: #edc38c;
  --type-string-border: #5c4933;
  --type-dimension-bg: #243a2c;
  --type-dimension-fg: #a6d6b0;
  --type-dimension-border: #3b5a45;
  --type-shadow-bg: #2c2c2c;
  --type-shadow-fg: #c8c8c8;
  --type-shadow-border: #454545;
  --type-border-bg: #43262f;
  --type-border-fg: #eba6b8;
  --type-border-border: #61404a;
  --type-gradient-bg: #253540;
  --type-gradient-fg: #a0c8de;
  --type-gradient-border: #3a5262;
  --type-motion-bg: #35371f;
  --type-motion-fg: #cfd18c;
  --type-motion-border: #4e5133;
  --chrome-surface: #262626;
  --chrome-surface-border: #474747;
  --chrome-input-fg: #cfcfcf;
  --chrome-placeholder: #b0b0b0;
  --on-chrome: #d6d6d6;
  --on-chrome-focus-ring: #ffa36b26;
  --on-primary-muted: #ffeee4;
  --folder-icon: #8a8a8a;
  --file-icon: #8a8a8a;
  --shadow-xs: #00000020;
  --shadow-md: #00000066;
  --shadow-tooltip: #00000066;
  --shadow-lg: #00000080;
  --backdrop: #000000aa;
}

/* Midnight & Gold: deep navy chrome, ivory surfaces, gold highlights */
:root[data-variant="midnight-gold"] {
  --bg-0: #f8f6f0;
  --bg-1: #ffffff;
  --bg-2: #f1eee5;
  --bg-3: #e7e2d4;
  --bg-hover: #ede9dc;
  --border: #e6e1d3;
  --border-strong: #d1c9b4;
  --border-control: #7d755f;
  --fg-0: #1a2233;
  --fg-1: #454f66;
  --fg-2: #566079;
  --fg-3: #5a647c;
  --accent: #8a6410;
  --accent-weak: #f6ecd0;
  --primary: #1f2d52;
  --primary-hover: #16213f;
  --danger: #b3243c;
  --danger-weak: #fdeeee;
  --warn: #85580e;
  --ok: #2a6a47;
  --chrome: #0f1830;
  --chrome-border: #26335a;
  --chrome-focus: #e6c36a;
  --sidebar-bg: #f1eee5;
  --table-header-bg: #ece8dc;
  --row-hover: #fcfbf7;
  --focus-ring: #8a641020;
  --checker-cell: #ddd8c8;
  --type-color-bg: #f6ecd0;
  --type-color-fg: #8a6410;
  --type-color-border: #ead9a6;
  --type-string-bg: #faf0dc;
  --type-string-fg: #7f5a0f;
  --type-string-border: #efdcb8;
  --type-dimension-bg: #e6f2e8;
  --type-dimension-fg: #2f6b45;
  --type-dimension-border: #cfe5d4;
  --type-shadow-bg: #ecebe6;
  --type-shadow-fg: #5a5a52;
  --type-shadow-border: #dad8cf;
  --type-border-bg: #f9eaee;
  --type-border-fg: #a23a58;
  --type-border-border: #f0d3db;
  --type-gradient-bg: #e8f0f6;
  --type-gradient-fg: #2f6585;
  --type-gradient-border: #d2e2ea;
  --type-motion-bg: #f0f1de;
  --type-motion-fg: #66691f;
  --type-motion-border: #e0e2c0;
  --chrome-surface: #1d2a4d;
  --chrome-surface-border: #3a4a78;
  --chrome-input-fg: #c8d0e6;
  --chrome-placeholder: #aab4d0;
  --on-chrome: #d5dcee;
  --on-chrome-focus-ring: #e6c36a26;
  --on-primary-muted: #e3e8f6;
  --folder-icon: #66708f;
  --file-icon: #66708f;
  --shadow-xs: #0f183012;
  --shadow-md: #0f183024;
  --shadow-tooltip: #0f183026;
  --shadow-lg: #0f183033;
  --backdrop: #0f183066;
}

:root[data-variant="midnight-gold"][data-theme="dark"] {
  --bg-0: #0b1020;
  --bg-1: #131a2e;
  --bg-2: #1a2340;
  --bg-3: #232e52;
  --bg-hover: #2a3660;
  --border: #26304f;
  --border-strong: #3d4a75;
  --border-control: #8592b8;
  --fg-0: #eef1f8;
  --fg-1: #c5ccdf;
  --fg-2: #a9b2cb;
  --fg-3: #9ba5c0;
  --accent: #e6c36a;
  --accent-weak: #3a3115;
  --primary: #31478f;
  --primary-hover: #3b54a8;
  --danger: #ff9aa8;
  --danger-weak: #44222b;
  --warn: #edc38c;
  --ok: #9ed5b7;
  --chrome: #070b18;
  --chrome-border: #1c2646;
  --chrome-focus: #e6c36a;
  --sidebar-bg: #0f1528;
  --table-header-bg: #1a2340;
  --row-hover: #1a2340;
  --focus-ring: #e6c36a26;
  --checker-cell: #3d4a75;
  --quiet-surface: #131a2e80;
  --checker-bg: #1a2038;
  --type-color-bg: #3a3115;
  --type-color-fg: #f0d68a;
  --type-color-border: #5c4d22;
  --type-string-bg: #3d3123;
  --type-string-fg: #edc38c;
  --type-string-border: #5c4933;
  --type-dimension-bg: #243a2c;
  --type-dimension-fg: #a6d6b0;
  --type-dimension-border: #3b5a45;
  --type-shadow-bg: #232a40;
  --type-shadow-fg: #c5ccdf;
  --type-shadow-border: #3d4a75;
  --type-border-bg: #43262f;
  --type-border-fg: #eba6b8;
  --type-border-border: #61404a;
  --type-gradient-bg: #253540;
  --type-gradient-fg: #a0c8de;
  --type-gradient-border: #3a5262;
  --type-motion-bg: #35371f;
  --type-motion-fg: #cfd18c;
  --type-motion-border: #4e5133;
  --chrome-surface: #1d2a4d;
  --chrome-surface-border: #3a4a78;
  --chrome-input-fg: #c8d0e6;
  --chrome-placeholder: #aab4d0;
  --on-chrome: #d5dcee;
  --on-chrome-focus-ring: #e6c36a26;
  --on-primary-muted: #eef1fb;
  --folder-icon: #8592b8;
  --file-icon: #8592b8;
  --shadow-xs: #00000020;
  --shadow-md: #00000066;
  --shadow-tooltip: #00000066;
  --shadow-lg: #00000080;
  --backdrop: #000000aa;
}

/* Ocean & Foam: deep sea-blue chrome, pale foam surfaces, cyan accent */
:root[data-variant="ocean-foam"] {
  --bg-0: #f2f8f8;
  --bg-1: #ffffff;
  --bg-2: #e9f2f3;
  --bg-3: #dbe9ea;
  --bg-hover: #e2eff0;
  --border: #d8e6e7;
  --border-strong: #bad2d4;
  --border-control: #587a80;
  --fg-0: #0f2430;
  --fg-1: #3d5560;
  --fg-2: #4c6570;
  --fg-3: #50697a;
  --accent: #0b6e8a;
  --accent-weak: #dff1f6;
  --primary: #0b6e8a;
  --primary-hover: #085670;
  --danger: #b3243c;
  --danger-weak: #fdeeee;
  --warn: #85580e;
  --ok: #28694f;
  --chrome: #0a2540;
  --chrome-border: #1f3f63;
  --chrome-focus: #7fd6e8;
  --sidebar-bg: #e6f0f1;
  --table-header-bg: #e3eeef;
  --row-hover: #f7fbfb;
  --focus-ring: #0b6e8a20;
  --checker-cell: #d0dede;
  --type-color-bg: #dff1f6;
  --type-color-fg: #0b6e8a;
  --type-color-border: #bfe2ec;
  --type-string-bg: #faf0dc;
  --type-string-fg: #7f5a0f;
  --type-string-border: #efdcb8;
  --type-dimension-bg: #e6f2e8;
  --type-dimension-fg: #2f6b45;
  --type-dimension-border: #cfe5d4;
  --type-shadow-bg: #e8eef0;
  --type-shadow-fg: #4f6168;
  --type-shadow-border: #d3dde0;
  --type-border-bg: #f9eaee;
  --type-border-fg: #a23a58;
  --type-border-border: #f0d3db;
  --type-gradient-bg: #e8f0f6;
  --type-gradient-fg: #2f6585;
  --type-gradient-border: #d2e2ea;
  --type-motion-bg: #f0f1de;
  --type-motion-fg: #66691f;
  --type-motion-border: #e0e2c0;
  --chrome-surface: #173b5e;
  --chrome-surface-border: #2f5a85;
  --chrome-input-fg: #bcd4e6;
  --chrome-placeholder: #9fbdd4;
  --on-chrome: #cfe2f0;
  --on-chrome-focus-ring: #7fd6e826;
  --on-primary-muted: #e2f6fb;
  --folder-icon: #547a82;
  --file-icon: #547a82;
  --shadow-xs: #0a254012;
  --shadow-md: #0a254024;
  --shadow-tooltip: #0a254026;
  --shadow-lg: #0a254033;
  --backdrop: #0a254066;
}

:root[data-variant="ocean-foam"][data-theme="dark"] {
  --bg-0: #08161d;
  --bg-1: #0e212b;
  --bg-2: #142c38;
  --bg-3: #1c3a49;
  --bg-hover: #224558;
  --border: #1d3744;
  --border-strong: #31576a;
  --border-control: #7ea6b4;
  --fg-0: #e6f4f7;
  --fg-1: #bcd4da;
  --fg-2: #9fbcc4;
  --fg-3: #a0bdc6;
  --accent: #6fd0e6;
  --accent-weak: #123a47;
  --primary: #0e7490;
  --primary-hover: #0b5f77;
  --danger: #ff9aa0;
  --danger-weak: #40232a;
  --warn: #edc38c;
  --ok: #9ed5b7;
  --chrome: #061219;
  --chrome-border: #17313d;
  --chrome-focus: #7fd6e8;
  --sidebar-bg: #0b1b24;
  --table-header-bg: #142c38;
  --row-hover: #142c38;
  --focus-ring: #6fd0e626;
  --checker-cell: #31576a;
  --quiet-surface: #0e212b80;
  --checker-bg: #10242e;
  --type-color-bg: #123a47;
  --type-color-fg: #8fdcee;
  --type-color-border: #235a6b;
  --type-string-bg: #3d3123;
  --type-string-fg: #edc38c;
  --type-string-border: #5c4933;
  --type-dimension-bg: #243a2c;
  --type-dimension-fg: #a6d6b0;
  --type-dimension-border: #3b5a45;
  --type-shadow-bg: #1d3138;
  --type-shadow-fg: #bcd4da;
  --type-shadow-border: #35535e;
  --type-border-bg: #43262f;
  --type-border-fg: #eba6b8;
  --type-border-border: #61404a;
  --type-gradient-bg: #253540;
  --type-gradient-fg: #a0c8de;
  --type-gradient-border: #3a5262;
  --type-motion-bg: #35371f;
  --type-motion-fg: #cfd18c;
  --type-motion-border: #4e5133;
  --chrome-surface: #173b5e;
  --chrome-surface-border: #2f5a85;
  --chrome-input-fg: #bcd4e6;
  --chrome-placeholder: #9fbdd4;
  --on-chrome: #cfe2f0;
  --on-chrome-focus-ring: #7fd6e826;
  --on-primary-muted: #e8f9fd;
  --folder-icon: #7ea6b4;
  --file-icon: #7ea6b4;
  --shadow-xs: #00000020;
  --shadow-md: #00000066;
  --shadow-tooltip: #00000066;
  --shadow-lg: #00000080;
  --backdrop: #000000aa;
}

/* Rose & Plum: deep plum chrome, blush surfaces, rose accent */
:root[data-variant="rose-plum"] {
  --bg-0: #fbf6f7;
  --bg-1: #ffffff;
  --bg-2: #f6edf0;
  --bg-3: #eddde3;
  --bg-hover: #f3e6ea;
  --border: #ebdde2;
  --border-strong: #d9c3cc;
  --border-control: #856d7a;
  --fg-0: #2e1f2b;
  --fg-1: #5a4455;
  --fg-2: #6a5463;
  --fg-3: #6e5867;
  --accent: #a3366b;
  --accent-weak: #fbe9f1;
  --primary: #a3366b;
  --primary-hover: #85285a;
  --danger: #b42318;
  --danger-weak: #fdede9;
  --warn: #85580e;
  --ok: #2a6a47;
  --chrome: #3a1f3d;
  --chrome-border: #5a355c;
  --chrome-focus: #e8a9d0;
  --sidebar-bg: #f7eef1;
  --table-header-bg: #f3e8ec;
  --row-hover: #fdf9fa;
  --focus-ring: #a3366b20;
  --checker-cell: #e0d2d8;
  --type-color-bg: #fbe9f1;
  --type-color-fg: #a3366b;
  --type-color-border: #f2cfe0;
  --type-string-bg: #faf0dc;
  --type-string-fg: #7f5a0f;
  --type-string-border: #efdcb8;
  --type-dimension-bg: #e6f2e8;
  --type-dimension-fg: #2f6b45;
  --type-dimension-border: #cfe5d4;
  --type-shadow-bg: #f0eaec;
  --type-shadow-fg: #5e5059;
  --type-shadow-border: #e0d6da;
  --type-border-bg: #f9eaee;
  --type-border-fg: #a23a58;
  --type-border-border: #f0d3db;
  --type-gradient-bg: #e8f0f6;
  --type-gradient-fg: #2f6585;
  --type-gradient-border: #d2e2ea;
  --type-motion-bg: #f0f1de;
  --type-motion-fg: #66691f;
  --type-motion-border: #e0e2c0;
  --chrome-surface: #52305a;
  --chrome-surface-border: #744a7e;
  --chrome-input-fg: #dcc3df;
  --chrome-placeholder: #c4a6c8;
  --on-chrome: #ead7ec;
  --on-chrome-focus-ring: #e8a9d026;
  --on-primary-muted: #fdeaf4;
  --folder-icon: #80657a;
  --file-icon: #80657a;
  --shadow-xs: #3a1f3d12;
  --shadow-md: #3a1f3d24;
  --shadow-tooltip: #3a1f3d26;
  --shadow-lg: #3a1f3d33;
  --backdrop: #3a1f3d66;
}

:root[data-variant="rose-plum"][data-theme="dark"] {
  --bg-0: #1a1017;
  --bg-1: #24161f;
  --bg-2: #2e1d29;
  --bg-3: #3a2635;
  --bg-hover: #432c3e;
  --border: #3a2535;
  --border-strong: #573a50;
  --border-control: #a0829a;
  --fg-0: #f6ecf1;
  --fg-1: #d8c4cf;
  --fg-2: #bda6b3;
  --fg-3: #b09aa7;
  --accent: #f19ac4;
  --accent-weak: #471f35;
  --primary: #b23d78;
  --primary-hover: #9c3367;
  --danger: #ffa07a;
  --danger-weak: #45261e;
  --warn: #edc38c;
  --ok: #9ed5b7;
  --chrome: #2a1530;
  --chrome-border: #4a2a50;
  --chrome-focus: #e8a9d0;
  --sidebar-bg: #20121c;
  --table-header-bg: #2e1d29;
  --row-hover: #2e1d29;
  --focus-ring: #f19ac426;
  --checker-cell: #573a50;
  --quiet-surface: #24161f80;
  --checker-bg: #27181f;
  --type-color-bg: #471f35;
  --type-color-fg: #f7b3d4;
  --type-color-border: #6b3252;
  --type-string-bg: #3d3123;
  --type-string-fg: #edc38c;
  --type-string-border: #5c4933;
  --type-dimension-bg: #243a2c;
  --type-dimension-fg: #a6d6b0;
  --type-dimension-border: #3b5a45;
  --type-shadow-bg: #33242d;
  --type-shadow-fg: #d8c4cf;
  --type-shadow-border: #573f4d;
  --type-border-bg: #43262f;
  --type-border-fg: #eba6b8;
  --type-border-border: #61404a;
  --type-gradient-bg: #253540;
  --type-gradient-fg: #a0c8de;
  --type-gradient-border: #3a5262;
  --type-motion-bg: #35371f;
  --type-motion-fg: #cfd18c;
  --type-motion-border: #4e5133;
  --chrome-surface: #52305a;
  --chrome-surface-border: #744a7e;
  --chrome-input-fg: #dcc3df;
  --chrome-placeholder: #c4a6c8;
  --on-chrome: #ead7ec;
  --on-chrome-focus-ring: #e8a9d026;
  --on-primary-muted: #fff0f8;
  --folder-icon: #a0829a;
  --file-icon: #a0829a;
  --shadow-xs: #00000020;
  --shadow-md: #00000066;
  --shadow-tooltip: #00000066;
  --shadow-lg: #00000080;
  --backdrop: #000000aa;
}