/* fediim design tokens. Generated from design/tokens/tokens.json by build.mjs; edit that file, not this one.
 * Theme: set data-theme="dark" | "light" | "system" | "themis-dark" | "themis-light" | "themis-system" on <html>. Dark is the default. */

:root {
  --gray-0: #ffffff;
  --gray-25: #f1f1f1;
  --gray-50: #f7f7f7;
  --gray-100: #efefef;
  --gray-150: #ebebeb;
  --gray-200: #e3e3e3;
  --gray-300: #c8c8c8;
  --gray-400: #a8a8a8;
  --gray-500: #8e8e8e;
  --gray-550: #858585;
  --gray-600: #707070;
  --gray-650: #6b6b6b;
  --gray-700: #5c5c5c;
  --gray-750: #3a3a3a;
  --gray-800: #333333;
  --gray-825: #2e2e2e;
  --gray-850: #2c2c2c;
  --gray-875: #232323;
  --gray-900: #1f1f1f;
  --gray-925: #1e1e1e;
  --gray-950: #1a1a1a;
  --gray-975: #141414;
  --gray-1000: #111111;
  --blue-50: #e8f0fe;
  --blue-100: #d2e3fc;
  --blue-300: #8ab4f8;
  --blue-600: #0b57d0;
  --blue-800: #0b3a8a;
  --blue-900: #1f2a44;
  --orange-50: #fff0e0;
  --orange-300: #fdae6b;
  --orange-700: #8a3b00;
  --orange-900: #3a2614;
  --yellow-50: #fef7e0;
  --yellow-100: #fde68a;
  --yellow-300: #f2c14e;
  --yellow-400: #ffb547;
  --yellow-600: #9e6b00;
  --yellow-700: #7a5900;
  --yellow-800: #5c4000;
  --yellow-900: #3a2f12;
  --yellow-950: #1b1204;
  --purple-50: #f3e8fd;
  --purple-300: #c58af9;
  --purple-700: #7b2cbf;
  --purple-900: #2e2440;
  --red-50: #fce8e6;
  --red-300: #f28b82;
  --red-700: #b3261e;
  --red-900: #3b1d1d;
  --green-50: #e6f4ea;
  --green-300: #6dd58c;
  --green-700: #146c2e;
  --green-900: #16311f;
  --chart-amber-light: #aa821e;
  --chart-purple-light: #714ca6;
  --chart-teal-light: #2a98af;
  --chart-rose-light: #954074;
  --chart-slate-light: #5790b8;
  --chart-amber-dark: #cbce77;
  --chart-purple-dark: #ab93ed;
  --chart-teal-dark: #70d5ed;
  --chart-rose-dark: #d18ad5;
  --chart-slate-dark: #94cff9;
  --m3-blue-canvas-dark: #131314;
  --m3-blue-nav-dark: #1b1b1f;
  --m3-blue-card-dark: #1e1f20;
  --m3-blue-sunken-dark: #0e0e0f;
  --m3-blue-hover-dark: #282a2c;
  --m3-blue-selected-dark: #223042;
  --m3-blue-border-dark: #3c4043;
  --m3-blue-subtle-dark: #2d3033;
  --m3-blue-control-dark: #8e918f;
  --m3-blue-primary-dark: #a8c7fa;
  --m3-blue-on-primary-dark: #062e6f;
  --m3-blue-soft-dark: #172b4d;
  --m3-blue-on-soft-dark: #d3e3fd;
  --m3-blue-canvas-light: #f8fafd;
  --m3-blue-nav-light: #f0f4f9;
  --m3-blue-card-light: #f3f6fc;
  --m3-blue-sunken-light: #e9eef6;
  --m3-blue-hover-light: #e3e9f2;
  --m3-blue-selected-light: #eaf2ff;
  --m3-blue-border-light: #c4c7c5;
  --m3-blue-subtle-light: #e1e6ed;
  --m3-blue-control-light: #6e7270;
  --m3-blue-primary-light: #0b57d0;
  --m3-blue-soft-light: #e8f0fe;
  --m3-blue-on-soft-light: #041e49;
  --m3-teal-canvas-dark: #0f1416;
  --m3-teal-nav-dark: #171c1e;
  --m3-teal-card-dark: #1b2123;
  --m3-teal-sunken-dark: #0a0f10;
  --m3-teal-hover-dark: #252b2d;
  --m3-teal-selected-dark: #1d3135;
  --m3-teal-border-dark: #374042;
  --m3-teal-subtle-dark: #293133;
  --m3-teal-control-dark: #859092;
  --m3-teal-primary-dark: #5ad5e8;
  --m3-teal-on-primary-dark: #002b30;
  --m3-teal-soft-dark: #103136;
  --m3-teal-on-soft-dark: #b8f3ff;
  --m3-teal-canvas-light: #f5fafb;
  --m3-teal-nav-light: #eef5f6;
  --m3-teal-card-light: #f2f8f9;
  --m3-teal-sunken-light: #e5eff0;
  --m3-teal-hover-light: #e0eaec;
  --m3-teal-selected-light: #eaf7f9;
  --m3-teal-border-light: #bfc8ca;
  --m3-teal-subtle-light: #dce5e7;
  --m3-teal-control-light: #687375;
  --m3-teal-primary-light: #00626e;
  --m3-teal-soft-light: #e3f6f8;
  --m3-teal-on-soft-light: #001f24;
  --m3-emerald-canvas-dark: #101412;
  --m3-emerald-nav-dark: #181d1a;
  --m3-emerald-card-dark: #1c211e;
  --m3-emerald-sunken-dark: #0b0f0d;
  --m3-emerald-hover-dark: #262b28;
  --m3-emerald-selected-dark: #1e3327;
  --m3-emerald-border-dark: #38423b;
  --m3-emerald-subtle-dark: #29322c;
  --m3-emerald-control-dark: #869189;
  --m3-emerald-primary-dark: #82d6a0;
  --m3-emerald-on-primary-dark: #002c18;
  --m3-emerald-soft-dark: #143322;
  --m3-emerald-on-soft-dark: #bdf5cf;
  --m3-emerald-canvas-light: #f6fbf7;
  --m3-emerald-nav-light: #eef5f0;
  --m3-emerald-card-light: #f2f8f4;
  --m3-emerald-sunken-light: #e6efe9;
  --m3-emerald-hover-light: #e0ebe3;
  --m3-emerald-selected-light: #ebf7ee;
  --m3-emerald-border-light: #c0c9c1;
  --m3-emerald-subtle-light: #dce5de;
  --m3-emerald-control-light: #6a746d;
  --m3-emerald-primary-light: #0f683b;
  --m3-emerald-soft-light: #e5f6eb;
  --m3-emerald-on-soft-light: #002110;
  --m3-slate-canvas-dark: #121316;
  --m3-slate-nav-dark: #1a1c20;
  --m3-slate-card-dark: #1e2024;
  --m3-slate-sunken-dark: #0d0e11;
  --m3-slate-hover-dark: #282a2f;
  --m3-slate-selected-dark: #253040;
  --m3-slate-border-dark: #3b3f46;
  --m3-slate-subtle-dark: #2c2f36;
  --m3-slate-control-dark: #8b9098;
  --m3-slate-primary-dark: #adc6ff;
  --m3-slate-on-primary-dark: #0a294d;
  --m3-slate-soft-dark: #1c2c42;
  --m3-slate-on-soft-dark: #d8e2ff;
  --m3-slate-canvas-light: #f8f9fc;
  --m3-slate-nav-light: #f0f2f7;
  --m3-slate-card-light: #f3f5fa;
  --m3-slate-sunken-light: #eceff5;
  --m3-slate-hover-light: #e2e5ed;
  --m3-slate-selected-light: #edf1fa;
  --m3-slate-border-light: #c3c6cf;
  --m3-slate-subtle-light: #dfe2eb;
  --m3-slate-control-light: #6d717a;
  --m3-slate-primary-light: #2b4c75;
  --m3-slate-soft-light: #e8eef9;
  --m3-slate-on-soft-light: #001a41;
  --ios-canvas-dark: #000000;
  --ios-nav-dark: #161618;
  --ios-card-dark: #1c1c1e;
  --ios-sunken-dark: #121214;
  --ios-hover-dark: #2c2c2e;
  --ios-selected-dark: #323236;
  --ios-border-dark: #38383a;
  --ios-subtle-dark: #2c2c2e;
  --ios-control-dark: #848489;
  --ios-canvas-light: #f2f2f7;
  --ios-nav-light: #f9f9fb;
  --ios-card-light: #ffffff;
  --ios-sunken-light: #ededf2;
  --ios-hover-light: #e8e8ed;
  --ios-border-light: #d1d1d6;
  --ios-subtle-light: #e5e5ea;
  --ios-control-light: #6e6e73;
  --ios-blue-primary-dark: #66b2ff;
  --ios-blue-on-primary-dark: #001e3d;
  --ios-blue-soft-dark: #102a45;
  --ios-blue-on-soft-dark: #cce4ff;
  --ios-blue-primary-light: #005ec4;
  --ios-blue-soft-light: #e5f0ff;
  --ios-blue-on-soft-light: #002b5c;
  --ios-indigo-card-dark: #1a1a22;
  --ios-indigo-sunken-dark: #111117;
  --ios-indigo-hover-dark: #272733;
  --ios-indigo-selected-dark: #303040;
  --ios-indigo-primary-dark: #9d9bff;
  --ios-indigo-on-primary-dark: #131138;
  --ios-indigo-soft-dark: #1f1e47;
  --ios-indigo-on-soft-dark: #e0dfff;
  --ios-indigo-primary-light: #4644b5;
  --ios-indigo-soft-light: #ededff;
  --ios-indigo-on-soft-light: #1f1d5c;
  --ios-teal-card-dark: #191e20;
  --ios-teal-sunken-dark: #101416;
  --ios-teal-hover-dark: #262d30;
  --ios-teal-selected-dark: #2e373b;
  --ios-teal-primary-dark: #5ac8fa;
  --ios-teal-on-primary-dark: #002638;
  --ios-teal-soft-dark: #0d2d3b;
  --ios-teal-on-soft-dark: #cceeff;
  --ios-teal-primary-light: #006280;
  --ios-teal-soft-light: #e3f5fc;
  --ios-teal-on-soft-light: #002e3d;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  --size-touch: 44px;
  --size-control-sm: 36px;
  --size-icon: 20px;
  --size-icon-sm: 16px;
  --size-tile: 40px;
  --size-avatar: 32px;
  --layout-sidebar: 236px;
  --layout-panel: 320px;
  --layout-sheet: 480px;
  --layout-topbar: 56px;
  --layout-appbar: 60px;
  --layout-bottomnav: 68px;
  --bp-tablet: 600px;
  --bp-desktop: 1024px;
  --bp-wide: 1280px;
  --opacity-disabled: 0.38;
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --duration-panel: 260ms;
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --font-sans: Figtree, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

:root, [data-theme="dark"] {
  color-scheme: dark;
  --bg-canvas: var(--gray-950);
  --bg-nav: var(--gray-925);
  --bg-card: var(--gray-900);
  --bg-sunken: var(--gray-975);
  --bg-hover: var(--gray-850);
  --bg-selected: var(--gray-750);
  --border-default: var(--gray-800);
  --border-subtle: var(--gray-825);
  --border-control: var(--gray-550);
  --text-strong: var(--gray-25);
  --text-primary: var(--gray-200);
  --text-secondary: var(--gray-400);
  --text-tertiary: var(--gray-500);
  --action-primary: var(--gray-200);
  --on-action-primary: var(--gray-950);
  --accent: var(--blue-300);
  --accent-soft: var(--blue-900);
  --on-accent-soft: var(--blue-100);
  --focus-ring: var(--gray-200);
  --warning: var(--orange-300);
  --warning-soft: var(--orange-900);
  --critical: var(--red-300);
  --critical-soft: var(--red-900);
  --on-critical: var(--gray-950);
  --success: var(--green-300);
  --success-soft: var(--green-900);
  --tile-amber: var(--yellow-300);
  --tile-amber-bg: var(--yellow-900);
  --tile-blue: var(--blue-300);
  --tile-blue-bg: var(--blue-900);
  --tile-purple: var(--purple-300);
  --tile-purple-bg: var(--purple-900);
  --tile-red: var(--red-300);
  --tile-red-bg: var(--red-900);
  --tile-green: var(--green-300);
  --tile-green-bg: var(--green-900);
  --tile-orange: var(--orange-300);
  --tile-orange-bg: var(--orange-900);
  --chart-series-1: var(--blue-300);
  --chart-series-2: var(--gray-600);
  --chart-warning: var(--orange-300);
  --chart-track: var(--gray-800);
  --chart-cat-1: var(--blue-300);
  --chart-cat-2: var(--chart-amber-dark);
  --chart-cat-3: var(--chart-purple-dark);
  --chart-cat-4: var(--chart-teal-dark);
  --chart-cat-5: var(--chart-rose-dark);
  --chart-cat-6: var(--chart-slate-dark);
  --chart-seq-1: var(--blue-900);
  --chart-seq-2: var(--blue-800);
  --chart-seq-3: var(--blue-600);
  --chart-seq-4: var(--blue-300);
  --chart-seq-5: var(--blue-100);
  --chart-positive: var(--green-300);
  --chart-negative: var(--red-300);
  --chart-neutral: var(--gray-600);
  --chart-grid: var(--gray-825);
  --chart-axis: var(--gray-800);
  --chart-label: var(--gray-400);
  --scrim: rgba(0, 0, 0, 0.6);
  --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.55);
  --shadow-toast: 0 6px 18px rgba(0, 0, 0, 0.5);
}

[data-theme="light"] {
  color-scheme: light;
  --bg-canvas: var(--gray-0);
  --bg-nav: var(--gray-50);
  --bg-card: var(--gray-0);
  --bg-sunken: var(--gray-100);
  --bg-hover: var(--gray-150);
  --bg-selected: var(--gray-0);
  --border-default: var(--gray-200);
  --border-subtle: var(--gray-100);
  --border-control: var(--gray-550);
  --text-strong: var(--gray-1000);
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-700);
  --text-tertiary: var(--gray-650);
  --action-primary: var(--gray-900);
  --on-action-primary: var(--gray-0);
  --accent: var(--blue-600);
  --accent-soft: var(--blue-50);
  --on-accent-soft: var(--blue-800);
  --focus-ring: var(--gray-900);
  --warning: var(--orange-700);
  --warning-soft: var(--orange-50);
  --critical: var(--red-700);
  --critical-soft: var(--red-50);
  --on-critical: var(--gray-0);
  --success: var(--green-700);
  --success-soft: var(--green-50);
  --tile-amber: var(--yellow-700);
  --tile-amber-bg: var(--yellow-50);
  --tile-blue: var(--blue-600);
  --tile-blue-bg: var(--blue-50);
  --tile-purple: var(--purple-700);
  --tile-purple-bg: var(--purple-50);
  --tile-red: var(--red-700);
  --tile-red-bg: var(--red-50);
  --tile-green: var(--green-700);
  --tile-green-bg: var(--green-50);
  --tile-orange: var(--orange-700);
  --tile-orange-bg: var(--orange-50);
  --chart-series-1: var(--blue-600);
  --chart-series-2: var(--gray-550);
  --chart-warning: var(--orange-700);
  --chart-track: var(--gray-200);
  --chart-cat-1: var(--blue-600);
  --chart-cat-2: var(--chart-amber-light);
  --chart-cat-3: var(--chart-purple-light);
  --chart-cat-4: var(--chart-teal-light);
  --chart-cat-5: var(--chart-rose-light);
  --chart-cat-6: var(--chart-slate-light);
  --chart-seq-1: var(--blue-50);
  --chart-seq-2: var(--blue-100);
  --chart-seq-3: var(--blue-300);
  --chart-seq-4: var(--blue-600);
  --chart-seq-5: var(--blue-800);
  --chart-positive: var(--green-700);
  --chart-negative: var(--red-700);
  --chart-neutral: var(--gray-550);
  --chart-grid: var(--gray-100);
  --chart-axis: var(--gray-200);
  --chart-label: var(--gray-700);
  --scrim: rgba(0, 0, 0, 0.4);
  --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.14);
  --shadow-toast: 0 6px 18px rgba(0, 0, 0, 0.16);
}

[data-theme="themis-dark"] {
  color-scheme: dark;
  --bg-canvas: var(--gray-950);
  --bg-nav: var(--gray-925);
  --bg-card: var(--gray-900);
  --bg-sunken: var(--gray-975);
  --bg-hover: var(--gray-850);
  --bg-selected: var(--gray-750);
  --border-default: var(--gray-800);
  --border-subtle: var(--gray-825);
  --border-control: var(--yellow-400);
  --text-strong: var(--gray-25);
  --text-primary: var(--gray-200);
  --text-secondary: var(--gray-400);
  --text-tertiary: var(--gray-500);
  --action-primary: var(--yellow-400);
  --on-action-primary: var(--yellow-950);
  --accent: var(--yellow-400);
  --accent-soft: var(--yellow-900);
  --on-accent-soft: var(--yellow-100);
  --focus-ring: var(--yellow-400);
  --warning: var(--orange-300);
  --warning-soft: var(--orange-900);
  --critical: var(--red-300);
  --critical-soft: var(--red-900);
  --on-critical: var(--gray-950);
  --success: var(--green-300);
  --success-soft: var(--green-900);
  --tile-amber: var(--yellow-300);
  --tile-amber-bg: var(--yellow-900);
  --tile-blue: var(--blue-300);
  --tile-blue-bg: var(--blue-900);
  --tile-purple: var(--purple-300);
  --tile-purple-bg: var(--purple-900);
  --tile-red: var(--red-300);
  --tile-red-bg: var(--red-900);
  --tile-green: var(--green-300);
  --tile-green-bg: var(--green-900);
  --tile-orange: var(--orange-300);
  --tile-orange-bg: var(--orange-900);
  --chart-series-1: var(--blue-300);
  --chart-series-2: var(--gray-600);
  --chart-warning: var(--orange-300);
  --chart-track: var(--gray-800);
  --chart-cat-1: var(--blue-300);
  --chart-cat-2: var(--chart-amber-dark);
  --chart-cat-3: var(--chart-purple-dark);
  --chart-cat-4: var(--chart-teal-dark);
  --chart-cat-5: var(--chart-rose-dark);
  --chart-cat-6: var(--chart-slate-dark);
  --chart-seq-1: var(--blue-900);
  --chart-seq-2: var(--blue-800);
  --chart-seq-3: var(--blue-600);
  --chart-seq-4: var(--blue-300);
  --chart-seq-5: var(--blue-100);
  --chart-positive: var(--green-300);
  --chart-negative: var(--red-300);
  --chart-neutral: var(--gray-600);
  --chart-grid: var(--gray-825);
  --chart-axis: var(--gray-800);
  --chart-label: var(--gray-400);
  --scrim: rgba(0, 0, 0, 0.6);
  --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.55);
  --shadow-toast: 0 6px 18px rgba(0, 0, 0, 0.5);
}

[data-theme="themis-light"] {
  color-scheme: light;
  --bg-canvas: var(--gray-0);
  --bg-nav: var(--gray-50);
  --bg-card: var(--gray-0);
  --bg-sunken: var(--gray-100);
  --bg-hover: var(--gray-150);
  --bg-selected: var(--gray-0);
  --border-default: var(--gray-200);
  --border-subtle: var(--gray-100);
  --border-control: var(--yellow-600);
  --text-strong: var(--gray-1000);
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-700);
  --text-tertiary: var(--gray-650);
  --action-primary: var(--yellow-700);
  --on-action-primary: var(--gray-0);
  --accent: var(--yellow-700);
  --accent-soft: var(--yellow-50);
  --on-accent-soft: var(--yellow-800);
  --focus-ring: var(--yellow-700);
  --warning: var(--orange-700);
  --warning-soft: var(--orange-50);
  --critical: var(--red-700);
  --critical-soft: var(--red-50);
  --on-critical: var(--gray-0);
  --success: var(--green-700);
  --success-soft: var(--green-50);
  --tile-amber: var(--yellow-700);
  --tile-amber-bg: var(--yellow-50);
  --tile-blue: var(--blue-600);
  --tile-blue-bg: var(--blue-50);
  --tile-purple: var(--purple-700);
  --tile-purple-bg: var(--purple-50);
  --tile-red: var(--red-700);
  --tile-red-bg: var(--red-50);
  --tile-green: var(--green-700);
  --tile-green-bg: var(--green-50);
  --tile-orange: var(--orange-700);
  --tile-orange-bg: var(--orange-50);
  --chart-series-1: var(--blue-600);
  --chart-series-2: var(--gray-550);
  --chart-warning: var(--orange-700);
  --chart-track: var(--gray-200);
  --chart-cat-1: var(--blue-600);
  --chart-cat-2: var(--chart-amber-light);
  --chart-cat-3: var(--chart-purple-light);
  --chart-cat-4: var(--chart-teal-light);
  --chart-cat-5: var(--chart-rose-light);
  --chart-cat-6: var(--chart-slate-light);
  --chart-seq-1: var(--blue-50);
  --chart-seq-2: var(--blue-100);
  --chart-seq-3: var(--blue-300);
  --chart-seq-4: var(--blue-600);
  --chart-seq-5: var(--blue-800);
  --chart-positive: var(--green-700);
  --chart-negative: var(--red-700);
  --chart-neutral: var(--gray-550);
  --chart-grid: var(--gray-100);
  --chart-axis: var(--gray-200);
  --chart-label: var(--gray-700);
  --scrim: rgba(0, 0, 0, 0.4);
  --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.14);
  --shadow-toast: 0 6px 18px rgba(0, 0, 0, 0.16);
}

[data-theme="m3-blue-dark"] {
  color-scheme: dark;
  --bg-canvas: var(--m3-blue-canvas-dark);
  --bg-nav: var(--m3-blue-nav-dark);
  --bg-card: var(--m3-blue-card-dark);
  --bg-sunken: var(--m3-blue-sunken-dark);
  --bg-hover: var(--m3-blue-hover-dark);
  --bg-selected: var(--m3-blue-selected-dark);
  --border-default: var(--m3-blue-border-dark);
  --border-subtle: var(--m3-blue-subtle-dark);
  --border-control: var(--m3-blue-control-dark);
  --text-strong: var(--gray-25);
  --text-primary: var(--gray-200);
  --text-secondary: var(--gray-400);
  --text-tertiary: var(--gray-500);
  --action-primary: var(--m3-blue-primary-dark);
  --on-action-primary: var(--m3-blue-on-primary-dark);
  --accent: var(--m3-blue-primary-dark);
  --accent-soft: var(--m3-blue-soft-dark);
  --on-accent-soft: var(--m3-blue-on-soft-dark);
  --focus-ring: var(--m3-blue-primary-dark);
  --warning: var(--orange-300);
  --warning-soft: var(--orange-900);
  --critical: var(--red-300);
  --critical-soft: var(--red-900);
  --on-critical: var(--gray-950);
  --success: var(--green-300);
  --success-soft: var(--green-900);
  --tile-amber: var(--yellow-300);
  --tile-amber-bg: var(--yellow-900);
  --tile-blue: var(--blue-300);
  --tile-blue-bg: var(--blue-900);
  --tile-purple: var(--purple-300);
  --tile-purple-bg: var(--purple-900);
  --tile-red: var(--red-300);
  --tile-red-bg: var(--red-900);
  --tile-green: var(--green-300);
  --tile-green-bg: var(--green-900);
  --tile-orange: var(--orange-300);
  --tile-orange-bg: var(--orange-900);
  --chart-series-1: var(--blue-300);
  --chart-series-2: var(--gray-600);
  --chart-warning: var(--orange-300);
  --chart-track: var(--gray-800);
  --chart-cat-1: var(--blue-300);
  --chart-cat-2: var(--chart-amber-dark);
  --chart-cat-3: var(--chart-purple-dark);
  --chart-cat-4: var(--chart-teal-dark);
  --chart-cat-5: var(--chart-rose-dark);
  --chart-cat-6: var(--chart-slate-dark);
  --chart-seq-1: var(--blue-900);
  --chart-seq-2: var(--blue-800);
  --chart-seq-3: var(--blue-600);
  --chart-seq-4: var(--blue-300);
  --chart-seq-5: var(--blue-100);
  --chart-positive: var(--green-300);
  --chart-negative: var(--red-300);
  --chart-neutral: var(--gray-600);
  --chart-grid: var(--gray-825);
  --chart-axis: var(--gray-800);
  --chart-label: var(--gray-400);
  --scrim: rgba(0, 0, 0, 0.6);
  --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.55);
  --shadow-toast: 0 6px 18px rgba(0, 0, 0, 0.5);
}

[data-theme="m3-blue-light"] {
  color-scheme: light;
  --bg-canvas: var(--m3-blue-canvas-light);
  --bg-nav: var(--m3-blue-nav-light);
  --bg-card: var(--m3-blue-card-light);
  --bg-sunken: var(--m3-blue-sunken-light);
  --bg-hover: var(--m3-blue-hover-light);
  --bg-selected: var(--m3-blue-selected-light);
  --border-default: var(--m3-blue-border-light);
  --border-subtle: var(--m3-blue-subtle-light);
  --border-control: var(--m3-blue-control-light);
  --text-strong: var(--gray-1000);
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-700);
  --text-tertiary: var(--gray-650);
  --action-primary: var(--m3-blue-primary-light);
  --on-action-primary: var(--gray-0);
  --accent: var(--m3-blue-primary-light);
  --accent-soft: var(--m3-blue-soft-light);
  --on-accent-soft: var(--m3-blue-on-soft-light);
  --focus-ring: var(--m3-blue-primary-light);
  --warning: var(--orange-700);
  --warning-soft: var(--orange-50);
  --critical: var(--red-700);
  --critical-soft: var(--red-50);
  --on-critical: var(--gray-0);
  --success: var(--green-700);
  --success-soft: var(--green-50);
  --tile-amber: var(--yellow-700);
  --tile-amber-bg: var(--yellow-50);
  --tile-blue: var(--blue-600);
  --tile-blue-bg: var(--blue-50);
  --tile-purple: var(--purple-700);
  --tile-purple-bg: var(--purple-50);
  --tile-red: var(--red-700);
  --tile-red-bg: var(--red-50);
  --tile-green: var(--green-700);
  --tile-green-bg: var(--green-50);
  --tile-orange: var(--orange-700);
  --tile-orange-bg: var(--orange-50);
  --chart-series-1: var(--blue-600);
  --chart-series-2: var(--gray-550);
  --chart-warning: var(--orange-700);
  --chart-track: var(--gray-200);
  --chart-cat-1: var(--blue-600);
  --chart-cat-2: var(--chart-amber-light);
  --chart-cat-3: var(--chart-purple-light);
  --chart-cat-4: var(--chart-teal-light);
  --chart-cat-5: var(--chart-rose-light);
  --chart-cat-6: var(--chart-slate-light);
  --chart-seq-1: var(--blue-50);
  --chart-seq-2: var(--blue-100);
  --chart-seq-3: var(--blue-300);
  --chart-seq-4: var(--blue-600);
  --chart-seq-5: var(--blue-800);
  --chart-positive: var(--green-700);
  --chart-negative: var(--red-700);
  --chart-neutral: var(--gray-550);
  --chart-grid: var(--gray-100);
  --chart-axis: var(--gray-200);
  --chart-label: var(--gray-700);
  --scrim: rgba(0, 0, 0, 0.4);
  --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.14);
  --shadow-toast: 0 6px 18px rgba(0, 0, 0, 0.16);
}

[data-theme="m3-teal-dark"] {
  color-scheme: dark;
  --bg-canvas: var(--m3-teal-canvas-dark);
  --bg-nav: var(--m3-teal-nav-dark);
  --bg-card: var(--m3-teal-card-dark);
  --bg-sunken: var(--m3-teal-sunken-dark);
  --bg-hover: var(--m3-teal-hover-dark);
  --bg-selected: var(--m3-teal-selected-dark);
  --border-default: var(--m3-teal-border-dark);
  --border-subtle: var(--m3-teal-subtle-dark);
  --border-control: var(--m3-teal-control-dark);
  --text-strong: var(--gray-25);
  --text-primary: var(--gray-200);
  --text-secondary: var(--gray-400);
  --text-tertiary: var(--gray-500);
  --action-primary: var(--m3-teal-primary-dark);
  --on-action-primary: var(--m3-teal-on-primary-dark);
  --accent: var(--m3-teal-primary-dark);
  --accent-soft: var(--m3-teal-soft-dark);
  --on-accent-soft: var(--m3-teal-on-soft-dark);
  --focus-ring: var(--m3-teal-primary-dark);
  --warning: var(--orange-300);
  --warning-soft: var(--orange-900);
  --critical: var(--red-300);
  --critical-soft: var(--red-900);
  --on-critical: var(--gray-950);
  --success: var(--green-300);
  --success-soft: var(--green-900);
  --tile-amber: var(--yellow-300);
  --tile-amber-bg: var(--yellow-900);
  --tile-blue: var(--blue-300);
  --tile-blue-bg: var(--blue-900);
  --tile-purple: var(--purple-300);
  --tile-purple-bg: var(--purple-900);
  --tile-red: var(--red-300);
  --tile-red-bg: var(--red-900);
  --tile-green: var(--green-300);
  --tile-green-bg: var(--green-900);
  --tile-orange: var(--orange-300);
  --tile-orange-bg: var(--orange-900);
  --chart-series-1: var(--blue-300);
  --chart-series-2: var(--gray-600);
  --chart-warning: var(--orange-300);
  --chart-track: var(--gray-800);
  --chart-cat-1: var(--blue-300);
  --chart-cat-2: var(--chart-amber-dark);
  --chart-cat-3: var(--chart-purple-dark);
  --chart-cat-4: var(--chart-teal-dark);
  --chart-cat-5: var(--chart-rose-dark);
  --chart-cat-6: var(--chart-slate-dark);
  --chart-seq-1: var(--blue-900);
  --chart-seq-2: var(--blue-800);
  --chart-seq-3: var(--blue-600);
  --chart-seq-4: var(--blue-300);
  --chart-seq-5: var(--blue-100);
  --chart-positive: var(--green-300);
  --chart-negative: var(--red-300);
  --chart-neutral: var(--gray-600);
  --chart-grid: var(--gray-825);
  --chart-axis: var(--gray-800);
  --chart-label: var(--gray-400);
  --scrim: rgba(0, 0, 0, 0.6);
  --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.55);
  --shadow-toast: 0 6px 18px rgba(0, 0, 0, 0.5);
}

[data-theme="m3-teal-light"] {
  color-scheme: light;
  --bg-canvas: var(--m3-teal-canvas-light);
  --bg-nav: var(--m3-teal-nav-light);
  --bg-card: var(--m3-teal-card-light);
  --bg-sunken: var(--m3-teal-sunken-light);
  --bg-hover: var(--m3-teal-hover-light);
  --bg-selected: var(--m3-teal-selected-light);
  --border-default: var(--m3-teal-border-light);
  --border-subtle: var(--m3-teal-subtle-light);
  --border-control: var(--m3-teal-control-light);
  --text-strong: var(--gray-1000);
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-700);
  --text-tertiary: var(--gray-650);
  --action-primary: var(--m3-teal-primary-light);
  --on-action-primary: var(--gray-0);
  --accent: var(--m3-teal-primary-light);
  --accent-soft: var(--m3-teal-soft-light);
  --on-accent-soft: var(--m3-teal-on-soft-light);
  --focus-ring: var(--m3-teal-primary-light);
  --warning: var(--orange-700);
  --warning-soft: var(--orange-50);
  --critical: var(--red-700);
  --critical-soft: var(--red-50);
  --on-critical: var(--gray-0);
  --success: var(--green-700);
  --success-soft: var(--green-50);
  --tile-amber: var(--yellow-700);
  --tile-amber-bg: var(--yellow-50);
  --tile-blue: var(--blue-600);
  --tile-blue-bg: var(--blue-50);
  --tile-purple: var(--purple-700);
  --tile-purple-bg: var(--purple-50);
  --tile-red: var(--red-700);
  --tile-red-bg: var(--red-50);
  --tile-green: var(--green-700);
  --tile-green-bg: var(--green-50);
  --tile-orange: var(--orange-700);
  --tile-orange-bg: var(--orange-50);
  --chart-series-1: var(--blue-600);
  --chart-series-2: var(--gray-550);
  --chart-warning: var(--orange-700);
  --chart-track: var(--gray-200);
  --chart-cat-1: var(--blue-600);
  --chart-cat-2: var(--chart-amber-light);
  --chart-cat-3: var(--chart-purple-light);
  --chart-cat-4: var(--chart-teal-light);
  --chart-cat-5: var(--chart-rose-light);
  --chart-cat-6: var(--chart-slate-light);
  --chart-seq-1: var(--blue-50);
  --chart-seq-2: var(--blue-100);
  --chart-seq-3: var(--blue-300);
  --chart-seq-4: var(--blue-600);
  --chart-seq-5: var(--blue-800);
  --chart-positive: var(--green-700);
  --chart-negative: var(--red-700);
  --chart-neutral: var(--gray-550);
  --chart-grid: var(--gray-100);
  --chart-axis: var(--gray-200);
  --chart-label: var(--gray-700);
  --scrim: rgba(0, 0, 0, 0.4);
  --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.14);
  --shadow-toast: 0 6px 18px rgba(0, 0, 0, 0.16);
}

[data-theme="m3-emerald-dark"] {
  color-scheme: dark;
  --bg-canvas: var(--m3-emerald-canvas-dark);
  --bg-nav: var(--m3-emerald-nav-dark);
  --bg-card: var(--m3-emerald-card-dark);
  --bg-sunken: var(--m3-emerald-sunken-dark);
  --bg-hover: var(--m3-emerald-hover-dark);
  --bg-selected: var(--m3-emerald-selected-dark);
  --border-default: var(--m3-emerald-border-dark);
  --border-subtle: var(--m3-emerald-subtle-dark);
  --border-control: var(--m3-emerald-control-dark);
  --text-strong: var(--gray-25);
  --text-primary: var(--gray-200);
  --text-secondary: var(--gray-400);
  --text-tertiary: var(--gray-500);
  --action-primary: var(--m3-emerald-primary-dark);
  --on-action-primary: var(--m3-emerald-on-primary-dark);
  --accent: var(--m3-emerald-primary-dark);
  --accent-soft: var(--m3-emerald-soft-dark);
  --on-accent-soft: var(--m3-emerald-on-soft-dark);
  --focus-ring: var(--m3-emerald-primary-dark);
  --warning: var(--orange-300);
  --warning-soft: var(--orange-900);
  --critical: var(--red-300);
  --critical-soft: var(--red-900);
  --on-critical: var(--gray-950);
  --success: var(--green-300);
  --success-soft: var(--green-900);
  --tile-amber: var(--yellow-300);
  --tile-amber-bg: var(--yellow-900);
  --tile-blue: var(--blue-300);
  --tile-blue-bg: var(--blue-900);
  --tile-purple: var(--purple-300);
  --tile-purple-bg: var(--purple-900);
  --tile-red: var(--red-300);
  --tile-red-bg: var(--red-900);
  --tile-green: var(--green-300);
  --tile-green-bg: var(--green-900);
  --tile-orange: var(--orange-300);
  --tile-orange-bg: var(--orange-900);
  --chart-series-1: var(--blue-300);
  --chart-series-2: var(--gray-600);
  --chart-warning: var(--orange-300);
  --chart-track: var(--gray-800);
  --chart-cat-1: var(--blue-300);
  --chart-cat-2: var(--chart-amber-dark);
  --chart-cat-3: var(--chart-purple-dark);
  --chart-cat-4: var(--chart-teal-dark);
  --chart-cat-5: var(--chart-rose-dark);
  --chart-cat-6: var(--chart-slate-dark);
  --chart-seq-1: var(--blue-900);
  --chart-seq-2: var(--blue-800);
  --chart-seq-3: var(--blue-600);
  --chart-seq-4: var(--blue-300);
  --chart-seq-5: var(--blue-100);
  --chart-positive: var(--green-300);
  --chart-negative: var(--red-300);
  --chart-neutral: var(--gray-600);
  --chart-grid: var(--gray-825);
  --chart-axis: var(--gray-800);
  --chart-label: var(--gray-400);
  --scrim: rgba(0, 0, 0, 0.6);
  --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.55);
  --shadow-toast: 0 6px 18px rgba(0, 0, 0, 0.5);
}

[data-theme="m3-emerald-light"] {
  color-scheme: light;
  --bg-canvas: var(--m3-emerald-canvas-light);
  --bg-nav: var(--m3-emerald-nav-light);
  --bg-card: var(--m3-emerald-card-light);
  --bg-sunken: var(--m3-emerald-sunken-light);
  --bg-hover: var(--m3-emerald-hover-light);
  --bg-selected: var(--m3-emerald-selected-light);
  --border-default: var(--m3-emerald-border-light);
  --border-subtle: var(--m3-emerald-subtle-light);
  --border-control: var(--m3-emerald-control-light);
  --text-strong: var(--gray-1000);
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-700);
  --text-tertiary: var(--gray-650);
  --action-primary: var(--m3-emerald-primary-light);
  --on-action-primary: var(--gray-0);
  --accent: var(--m3-emerald-primary-light);
  --accent-soft: var(--m3-emerald-soft-light);
  --on-accent-soft: var(--m3-emerald-on-soft-light);
  --focus-ring: var(--m3-emerald-primary-light);
  --warning: var(--orange-700);
  --warning-soft: var(--orange-50);
  --critical: var(--red-700);
  --critical-soft: var(--red-50);
  --on-critical: var(--gray-0);
  --success: var(--green-700);
  --success-soft: var(--green-50);
  --tile-amber: var(--yellow-700);
  --tile-amber-bg: var(--yellow-50);
  --tile-blue: var(--blue-600);
  --tile-blue-bg: var(--blue-50);
  --tile-purple: var(--purple-700);
  --tile-purple-bg: var(--purple-50);
  --tile-red: var(--red-700);
  --tile-red-bg: var(--red-50);
  --tile-green: var(--green-700);
  --tile-green-bg: var(--green-50);
  --tile-orange: var(--orange-700);
  --tile-orange-bg: var(--orange-50);
  --chart-series-1: var(--blue-600);
  --chart-series-2: var(--gray-550);
  --chart-warning: var(--orange-700);
  --chart-track: var(--gray-200);
  --chart-cat-1: var(--blue-600);
  --chart-cat-2: var(--chart-amber-light);
  --chart-cat-3: var(--chart-purple-light);
  --chart-cat-4: var(--chart-teal-light);
  --chart-cat-5: var(--chart-rose-light);
  --chart-cat-6: var(--chart-slate-light);
  --chart-seq-1: var(--blue-50);
  --chart-seq-2: var(--blue-100);
  --chart-seq-3: var(--blue-300);
  --chart-seq-4: var(--blue-600);
  --chart-seq-5: var(--blue-800);
  --chart-positive: var(--green-700);
  --chart-negative: var(--red-700);
  --chart-neutral: var(--gray-550);
  --chart-grid: var(--gray-100);
  --chart-axis: var(--gray-200);
  --chart-label: var(--gray-700);
  --scrim: rgba(0, 0, 0, 0.4);
  --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.14);
  --shadow-toast: 0 6px 18px rgba(0, 0, 0, 0.16);
}

[data-theme="m3-slate-dark"] {
  color-scheme: dark;
  --bg-canvas: var(--m3-slate-canvas-dark);
  --bg-nav: var(--m3-slate-nav-dark);
  --bg-card: var(--m3-slate-card-dark);
  --bg-sunken: var(--m3-slate-sunken-dark);
  --bg-hover: var(--m3-slate-hover-dark);
  --bg-selected: var(--m3-slate-selected-dark);
  --border-default: var(--m3-slate-border-dark);
  --border-subtle: var(--m3-slate-subtle-dark);
  --border-control: var(--m3-slate-control-dark);
  --text-strong: var(--gray-25);
  --text-primary: var(--gray-200);
  --text-secondary: var(--gray-400);
  --text-tertiary: var(--gray-500);
  --action-primary: var(--m3-slate-primary-dark);
  --on-action-primary: var(--m3-slate-on-primary-dark);
  --accent: var(--m3-slate-primary-dark);
  --accent-soft: var(--m3-slate-soft-dark);
  --on-accent-soft: var(--m3-slate-on-soft-dark);
  --focus-ring: var(--m3-slate-primary-dark);
  --warning: var(--orange-300);
  --warning-soft: var(--orange-900);
  --critical: var(--red-300);
  --critical-soft: var(--red-900);
  --on-critical: var(--gray-950);
  --success: var(--green-300);
  --success-soft: var(--green-900);
  --tile-amber: var(--yellow-300);
  --tile-amber-bg: var(--yellow-900);
  --tile-blue: var(--blue-300);
  --tile-blue-bg: var(--blue-900);
  --tile-purple: var(--purple-300);
  --tile-purple-bg: var(--purple-900);
  --tile-red: var(--red-300);
  --tile-red-bg: var(--red-900);
  --tile-green: var(--green-300);
  --tile-green-bg: var(--green-900);
  --tile-orange: var(--orange-300);
  --tile-orange-bg: var(--orange-900);
  --chart-series-1: var(--blue-300);
  --chart-series-2: var(--gray-600);
  --chart-warning: var(--orange-300);
  --chart-track: var(--gray-800);
  --chart-cat-1: var(--blue-300);
  --chart-cat-2: var(--chart-amber-dark);
  --chart-cat-3: var(--chart-purple-dark);
  --chart-cat-4: var(--chart-teal-dark);
  --chart-cat-5: var(--chart-rose-dark);
  --chart-cat-6: var(--chart-slate-dark);
  --chart-seq-1: var(--blue-900);
  --chart-seq-2: var(--blue-800);
  --chart-seq-3: var(--blue-600);
  --chart-seq-4: var(--blue-300);
  --chart-seq-5: var(--blue-100);
  --chart-positive: var(--green-300);
  --chart-negative: var(--red-300);
  --chart-neutral: var(--gray-600);
  --chart-grid: var(--gray-825);
  --chart-axis: var(--gray-800);
  --chart-label: var(--gray-400);
  --scrim: rgba(0, 0, 0, 0.6);
  --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.55);
  --shadow-toast: 0 6px 18px rgba(0, 0, 0, 0.5);
}

[data-theme="m3-slate-light"] {
  color-scheme: light;
  --bg-canvas: var(--m3-slate-canvas-light);
  --bg-nav: var(--m3-slate-nav-light);
  --bg-card: var(--m3-slate-card-light);
  --bg-sunken: var(--m3-slate-sunken-light);
  --bg-hover: var(--m3-slate-hover-light);
  --bg-selected: var(--m3-slate-selected-light);
  --border-default: var(--m3-slate-border-light);
  --border-subtle: var(--m3-slate-subtle-light);
  --border-control: var(--m3-slate-control-light);
  --text-strong: var(--gray-1000);
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-700);
  --text-tertiary: var(--gray-650);
  --action-primary: var(--m3-slate-primary-light);
  --on-action-primary: var(--gray-0);
  --accent: var(--m3-slate-primary-light);
  --accent-soft: var(--m3-slate-soft-light);
  --on-accent-soft: var(--m3-slate-on-soft-light);
  --focus-ring: var(--m3-slate-primary-light);
  --warning: var(--orange-700);
  --warning-soft: var(--orange-50);
  --critical: var(--red-700);
  --critical-soft: var(--red-50);
  --on-critical: var(--gray-0);
  --success: var(--green-700);
  --success-soft: var(--green-50);
  --tile-amber: var(--yellow-700);
  --tile-amber-bg: var(--yellow-50);
  --tile-blue: var(--blue-600);
  --tile-blue-bg: var(--blue-50);
  --tile-purple: var(--purple-700);
  --tile-purple-bg: var(--purple-50);
  --tile-red: var(--red-700);
  --tile-red-bg: var(--red-50);
  --tile-green: var(--green-700);
  --tile-green-bg: var(--green-50);
  --tile-orange: var(--orange-700);
  --tile-orange-bg: var(--orange-50);
  --chart-series-1: var(--blue-600);
  --chart-series-2: var(--gray-550);
  --chart-warning: var(--orange-700);
  --chart-track: var(--gray-200);
  --chart-cat-1: var(--blue-600);
  --chart-cat-2: var(--chart-amber-light);
  --chart-cat-3: var(--chart-purple-light);
  --chart-cat-4: var(--chart-teal-light);
  --chart-cat-5: var(--chart-rose-light);
  --chart-cat-6: var(--chart-slate-light);
  --chart-seq-1: var(--blue-50);
  --chart-seq-2: var(--blue-100);
  --chart-seq-3: var(--blue-300);
  --chart-seq-4: var(--blue-600);
  --chart-seq-5: var(--blue-800);
  --chart-positive: var(--green-700);
  --chart-negative: var(--red-700);
  --chart-neutral: var(--gray-550);
  --chart-grid: var(--gray-100);
  --chart-axis: var(--gray-200);
  --chart-label: var(--gray-700);
  --scrim: rgba(0, 0, 0, 0.4);
  --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.14);
  --shadow-toast: 0 6px 18px rgba(0, 0, 0, 0.16);
}

[data-theme="ios-blue-dark"] {
  color-scheme: dark;
  --bg-canvas: var(--ios-canvas-dark);
  --bg-nav: var(--ios-nav-dark);
  --bg-card: var(--ios-card-dark);
  --bg-sunken: var(--ios-sunken-dark);
  --bg-hover: var(--ios-hover-dark);
  --bg-selected: var(--ios-selected-dark);
  --border-default: var(--ios-border-dark);
  --border-subtle: var(--ios-subtle-dark);
  --border-control: var(--ios-control-dark);
  --text-strong: var(--gray-25);
  --text-primary: var(--gray-200);
  --text-secondary: var(--gray-400);
  --text-tertiary: var(--gray-500);
  --action-primary: var(--ios-blue-primary-dark);
  --on-action-primary: var(--ios-blue-on-primary-dark);
  --accent: var(--ios-blue-primary-dark);
  --accent-soft: var(--ios-blue-soft-dark);
  --on-accent-soft: var(--ios-blue-on-soft-dark);
  --focus-ring: var(--ios-blue-primary-dark);
  --warning: var(--orange-300);
  --warning-soft: var(--orange-900);
  --critical: var(--red-300);
  --critical-soft: var(--red-900);
  --on-critical: var(--gray-950);
  --success: var(--green-300);
  --success-soft: var(--green-900);
  --tile-amber: var(--yellow-300);
  --tile-amber-bg: var(--yellow-900);
  --tile-blue: var(--blue-300);
  --tile-blue-bg: var(--blue-900);
  --tile-purple: var(--purple-300);
  --tile-purple-bg: var(--purple-900);
  --tile-red: var(--red-300);
  --tile-red-bg: var(--red-900);
  --tile-green: var(--green-300);
  --tile-green-bg: var(--green-900);
  --tile-orange: var(--orange-300);
  --tile-orange-bg: var(--orange-900);
  --chart-series-1: var(--blue-300);
  --chart-series-2: var(--gray-600);
  --chart-warning: var(--orange-300);
  --chart-track: var(--gray-800);
  --chart-cat-1: var(--blue-300);
  --chart-cat-2: var(--chart-amber-dark);
  --chart-cat-3: var(--chart-purple-dark);
  --chart-cat-4: var(--chart-teal-dark);
  --chart-cat-5: var(--chart-rose-dark);
  --chart-cat-6: var(--chart-slate-dark);
  --chart-seq-1: var(--blue-900);
  --chart-seq-2: var(--blue-800);
  --chart-seq-3: var(--blue-600);
  --chart-seq-4: var(--blue-300);
  --chart-seq-5: var(--blue-100);
  --chart-positive: var(--green-300);
  --chart-negative: var(--red-300);
  --chart-neutral: var(--gray-600);
  --chart-grid: var(--gray-825);
  --chart-axis: var(--gray-800);
  --chart-label: var(--gray-400);
  --scrim: rgba(0, 0, 0, 0.6);
  --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.55);
  --shadow-toast: 0 6px 18px rgba(0, 0, 0, 0.5);
}

[data-theme="ios-blue-light"] {
  color-scheme: light;
  --bg-canvas: var(--ios-canvas-light);
  --bg-nav: var(--ios-nav-light);
  --bg-card: var(--ios-card-light);
  --bg-sunken: var(--ios-sunken-light);
  --bg-hover: var(--ios-hover-light);
  --bg-selected: var(--ios-card-light);
  --border-default: var(--ios-border-light);
  --border-subtle: var(--ios-subtle-light);
  --border-control: var(--ios-control-light);
  --text-strong: var(--gray-1000);
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-700);
  --text-tertiary: var(--gray-650);
  --action-primary: var(--ios-blue-primary-light);
  --on-action-primary: var(--gray-0);
  --accent: var(--ios-blue-primary-light);
  --accent-soft: var(--ios-blue-soft-light);
  --on-accent-soft: var(--ios-blue-on-soft-light);
  --focus-ring: var(--ios-blue-primary-light);
  --warning: var(--orange-700);
  --warning-soft: var(--orange-50);
  --critical: var(--red-700);
  --critical-soft: var(--red-50);
  --on-critical: var(--gray-0);
  --success: var(--green-700);
  --success-soft: var(--green-50);
  --tile-amber: var(--yellow-700);
  --tile-amber-bg: var(--yellow-50);
  --tile-blue: var(--blue-600);
  --tile-blue-bg: var(--blue-50);
  --tile-purple: var(--purple-700);
  --tile-purple-bg: var(--purple-50);
  --tile-red: var(--red-700);
  --tile-red-bg: var(--red-50);
  --tile-green: var(--green-700);
  --tile-green-bg: var(--green-50);
  --tile-orange: var(--orange-700);
  --tile-orange-bg: var(--orange-50);
  --chart-series-1: var(--blue-600);
  --chart-series-2: var(--gray-550);
  --chart-warning: var(--orange-700);
  --chart-track: var(--gray-200);
  --chart-cat-1: var(--blue-600);
  --chart-cat-2: var(--chart-amber-light);
  --chart-cat-3: var(--chart-purple-light);
  --chart-cat-4: var(--chart-teal-light);
  --chart-cat-5: var(--chart-rose-light);
  --chart-cat-6: var(--chart-slate-light);
  --chart-seq-1: var(--blue-50);
  --chart-seq-2: var(--blue-100);
  --chart-seq-3: var(--blue-300);
  --chart-seq-4: var(--blue-600);
  --chart-seq-5: var(--blue-800);
  --chart-positive: var(--green-700);
  --chart-negative: var(--red-700);
  --chart-neutral: var(--gray-550);
  --chart-grid: var(--gray-100);
  --chart-axis: var(--gray-200);
  --chart-label: var(--gray-700);
  --scrim: rgba(0, 0, 0, 0.4);
  --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.14);
  --shadow-toast: 0 6px 18px rgba(0, 0, 0, 0.16);
}

[data-theme="ios-graphite-dark"] {
  color-scheme: dark;
  --bg-canvas: var(--ios-canvas-dark);
  --bg-nav: var(--ios-nav-dark);
  --bg-card: var(--ios-card-dark);
  --bg-sunken: var(--ios-sunken-dark);
  --bg-hover: var(--ios-hover-dark);
  --bg-selected: var(--ios-selected-dark);
  --border-default: var(--ios-border-dark);
  --border-subtle: var(--ios-subtle-dark);
  --border-control: var(--ios-control-dark);
  --text-strong: var(--gray-25);
  --text-primary: var(--gray-200);
  --text-secondary: var(--gray-400);
  --text-tertiary: var(--gray-500);
  --action-primary: var(--gray-25);
  --on-action-primary: var(--ios-canvas-dark);
  --accent: var(--ios-blue-primary-dark);
  --accent-soft: var(--ios-blue-soft-dark);
  --on-accent-soft: var(--ios-blue-on-soft-dark);
  --focus-ring: var(--ios-blue-primary-dark);
  --warning: var(--orange-300);
  --warning-soft: var(--orange-900);
  --critical: var(--red-300);
  --critical-soft: var(--red-900);
  --on-critical: var(--gray-950);
  --success: var(--green-300);
  --success-soft: var(--green-900);
  --tile-amber: var(--yellow-300);
  --tile-amber-bg: var(--yellow-900);
  --tile-blue: var(--blue-300);
  --tile-blue-bg: var(--blue-900);
  --tile-purple: var(--purple-300);
  --tile-purple-bg: var(--purple-900);
  --tile-red: var(--red-300);
  --tile-red-bg: var(--red-900);
  --tile-green: var(--green-300);
  --tile-green-bg: var(--green-900);
  --tile-orange: var(--orange-300);
  --tile-orange-bg: var(--orange-900);
  --chart-series-1: var(--blue-300);
  --chart-series-2: var(--gray-600);
  --chart-warning: var(--orange-300);
  --chart-track: var(--gray-800);
  --chart-cat-1: var(--blue-300);
  --chart-cat-2: var(--chart-amber-dark);
  --chart-cat-3: var(--chart-purple-dark);
  --chart-cat-4: var(--chart-teal-dark);
  --chart-cat-5: var(--chart-rose-dark);
  --chart-cat-6: var(--chart-slate-dark);
  --chart-seq-1: var(--blue-900);
  --chart-seq-2: var(--blue-800);
  --chart-seq-3: var(--blue-600);
  --chart-seq-4: var(--blue-300);
  --chart-seq-5: var(--blue-100);
  --chart-positive: var(--green-300);
  --chart-negative: var(--red-300);
  --chart-neutral: var(--gray-600);
  --chart-grid: var(--gray-825);
  --chart-axis: var(--gray-800);
  --chart-label: var(--gray-400);
  --scrim: rgba(0, 0, 0, 0.6);
  --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.55);
  --shadow-toast: 0 6px 18px rgba(0, 0, 0, 0.5);
}

[data-theme="ios-graphite-light"] {
  color-scheme: light;
  --bg-canvas: var(--ios-canvas-light);
  --bg-nav: var(--ios-nav-light);
  --bg-card: var(--ios-card-light);
  --bg-sunken: var(--ios-sunken-light);
  --bg-hover: var(--ios-hover-light);
  --bg-selected: var(--ios-card-light);
  --border-default: var(--ios-border-light);
  --border-subtle: var(--ios-subtle-light);
  --border-control: var(--ios-control-light);
  --text-strong: var(--gray-1000);
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-700);
  --text-tertiary: var(--gray-650);
  --action-primary: var(--ios-card-dark);
  --on-action-primary: var(--gray-0);
  --accent: var(--ios-blue-primary-light);
  --accent-soft: var(--ios-blue-soft-light);
  --on-accent-soft: var(--ios-blue-on-soft-light);
  --focus-ring: var(--ios-blue-primary-light);
  --warning: var(--orange-700);
  --warning-soft: var(--orange-50);
  --critical: var(--red-700);
  --critical-soft: var(--red-50);
  --on-critical: var(--gray-0);
  --success: var(--green-700);
  --success-soft: var(--green-50);
  --tile-amber: var(--yellow-700);
  --tile-amber-bg: var(--yellow-50);
  --tile-blue: var(--blue-600);
  --tile-blue-bg: var(--blue-50);
  --tile-purple: var(--purple-700);
  --tile-purple-bg: var(--purple-50);
  --tile-red: var(--red-700);
  --tile-red-bg: var(--red-50);
  --tile-green: var(--green-700);
  --tile-green-bg: var(--green-50);
  --tile-orange: var(--orange-700);
  --tile-orange-bg: var(--orange-50);
  --chart-series-1: var(--blue-600);
  --chart-series-2: var(--gray-550);
  --chart-warning: var(--orange-700);
  --chart-track: var(--gray-200);
  --chart-cat-1: var(--blue-600);
  --chart-cat-2: var(--chart-amber-light);
  --chart-cat-3: var(--chart-purple-light);
  --chart-cat-4: var(--chart-teal-light);
  --chart-cat-5: var(--chart-rose-light);
  --chart-cat-6: var(--chart-slate-light);
  --chart-seq-1: var(--blue-50);
  --chart-seq-2: var(--blue-100);
  --chart-seq-3: var(--blue-300);
  --chart-seq-4: var(--blue-600);
  --chart-seq-5: var(--blue-800);
  --chart-positive: var(--green-700);
  --chart-negative: var(--red-700);
  --chart-neutral: var(--gray-550);
  --chart-grid: var(--gray-100);
  --chart-axis: var(--gray-200);
  --chart-label: var(--gray-700);
  --scrim: rgba(0, 0, 0, 0.4);
  --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.14);
  --shadow-toast: 0 6px 18px rgba(0, 0, 0, 0.16);
}

[data-theme="ios-indigo-dark"] {
  color-scheme: dark;
  --bg-canvas: var(--ios-canvas-dark);
  --bg-nav: var(--ios-nav-dark);
  --bg-card: var(--ios-indigo-card-dark);
  --bg-sunken: var(--ios-indigo-sunken-dark);
  --bg-hover: var(--ios-indigo-hover-dark);
  --bg-selected: var(--ios-indigo-selected-dark);
  --border-default: var(--ios-border-dark);
  --border-subtle: var(--ios-subtle-dark);
  --border-control: var(--ios-control-dark);
  --text-strong: var(--gray-25);
  --text-primary: var(--gray-200);
  --text-secondary: var(--gray-400);
  --text-tertiary: var(--gray-500);
  --action-primary: var(--ios-indigo-primary-dark);
  --on-action-primary: var(--ios-indigo-on-primary-dark);
  --accent: var(--ios-indigo-primary-dark);
  --accent-soft: var(--ios-indigo-soft-dark);
  --on-accent-soft: var(--ios-indigo-on-soft-dark);
  --focus-ring: var(--ios-indigo-primary-dark);
  --warning: var(--orange-300);
  --warning-soft: var(--orange-900);
  --critical: var(--red-300);
  --critical-soft: var(--red-900);
  --on-critical: var(--gray-950);
  --success: var(--green-300);
  --success-soft: var(--green-900);
  --tile-amber: var(--yellow-300);
  --tile-amber-bg: var(--yellow-900);
  --tile-blue: var(--blue-300);
  --tile-blue-bg: var(--blue-900);
  --tile-purple: var(--purple-300);
  --tile-purple-bg: var(--purple-900);
  --tile-red: var(--red-300);
  --tile-red-bg: var(--red-900);
  --tile-green: var(--green-300);
  --tile-green-bg: var(--green-900);
  --tile-orange: var(--orange-300);
  --tile-orange-bg: var(--orange-900);
  --chart-series-1: var(--blue-300);
  --chart-series-2: var(--gray-600);
  --chart-warning: var(--orange-300);
  --chart-track: var(--gray-800);
  --chart-cat-1: var(--blue-300);
  --chart-cat-2: var(--chart-amber-dark);
  --chart-cat-3: var(--chart-purple-dark);
  --chart-cat-4: var(--chart-teal-dark);
  --chart-cat-5: var(--chart-rose-dark);
  --chart-cat-6: var(--chart-slate-dark);
  --chart-seq-1: var(--blue-900);
  --chart-seq-2: var(--blue-800);
  --chart-seq-3: var(--blue-600);
  --chart-seq-4: var(--blue-300);
  --chart-seq-5: var(--blue-100);
  --chart-positive: var(--green-300);
  --chart-negative: var(--red-300);
  --chart-neutral: var(--gray-600);
  --chart-grid: var(--gray-825);
  --chart-axis: var(--gray-800);
  --chart-label: var(--gray-400);
  --scrim: rgba(0, 0, 0, 0.6);
  --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.55);
  --shadow-toast: 0 6px 18px rgba(0, 0, 0, 0.5);
}

[data-theme="ios-indigo-light"] {
  color-scheme: light;
  --bg-canvas: var(--ios-canvas-light);
  --bg-nav: var(--ios-nav-light);
  --bg-card: var(--ios-card-light);
  --bg-sunken: var(--ios-sunken-light);
  --bg-hover: var(--ios-hover-light);
  --bg-selected: var(--ios-card-light);
  --border-default: var(--ios-border-light);
  --border-subtle: var(--ios-subtle-light);
  --border-control: var(--ios-control-light);
  --text-strong: var(--gray-1000);
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-700);
  --text-tertiary: var(--gray-650);
  --action-primary: var(--ios-indigo-primary-light);
  --on-action-primary: var(--gray-0);
  --accent: var(--ios-indigo-primary-light);
  --accent-soft: var(--ios-indigo-soft-light);
  --on-accent-soft: var(--ios-indigo-on-soft-light);
  --focus-ring: var(--ios-indigo-primary-light);
  --warning: var(--orange-700);
  --warning-soft: var(--orange-50);
  --critical: var(--red-700);
  --critical-soft: var(--red-50);
  --on-critical: var(--gray-0);
  --success: var(--green-700);
  --success-soft: var(--green-50);
  --tile-amber: var(--yellow-700);
  --tile-amber-bg: var(--yellow-50);
  --tile-blue: var(--blue-600);
  --tile-blue-bg: var(--blue-50);
  --tile-purple: var(--purple-700);
  --tile-purple-bg: var(--purple-50);
  --tile-red: var(--red-700);
  --tile-red-bg: var(--red-50);
  --tile-green: var(--green-700);
  --tile-green-bg: var(--green-50);
  --tile-orange: var(--orange-700);
  --tile-orange-bg: var(--orange-50);
  --chart-series-1: var(--blue-600);
  --chart-series-2: var(--gray-550);
  --chart-warning: var(--orange-700);
  --chart-track: var(--gray-200);
  --chart-cat-1: var(--blue-600);
  --chart-cat-2: var(--chart-amber-light);
  --chart-cat-3: var(--chart-purple-light);
  --chart-cat-4: var(--chart-teal-light);
  --chart-cat-5: var(--chart-rose-light);
  --chart-cat-6: var(--chart-slate-light);
  --chart-seq-1: var(--blue-50);
  --chart-seq-2: var(--blue-100);
  --chart-seq-3: var(--blue-300);
  --chart-seq-4: var(--blue-600);
  --chart-seq-5: var(--blue-800);
  --chart-positive: var(--green-700);
  --chart-negative: var(--red-700);
  --chart-neutral: var(--gray-550);
  --chart-grid: var(--gray-100);
  --chart-axis: var(--gray-200);
  --chart-label: var(--gray-700);
  --scrim: rgba(0, 0, 0, 0.4);
  --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.14);
  --shadow-toast: 0 6px 18px rgba(0, 0, 0, 0.16);
}

[data-theme="ios-teal-dark"] {
  color-scheme: dark;
  --bg-canvas: var(--ios-canvas-dark);
  --bg-nav: var(--ios-nav-dark);
  --bg-card: var(--ios-teal-card-dark);
  --bg-sunken: var(--ios-teal-sunken-dark);
  --bg-hover: var(--ios-teal-hover-dark);
  --bg-selected: var(--ios-teal-selected-dark);
  --border-default: var(--ios-border-dark);
  --border-subtle: var(--ios-subtle-dark);
  --border-control: var(--ios-control-dark);
  --text-strong: var(--gray-25);
  --text-primary: var(--gray-200);
  --text-secondary: var(--gray-400);
  --text-tertiary: var(--gray-500);
  --action-primary: var(--ios-teal-primary-dark);
  --on-action-primary: var(--ios-teal-on-primary-dark);
  --accent: var(--ios-teal-primary-dark);
  --accent-soft: var(--ios-teal-soft-dark);
  --on-accent-soft: var(--ios-teal-on-soft-dark);
  --focus-ring: var(--ios-teal-primary-dark);
  --warning: var(--orange-300);
  --warning-soft: var(--orange-900);
  --critical: var(--red-300);
  --critical-soft: var(--red-900);
  --on-critical: var(--gray-950);
  --success: var(--green-300);
  --success-soft: var(--green-900);
  --tile-amber: var(--yellow-300);
  --tile-amber-bg: var(--yellow-900);
  --tile-blue: var(--blue-300);
  --tile-blue-bg: var(--blue-900);
  --tile-purple: var(--purple-300);
  --tile-purple-bg: var(--purple-900);
  --tile-red: var(--red-300);
  --tile-red-bg: var(--red-900);
  --tile-green: var(--green-300);
  --tile-green-bg: var(--green-900);
  --tile-orange: var(--orange-300);
  --tile-orange-bg: var(--orange-900);
  --chart-series-1: var(--blue-300);
  --chart-series-2: var(--gray-600);
  --chart-warning: var(--orange-300);
  --chart-track: var(--gray-800);
  --chart-cat-1: var(--blue-300);
  --chart-cat-2: var(--chart-amber-dark);
  --chart-cat-3: var(--chart-purple-dark);
  --chart-cat-4: var(--chart-teal-dark);
  --chart-cat-5: var(--chart-rose-dark);
  --chart-cat-6: var(--chart-slate-dark);
  --chart-seq-1: var(--blue-900);
  --chart-seq-2: var(--blue-800);
  --chart-seq-3: var(--blue-600);
  --chart-seq-4: var(--blue-300);
  --chart-seq-5: var(--blue-100);
  --chart-positive: var(--green-300);
  --chart-negative: var(--red-300);
  --chart-neutral: var(--gray-600);
  --chart-grid: var(--gray-825);
  --chart-axis: var(--gray-800);
  --chart-label: var(--gray-400);
  --scrim: rgba(0, 0, 0, 0.6);
  --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.55);
  --shadow-toast: 0 6px 18px rgba(0, 0, 0, 0.5);
}

[data-theme="ios-teal-light"] {
  color-scheme: light;
  --bg-canvas: var(--ios-canvas-light);
  --bg-nav: var(--ios-nav-light);
  --bg-card: var(--ios-card-light);
  --bg-sunken: var(--ios-sunken-light);
  --bg-hover: var(--ios-hover-light);
  --bg-selected: var(--ios-card-light);
  --border-default: var(--ios-border-light);
  --border-subtle: var(--ios-subtle-light);
  --border-control: var(--ios-control-light);
  --text-strong: var(--gray-1000);
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-700);
  --text-tertiary: var(--gray-650);
  --action-primary: var(--ios-teal-primary-light);
  --on-action-primary: var(--gray-0);
  --accent: var(--ios-teal-primary-light);
  --accent-soft: var(--ios-teal-soft-light);
  --on-accent-soft: var(--ios-teal-on-soft-light);
  --focus-ring: var(--ios-teal-primary-light);
  --warning: var(--orange-700);
  --warning-soft: var(--orange-50);
  --critical: var(--red-700);
  --critical-soft: var(--red-50);
  --on-critical: var(--gray-0);
  --success: var(--green-700);
  --success-soft: var(--green-50);
  --tile-amber: var(--yellow-700);
  --tile-amber-bg: var(--yellow-50);
  --tile-blue: var(--blue-600);
  --tile-blue-bg: var(--blue-50);
  --tile-purple: var(--purple-700);
  --tile-purple-bg: var(--purple-50);
  --tile-red: var(--red-700);
  --tile-red-bg: var(--red-50);
  --tile-green: var(--green-700);
  --tile-green-bg: var(--green-50);
  --tile-orange: var(--orange-700);
  --tile-orange-bg: var(--orange-50);
  --chart-series-1: var(--blue-600);
  --chart-series-2: var(--gray-550);
  --chart-warning: var(--orange-700);
  --chart-track: var(--gray-200);
  --chart-cat-1: var(--blue-600);
  --chart-cat-2: var(--chart-amber-light);
  --chart-cat-3: var(--chart-purple-light);
  --chart-cat-4: var(--chart-teal-light);
  --chart-cat-5: var(--chart-rose-light);
  --chart-cat-6: var(--chart-slate-light);
  --chart-seq-1: var(--blue-50);
  --chart-seq-2: var(--blue-100);
  --chart-seq-3: var(--blue-300);
  --chart-seq-4: var(--blue-600);
  --chart-seq-5: var(--blue-800);
  --chart-positive: var(--green-700);
  --chart-negative: var(--red-700);
  --chart-neutral: var(--gray-550);
  --chart-grid: var(--gray-100);
  --chart-axis: var(--gray-200);
  --chart-label: var(--gray-700);
  --scrim: rgba(0, 0, 0, 0.4);
  --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.14);
  --shadow-toast: 0 6px 18px rgba(0, 0, 0, 0.16);
}

[data-ds="material"], [data-theme^="m3-"] {
  --font-sans: Roboto, 'Noto Sans', Arial, sans-serif;
  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --size-touch: 48px;
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
}

[data-ds="ios"], [data-theme^="ios-"] {
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', 'Helvetica Neue', sans-serif;
  --radius-sm: 7px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --size-touch: 44px;
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --ease-out: cubic-bezier(0.32, 0.72, 0, 1);
}

/* Opt-in system theme: dark by default, follows OS preference when set to light */
[data-theme="system"] {
  color-scheme: dark;
  --bg-canvas: var(--gray-950);
  --bg-nav: var(--gray-925);
  --bg-card: var(--gray-900);
  --bg-sunken: var(--gray-975);
  --bg-hover: var(--gray-850);
  --bg-selected: var(--gray-750);
  --border-default: var(--gray-800);
  --border-subtle: var(--gray-825);
  --border-control: var(--gray-550);
  --text-strong: var(--gray-25);
  --text-primary: var(--gray-200);
  --text-secondary: var(--gray-400);
  --text-tertiary: var(--gray-500);
  --action-primary: var(--gray-200);
  --on-action-primary: var(--gray-950);
  --accent: var(--blue-300);
  --accent-soft: var(--blue-900);
  --on-accent-soft: var(--blue-100);
  --focus-ring: var(--gray-200);
  --warning: var(--orange-300);
  --warning-soft: var(--orange-900);
  --critical: var(--red-300);
  --critical-soft: var(--red-900);
  --on-critical: var(--gray-950);
  --success: var(--green-300);
  --success-soft: var(--green-900);
  --tile-amber: var(--yellow-300);
  --tile-amber-bg: var(--yellow-900);
  --tile-blue: var(--blue-300);
  --tile-blue-bg: var(--blue-900);
  --tile-purple: var(--purple-300);
  --tile-purple-bg: var(--purple-900);
  --tile-red: var(--red-300);
  --tile-red-bg: var(--red-900);
  --tile-green: var(--green-300);
  --tile-green-bg: var(--green-900);
  --tile-orange: var(--orange-300);
  --tile-orange-bg: var(--orange-900);
  --chart-series-1: var(--blue-300);
  --chart-series-2: var(--gray-600);
  --chart-warning: var(--orange-300);
  --chart-track: var(--gray-800);
  --chart-cat-1: var(--blue-300);
  --chart-cat-2: var(--chart-amber-dark);
  --chart-cat-3: var(--chart-purple-dark);
  --chart-cat-4: var(--chart-teal-dark);
  --chart-cat-5: var(--chart-rose-dark);
  --chart-cat-6: var(--chart-slate-dark);
  --chart-seq-1: var(--blue-900);
  --chart-seq-2: var(--blue-800);
  --chart-seq-3: var(--blue-600);
  --chart-seq-4: var(--blue-300);
  --chart-seq-5: var(--blue-100);
  --chart-positive: var(--green-300);
  --chart-negative: var(--red-300);
  --chart-neutral: var(--gray-600);
  --chart-grid: var(--gray-825);
  --chart-axis: var(--gray-800);
  --chart-label: var(--gray-400);
  --scrim: rgba(0, 0, 0, 0.6);
  --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.55);
  --shadow-toast: 0 6px 18px rgba(0, 0, 0, 0.5);
}

@media (prefers-color-scheme: light) {
  [data-theme="system"] {
    color-scheme: light;
    --bg-canvas: var(--gray-0);
    --bg-nav: var(--gray-50);
    --bg-card: var(--gray-0);
    --bg-sunken: var(--gray-100);
    --bg-hover: var(--gray-150);
    --bg-selected: var(--gray-0);
    --border-default: var(--gray-200);
    --border-subtle: var(--gray-100);
    --border-control: var(--gray-550);
    --text-strong: var(--gray-1000);
    --text-primary: var(--gray-900);
    --text-secondary: var(--gray-700);
    --text-tertiary: var(--gray-650);
    --action-primary: var(--gray-900);
    --on-action-primary: var(--gray-0);
    --accent: var(--blue-600);
    --accent-soft: var(--blue-50);
    --on-accent-soft: var(--blue-800);
    --focus-ring: var(--gray-900);
    --warning: var(--orange-700);
    --warning-soft: var(--orange-50);
    --critical: var(--red-700);
    --critical-soft: var(--red-50);
    --on-critical: var(--gray-0);
    --success: var(--green-700);
    --success-soft: var(--green-50);
    --tile-amber: var(--yellow-700);
    --tile-amber-bg: var(--yellow-50);
    --tile-blue: var(--blue-600);
    --tile-blue-bg: var(--blue-50);
    --tile-purple: var(--purple-700);
    --tile-purple-bg: var(--purple-50);
    --tile-red: var(--red-700);
    --tile-red-bg: var(--red-50);
    --tile-green: var(--green-700);
    --tile-green-bg: var(--green-50);
    --tile-orange: var(--orange-700);
    --tile-orange-bg: var(--orange-50);
    --chart-series-1: var(--blue-600);
    --chart-series-2: var(--gray-550);
    --chart-warning: var(--orange-700);
    --chart-track: var(--gray-200);
    --chart-cat-1: var(--blue-600);
    --chart-cat-2: var(--chart-amber-light);
    --chart-cat-3: var(--chart-purple-light);
    --chart-cat-4: var(--chart-teal-light);
    --chart-cat-5: var(--chart-rose-light);
    --chart-cat-6: var(--chart-slate-light);
    --chart-seq-1: var(--blue-50);
    --chart-seq-2: var(--blue-100);
    --chart-seq-3: var(--blue-300);
    --chart-seq-4: var(--blue-600);
    --chart-seq-5: var(--blue-800);
    --chart-positive: var(--green-700);
    --chart-negative: var(--red-700);
    --chart-neutral: var(--gray-550);
    --chart-grid: var(--gray-100);
    --chart-axis: var(--gray-200);
    --chart-label: var(--gray-700);
    --scrim: rgba(0, 0, 0, 0.4);
    --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.14);
    --shadow-toast: 0 6px 18px rgba(0, 0, 0, 0.16);
  }
}

[data-theme="themis-system"] {
  color-scheme: dark;
  --bg-canvas: var(--gray-950);
  --bg-nav: var(--gray-925);
  --bg-card: var(--gray-900);
  --bg-sunken: var(--gray-975);
  --bg-hover: var(--gray-850);
  --bg-selected: var(--gray-750);
  --border-default: var(--gray-800);
  --border-subtle: var(--gray-825);
  --border-control: var(--yellow-400);
  --text-strong: var(--gray-25);
  --text-primary: var(--gray-200);
  --text-secondary: var(--gray-400);
  --text-tertiary: var(--gray-500);
  --action-primary: var(--yellow-400);
  --on-action-primary: var(--yellow-950);
  --accent: var(--yellow-400);
  --accent-soft: var(--yellow-900);
  --on-accent-soft: var(--yellow-100);
  --focus-ring: var(--yellow-400);
  --warning: var(--orange-300);
  --warning-soft: var(--orange-900);
  --critical: var(--red-300);
  --critical-soft: var(--red-900);
  --on-critical: var(--gray-950);
  --success: var(--green-300);
  --success-soft: var(--green-900);
  --tile-amber: var(--yellow-300);
  --tile-amber-bg: var(--yellow-900);
  --tile-blue: var(--blue-300);
  --tile-blue-bg: var(--blue-900);
  --tile-purple: var(--purple-300);
  --tile-purple-bg: var(--purple-900);
  --tile-red: var(--red-300);
  --tile-red-bg: var(--red-900);
  --tile-green: var(--green-300);
  --tile-green-bg: var(--green-900);
  --tile-orange: var(--orange-300);
  --tile-orange-bg: var(--orange-900);
  --chart-series-1: var(--blue-300);
  --chart-series-2: var(--gray-600);
  --chart-warning: var(--orange-300);
  --chart-track: var(--gray-800);
  --chart-cat-1: var(--blue-300);
  --chart-cat-2: var(--chart-amber-dark);
  --chart-cat-3: var(--chart-purple-dark);
  --chart-cat-4: var(--chart-teal-dark);
  --chart-cat-5: var(--chart-rose-dark);
  --chart-cat-6: var(--chart-slate-dark);
  --chart-seq-1: var(--blue-900);
  --chart-seq-2: var(--blue-800);
  --chart-seq-3: var(--blue-600);
  --chart-seq-4: var(--blue-300);
  --chart-seq-5: var(--blue-100);
  --chart-positive: var(--green-300);
  --chart-negative: var(--red-300);
  --chart-neutral: var(--gray-600);
  --chart-grid: var(--gray-825);
  --chart-axis: var(--gray-800);
  --chart-label: var(--gray-400);
  --scrim: rgba(0, 0, 0, 0.6);
  --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.55);
  --shadow-toast: 0 6px 18px rgba(0, 0, 0, 0.5);
}

@media (prefers-color-scheme: light) {
  [data-theme="themis-system"] {
    color-scheme: light;
    --bg-canvas: var(--gray-0);
    --bg-nav: var(--gray-50);
    --bg-card: var(--gray-0);
    --bg-sunken: var(--gray-100);
    --bg-hover: var(--gray-150);
    --bg-selected: var(--gray-0);
    --border-default: var(--gray-200);
    --border-subtle: var(--gray-100);
    --border-control: var(--yellow-600);
    --text-strong: var(--gray-1000);
    --text-primary: var(--gray-900);
    --text-secondary: var(--gray-700);
    --text-tertiary: var(--gray-650);
    --action-primary: var(--yellow-700);
    --on-action-primary: var(--gray-0);
    --accent: var(--yellow-700);
    --accent-soft: var(--yellow-50);
    --on-accent-soft: var(--yellow-800);
    --focus-ring: var(--yellow-700);
    --warning: var(--orange-700);
    --warning-soft: var(--orange-50);
    --critical: var(--red-700);
    --critical-soft: var(--red-50);
    --on-critical: var(--gray-0);
    --success: var(--green-700);
    --success-soft: var(--green-50);
    --tile-amber: var(--yellow-700);
    --tile-amber-bg: var(--yellow-50);
    --tile-blue: var(--blue-600);
    --tile-blue-bg: var(--blue-50);
    --tile-purple: var(--purple-700);
    --tile-purple-bg: var(--purple-50);
    --tile-red: var(--red-700);
    --tile-red-bg: var(--red-50);
    --tile-green: var(--green-700);
    --tile-green-bg: var(--green-50);
    --tile-orange: var(--orange-700);
    --tile-orange-bg: var(--orange-50);
    --chart-series-1: var(--blue-600);
    --chart-series-2: var(--gray-550);
    --chart-warning: var(--orange-700);
    --chart-track: var(--gray-200);
    --chart-cat-1: var(--blue-600);
    --chart-cat-2: var(--chart-amber-light);
    --chart-cat-3: var(--chart-purple-light);
    --chart-cat-4: var(--chart-teal-light);
    --chart-cat-5: var(--chart-rose-light);
    --chart-cat-6: var(--chart-slate-light);
    --chart-seq-1: var(--blue-50);
    --chart-seq-2: var(--blue-100);
    --chart-seq-3: var(--blue-300);
    --chart-seq-4: var(--blue-600);
    --chart-seq-5: var(--blue-800);
    --chart-positive: var(--green-700);
    --chart-negative: var(--red-700);
    --chart-neutral: var(--gray-550);
    --chart-grid: var(--gray-100);
    --chart-axis: var(--gray-200);
    --chart-label: var(--gray-700);
    --scrim: rgba(0, 0, 0, 0.4);
    --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.14);
    --shadow-toast: 0 6px 18px rgba(0, 0, 0, 0.16);
  }
}

[data-theme="m3-blue-system"] {
  color-scheme: dark;
  --bg-canvas: var(--m3-blue-canvas-dark);
  --bg-nav: var(--m3-blue-nav-dark);
  --bg-card: var(--m3-blue-card-dark);
  --bg-sunken: var(--m3-blue-sunken-dark);
  --bg-hover: var(--m3-blue-hover-dark);
  --bg-selected: var(--m3-blue-selected-dark);
  --border-default: var(--m3-blue-border-dark);
  --border-subtle: var(--m3-blue-subtle-dark);
  --border-control: var(--m3-blue-control-dark);
  --text-strong: var(--gray-25);
  --text-primary: var(--gray-200);
  --text-secondary: var(--gray-400);
  --text-tertiary: var(--gray-500);
  --action-primary: var(--m3-blue-primary-dark);
  --on-action-primary: var(--m3-blue-on-primary-dark);
  --accent: var(--m3-blue-primary-dark);
  --accent-soft: var(--m3-blue-soft-dark);
  --on-accent-soft: var(--m3-blue-on-soft-dark);
  --focus-ring: var(--m3-blue-primary-dark);
  --warning: var(--orange-300);
  --warning-soft: var(--orange-900);
  --critical: var(--red-300);
  --critical-soft: var(--red-900);
  --on-critical: var(--gray-950);
  --success: var(--green-300);
  --success-soft: var(--green-900);
  --tile-amber: var(--yellow-300);
  --tile-amber-bg: var(--yellow-900);
  --tile-blue: var(--blue-300);
  --tile-blue-bg: var(--blue-900);
  --tile-purple: var(--purple-300);
  --tile-purple-bg: var(--purple-900);
  --tile-red: var(--red-300);
  --tile-red-bg: var(--red-900);
  --tile-green: var(--green-300);
  --tile-green-bg: var(--green-900);
  --tile-orange: var(--orange-300);
  --tile-orange-bg: var(--orange-900);
  --chart-series-1: var(--blue-300);
  --chart-series-2: var(--gray-600);
  --chart-warning: var(--orange-300);
  --chart-track: var(--gray-800);
  --chart-cat-1: var(--blue-300);
  --chart-cat-2: var(--chart-amber-dark);
  --chart-cat-3: var(--chart-purple-dark);
  --chart-cat-4: var(--chart-teal-dark);
  --chart-cat-5: var(--chart-rose-dark);
  --chart-cat-6: var(--chart-slate-dark);
  --chart-seq-1: var(--blue-900);
  --chart-seq-2: var(--blue-800);
  --chart-seq-3: var(--blue-600);
  --chart-seq-4: var(--blue-300);
  --chart-seq-5: var(--blue-100);
  --chart-positive: var(--green-300);
  --chart-negative: var(--red-300);
  --chart-neutral: var(--gray-600);
  --chart-grid: var(--gray-825);
  --chart-axis: var(--gray-800);
  --chart-label: var(--gray-400);
  --scrim: rgba(0, 0, 0, 0.6);
  --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.55);
  --shadow-toast: 0 6px 18px rgba(0, 0, 0, 0.5);
}

@media (prefers-color-scheme: light) {
  [data-theme="m3-blue-system"] {
    color-scheme: light;
    --bg-canvas: var(--m3-blue-canvas-light);
    --bg-nav: var(--m3-blue-nav-light);
    --bg-card: var(--m3-blue-card-light);
    --bg-sunken: var(--m3-blue-sunken-light);
    --bg-hover: var(--m3-blue-hover-light);
    --bg-selected: var(--m3-blue-selected-light);
    --border-default: var(--m3-blue-border-light);
    --border-subtle: var(--m3-blue-subtle-light);
    --border-control: var(--m3-blue-control-light);
    --text-strong: var(--gray-1000);
    --text-primary: var(--gray-900);
    --text-secondary: var(--gray-700);
    --text-tertiary: var(--gray-650);
    --action-primary: var(--m3-blue-primary-light);
    --on-action-primary: var(--gray-0);
    --accent: var(--m3-blue-primary-light);
    --accent-soft: var(--m3-blue-soft-light);
    --on-accent-soft: var(--m3-blue-on-soft-light);
    --focus-ring: var(--m3-blue-primary-light);
    --warning: var(--orange-700);
    --warning-soft: var(--orange-50);
    --critical: var(--red-700);
    --critical-soft: var(--red-50);
    --on-critical: var(--gray-0);
    --success: var(--green-700);
    --success-soft: var(--green-50);
    --tile-amber: var(--yellow-700);
    --tile-amber-bg: var(--yellow-50);
    --tile-blue: var(--blue-600);
    --tile-blue-bg: var(--blue-50);
    --tile-purple: var(--purple-700);
    --tile-purple-bg: var(--purple-50);
    --tile-red: var(--red-700);
    --tile-red-bg: var(--red-50);
    --tile-green: var(--green-700);
    --tile-green-bg: var(--green-50);
    --tile-orange: var(--orange-700);
    --tile-orange-bg: var(--orange-50);
    --chart-series-1: var(--blue-600);
    --chart-series-2: var(--gray-550);
    --chart-warning: var(--orange-700);
    --chart-track: var(--gray-200);
    --chart-cat-1: var(--blue-600);
    --chart-cat-2: var(--chart-amber-light);
    --chart-cat-3: var(--chart-purple-light);
    --chart-cat-4: var(--chart-teal-light);
    --chart-cat-5: var(--chart-rose-light);
    --chart-cat-6: var(--chart-slate-light);
    --chart-seq-1: var(--blue-50);
    --chart-seq-2: var(--blue-100);
    --chart-seq-3: var(--blue-300);
    --chart-seq-4: var(--blue-600);
    --chart-seq-5: var(--blue-800);
    --chart-positive: var(--green-700);
    --chart-negative: var(--red-700);
    --chart-neutral: var(--gray-550);
    --chart-grid: var(--gray-100);
    --chart-axis: var(--gray-200);
    --chart-label: var(--gray-700);
    --scrim: rgba(0, 0, 0, 0.4);
    --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.14);
    --shadow-toast: 0 6px 18px rgba(0, 0, 0, 0.16);
  }
}

[data-theme="m3-teal-system"] {
  color-scheme: dark;
  --bg-canvas: var(--m3-teal-canvas-dark);
  --bg-nav: var(--m3-teal-nav-dark);
  --bg-card: var(--m3-teal-card-dark);
  --bg-sunken: var(--m3-teal-sunken-dark);
  --bg-hover: var(--m3-teal-hover-dark);
  --bg-selected: var(--m3-teal-selected-dark);
  --border-default: var(--m3-teal-border-dark);
  --border-subtle: var(--m3-teal-subtle-dark);
  --border-control: var(--m3-teal-control-dark);
  --text-strong: var(--gray-25);
  --text-primary: var(--gray-200);
  --text-secondary: var(--gray-400);
  --text-tertiary: var(--gray-500);
  --action-primary: var(--m3-teal-primary-dark);
  --on-action-primary: var(--m3-teal-on-primary-dark);
  --accent: var(--m3-teal-primary-dark);
  --accent-soft: var(--m3-teal-soft-dark);
  --on-accent-soft: var(--m3-teal-on-soft-dark);
  --focus-ring: var(--m3-teal-primary-dark);
  --warning: var(--orange-300);
  --warning-soft: var(--orange-900);
  --critical: var(--red-300);
  --critical-soft: var(--red-900);
  --on-critical: var(--gray-950);
  --success: var(--green-300);
  --success-soft: var(--green-900);
  --tile-amber: var(--yellow-300);
  --tile-amber-bg: var(--yellow-900);
  --tile-blue: var(--blue-300);
  --tile-blue-bg: var(--blue-900);
  --tile-purple: var(--purple-300);
  --tile-purple-bg: var(--purple-900);
  --tile-red: var(--red-300);
  --tile-red-bg: var(--red-900);
  --tile-green: var(--green-300);
  --tile-green-bg: var(--green-900);
  --tile-orange: var(--orange-300);
  --tile-orange-bg: var(--orange-900);
  --chart-series-1: var(--blue-300);
  --chart-series-2: var(--gray-600);
  --chart-warning: var(--orange-300);
  --chart-track: var(--gray-800);
  --chart-cat-1: var(--blue-300);
  --chart-cat-2: var(--chart-amber-dark);
  --chart-cat-3: var(--chart-purple-dark);
  --chart-cat-4: var(--chart-teal-dark);
  --chart-cat-5: var(--chart-rose-dark);
  --chart-cat-6: var(--chart-slate-dark);
  --chart-seq-1: var(--blue-900);
  --chart-seq-2: var(--blue-800);
  --chart-seq-3: var(--blue-600);
  --chart-seq-4: var(--blue-300);
  --chart-seq-5: var(--blue-100);
  --chart-positive: var(--green-300);
  --chart-negative: var(--red-300);
  --chart-neutral: var(--gray-600);
  --chart-grid: var(--gray-825);
  --chart-axis: var(--gray-800);
  --chart-label: var(--gray-400);
  --scrim: rgba(0, 0, 0, 0.6);
  --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.55);
  --shadow-toast: 0 6px 18px rgba(0, 0, 0, 0.5);
}

@media (prefers-color-scheme: light) {
  [data-theme="m3-teal-system"] {
    color-scheme: light;
    --bg-canvas: var(--m3-teal-canvas-light);
    --bg-nav: var(--m3-teal-nav-light);
    --bg-card: var(--m3-teal-card-light);
    --bg-sunken: var(--m3-teal-sunken-light);
    --bg-hover: var(--m3-teal-hover-light);
    --bg-selected: var(--m3-teal-selected-light);
    --border-default: var(--m3-teal-border-light);
    --border-subtle: var(--m3-teal-subtle-light);
    --border-control: var(--m3-teal-control-light);
    --text-strong: var(--gray-1000);
    --text-primary: var(--gray-900);
    --text-secondary: var(--gray-700);
    --text-tertiary: var(--gray-650);
    --action-primary: var(--m3-teal-primary-light);
    --on-action-primary: var(--gray-0);
    --accent: var(--m3-teal-primary-light);
    --accent-soft: var(--m3-teal-soft-light);
    --on-accent-soft: var(--m3-teal-on-soft-light);
    --focus-ring: var(--m3-teal-primary-light);
    --warning: var(--orange-700);
    --warning-soft: var(--orange-50);
    --critical: var(--red-700);
    --critical-soft: var(--red-50);
    --on-critical: var(--gray-0);
    --success: var(--green-700);
    --success-soft: var(--green-50);
    --tile-amber: var(--yellow-700);
    --tile-amber-bg: var(--yellow-50);
    --tile-blue: var(--blue-600);
    --tile-blue-bg: var(--blue-50);
    --tile-purple: var(--purple-700);
    --tile-purple-bg: var(--purple-50);
    --tile-red: var(--red-700);
    --tile-red-bg: var(--red-50);
    --tile-green: var(--green-700);
    --tile-green-bg: var(--green-50);
    --tile-orange: var(--orange-700);
    --tile-orange-bg: var(--orange-50);
    --chart-series-1: var(--blue-600);
    --chart-series-2: var(--gray-550);
    --chart-warning: var(--orange-700);
    --chart-track: var(--gray-200);
    --chart-cat-1: var(--blue-600);
    --chart-cat-2: var(--chart-amber-light);
    --chart-cat-3: var(--chart-purple-light);
    --chart-cat-4: var(--chart-teal-light);
    --chart-cat-5: var(--chart-rose-light);
    --chart-cat-6: var(--chart-slate-light);
    --chart-seq-1: var(--blue-50);
    --chart-seq-2: var(--blue-100);
    --chart-seq-3: var(--blue-300);
    --chart-seq-4: var(--blue-600);
    --chart-seq-5: var(--blue-800);
    --chart-positive: var(--green-700);
    --chart-negative: var(--red-700);
    --chart-neutral: var(--gray-550);
    --chart-grid: var(--gray-100);
    --chart-axis: var(--gray-200);
    --chart-label: var(--gray-700);
    --scrim: rgba(0, 0, 0, 0.4);
    --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.14);
    --shadow-toast: 0 6px 18px rgba(0, 0, 0, 0.16);
  }
}

[data-theme="m3-emerald-system"] {
  color-scheme: dark;
  --bg-canvas: var(--m3-emerald-canvas-dark);
  --bg-nav: var(--m3-emerald-nav-dark);
  --bg-card: var(--m3-emerald-card-dark);
  --bg-sunken: var(--m3-emerald-sunken-dark);
  --bg-hover: var(--m3-emerald-hover-dark);
  --bg-selected: var(--m3-emerald-selected-dark);
  --border-default: var(--m3-emerald-border-dark);
  --border-subtle: var(--m3-emerald-subtle-dark);
  --border-control: var(--m3-emerald-control-dark);
  --text-strong: var(--gray-25);
  --text-primary: var(--gray-200);
  --text-secondary: var(--gray-400);
  --text-tertiary: var(--gray-500);
  --action-primary: var(--m3-emerald-primary-dark);
  --on-action-primary: var(--m3-emerald-on-primary-dark);
  --accent: var(--m3-emerald-primary-dark);
  --accent-soft: var(--m3-emerald-soft-dark);
  --on-accent-soft: var(--m3-emerald-on-soft-dark);
  --focus-ring: var(--m3-emerald-primary-dark);
  --warning: var(--orange-300);
  --warning-soft: var(--orange-900);
  --critical: var(--red-300);
  --critical-soft: var(--red-900);
  --on-critical: var(--gray-950);
  --success: var(--green-300);
  --success-soft: var(--green-900);
  --tile-amber: var(--yellow-300);
  --tile-amber-bg: var(--yellow-900);
  --tile-blue: var(--blue-300);
  --tile-blue-bg: var(--blue-900);
  --tile-purple: var(--purple-300);
  --tile-purple-bg: var(--purple-900);
  --tile-red: var(--red-300);
  --tile-red-bg: var(--red-900);
  --tile-green: var(--green-300);
  --tile-green-bg: var(--green-900);
  --tile-orange: var(--orange-300);
  --tile-orange-bg: var(--orange-900);
  --chart-series-1: var(--blue-300);
  --chart-series-2: var(--gray-600);
  --chart-warning: var(--orange-300);
  --chart-track: var(--gray-800);
  --chart-cat-1: var(--blue-300);
  --chart-cat-2: var(--chart-amber-dark);
  --chart-cat-3: var(--chart-purple-dark);
  --chart-cat-4: var(--chart-teal-dark);
  --chart-cat-5: var(--chart-rose-dark);
  --chart-cat-6: var(--chart-slate-dark);
  --chart-seq-1: var(--blue-900);
  --chart-seq-2: var(--blue-800);
  --chart-seq-3: var(--blue-600);
  --chart-seq-4: var(--blue-300);
  --chart-seq-5: var(--blue-100);
  --chart-positive: var(--green-300);
  --chart-negative: var(--red-300);
  --chart-neutral: var(--gray-600);
  --chart-grid: var(--gray-825);
  --chart-axis: var(--gray-800);
  --chart-label: var(--gray-400);
  --scrim: rgba(0, 0, 0, 0.6);
  --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.55);
  --shadow-toast: 0 6px 18px rgba(0, 0, 0, 0.5);
}

@media (prefers-color-scheme: light) {
  [data-theme="m3-emerald-system"] {
    color-scheme: light;
    --bg-canvas: var(--m3-emerald-canvas-light);
    --bg-nav: var(--m3-emerald-nav-light);
    --bg-card: var(--m3-emerald-card-light);
    --bg-sunken: var(--m3-emerald-sunken-light);
    --bg-hover: var(--m3-emerald-hover-light);
    --bg-selected: var(--m3-emerald-selected-light);
    --border-default: var(--m3-emerald-border-light);
    --border-subtle: var(--m3-emerald-subtle-light);
    --border-control: var(--m3-emerald-control-light);
    --text-strong: var(--gray-1000);
    --text-primary: var(--gray-900);
    --text-secondary: var(--gray-700);
    --text-tertiary: var(--gray-650);
    --action-primary: var(--m3-emerald-primary-light);
    --on-action-primary: var(--gray-0);
    --accent: var(--m3-emerald-primary-light);
    --accent-soft: var(--m3-emerald-soft-light);
    --on-accent-soft: var(--m3-emerald-on-soft-light);
    --focus-ring: var(--m3-emerald-primary-light);
    --warning: var(--orange-700);
    --warning-soft: var(--orange-50);
    --critical: var(--red-700);
    --critical-soft: var(--red-50);
    --on-critical: var(--gray-0);
    --success: var(--green-700);
    --success-soft: var(--green-50);
    --tile-amber: var(--yellow-700);
    --tile-amber-bg: var(--yellow-50);
    --tile-blue: var(--blue-600);
    --tile-blue-bg: var(--blue-50);
    --tile-purple: var(--purple-700);
    --tile-purple-bg: var(--purple-50);
    --tile-red: var(--red-700);
    --tile-red-bg: var(--red-50);
    --tile-green: var(--green-700);
    --tile-green-bg: var(--green-50);
    --tile-orange: var(--orange-700);
    --tile-orange-bg: var(--orange-50);
    --chart-series-1: var(--blue-600);
    --chart-series-2: var(--gray-550);
    --chart-warning: var(--orange-700);
    --chart-track: var(--gray-200);
    --chart-cat-1: var(--blue-600);
    --chart-cat-2: var(--chart-amber-light);
    --chart-cat-3: var(--chart-purple-light);
    --chart-cat-4: var(--chart-teal-light);
    --chart-cat-5: var(--chart-rose-light);
    --chart-cat-6: var(--chart-slate-light);
    --chart-seq-1: var(--blue-50);
    --chart-seq-2: var(--blue-100);
    --chart-seq-3: var(--blue-300);
    --chart-seq-4: var(--blue-600);
    --chart-seq-5: var(--blue-800);
    --chart-positive: var(--green-700);
    --chart-negative: var(--red-700);
    --chart-neutral: var(--gray-550);
    --chart-grid: var(--gray-100);
    --chart-axis: var(--gray-200);
    --chart-label: var(--gray-700);
    --scrim: rgba(0, 0, 0, 0.4);
    --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.14);
    --shadow-toast: 0 6px 18px rgba(0, 0, 0, 0.16);
  }
}

[data-theme="m3-slate-system"] {
  color-scheme: dark;
  --bg-canvas: var(--m3-slate-canvas-dark);
  --bg-nav: var(--m3-slate-nav-dark);
  --bg-card: var(--m3-slate-card-dark);
  --bg-sunken: var(--m3-slate-sunken-dark);
  --bg-hover: var(--m3-slate-hover-dark);
  --bg-selected: var(--m3-slate-selected-dark);
  --border-default: var(--m3-slate-border-dark);
  --border-subtle: var(--m3-slate-subtle-dark);
  --border-control: var(--m3-slate-control-dark);
  --text-strong: var(--gray-25);
  --text-primary: var(--gray-200);
  --text-secondary: var(--gray-400);
  --text-tertiary: var(--gray-500);
  --action-primary: var(--m3-slate-primary-dark);
  --on-action-primary: var(--m3-slate-on-primary-dark);
  --accent: var(--m3-slate-primary-dark);
  --accent-soft: var(--m3-slate-soft-dark);
  --on-accent-soft: var(--m3-slate-on-soft-dark);
  --focus-ring: var(--m3-slate-primary-dark);
  --warning: var(--orange-300);
  --warning-soft: var(--orange-900);
  --critical: var(--red-300);
  --critical-soft: var(--red-900);
  --on-critical: var(--gray-950);
  --success: var(--green-300);
  --success-soft: var(--green-900);
  --tile-amber: var(--yellow-300);
  --tile-amber-bg: var(--yellow-900);
  --tile-blue: var(--blue-300);
  --tile-blue-bg: var(--blue-900);
  --tile-purple: var(--purple-300);
  --tile-purple-bg: var(--purple-900);
  --tile-red: var(--red-300);
  --tile-red-bg: var(--red-900);
  --tile-green: var(--green-300);
  --tile-green-bg: var(--green-900);
  --tile-orange: var(--orange-300);
  --tile-orange-bg: var(--orange-900);
  --chart-series-1: var(--blue-300);
  --chart-series-2: var(--gray-600);
  --chart-warning: var(--orange-300);
  --chart-track: var(--gray-800);
  --chart-cat-1: var(--blue-300);
  --chart-cat-2: var(--chart-amber-dark);
  --chart-cat-3: var(--chart-purple-dark);
  --chart-cat-4: var(--chart-teal-dark);
  --chart-cat-5: var(--chart-rose-dark);
  --chart-cat-6: var(--chart-slate-dark);
  --chart-seq-1: var(--blue-900);
  --chart-seq-2: var(--blue-800);
  --chart-seq-3: var(--blue-600);
  --chart-seq-4: var(--blue-300);
  --chart-seq-5: var(--blue-100);
  --chart-positive: var(--green-300);
  --chart-negative: var(--red-300);
  --chart-neutral: var(--gray-600);
  --chart-grid: var(--gray-825);
  --chart-axis: var(--gray-800);
  --chart-label: var(--gray-400);
  --scrim: rgba(0, 0, 0, 0.6);
  --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.55);
  --shadow-toast: 0 6px 18px rgba(0, 0, 0, 0.5);
}

@media (prefers-color-scheme: light) {
  [data-theme="m3-slate-system"] {
    color-scheme: light;
    --bg-canvas: var(--m3-slate-canvas-light);
    --bg-nav: var(--m3-slate-nav-light);
    --bg-card: var(--m3-slate-card-light);
    --bg-sunken: var(--m3-slate-sunken-light);
    --bg-hover: var(--m3-slate-hover-light);
    --bg-selected: var(--m3-slate-selected-light);
    --border-default: var(--m3-slate-border-light);
    --border-subtle: var(--m3-slate-subtle-light);
    --border-control: var(--m3-slate-control-light);
    --text-strong: var(--gray-1000);
    --text-primary: var(--gray-900);
    --text-secondary: var(--gray-700);
    --text-tertiary: var(--gray-650);
    --action-primary: var(--m3-slate-primary-light);
    --on-action-primary: var(--gray-0);
    --accent: var(--m3-slate-primary-light);
    --accent-soft: var(--m3-slate-soft-light);
    --on-accent-soft: var(--m3-slate-on-soft-light);
    --focus-ring: var(--m3-slate-primary-light);
    --warning: var(--orange-700);
    --warning-soft: var(--orange-50);
    --critical: var(--red-700);
    --critical-soft: var(--red-50);
    --on-critical: var(--gray-0);
    --success: var(--green-700);
    --success-soft: var(--green-50);
    --tile-amber: var(--yellow-700);
    --tile-amber-bg: var(--yellow-50);
    --tile-blue: var(--blue-600);
    --tile-blue-bg: var(--blue-50);
    --tile-purple: var(--purple-700);
    --tile-purple-bg: var(--purple-50);
    --tile-red: var(--red-700);
    --tile-red-bg: var(--red-50);
    --tile-green: var(--green-700);
    --tile-green-bg: var(--green-50);
    --tile-orange: var(--orange-700);
    --tile-orange-bg: var(--orange-50);
    --chart-series-1: var(--blue-600);
    --chart-series-2: var(--gray-550);
    --chart-warning: var(--orange-700);
    --chart-track: var(--gray-200);
    --chart-cat-1: var(--blue-600);
    --chart-cat-2: var(--chart-amber-light);
    --chart-cat-3: var(--chart-purple-light);
    --chart-cat-4: var(--chart-teal-light);
    --chart-cat-5: var(--chart-rose-light);
    --chart-cat-6: var(--chart-slate-light);
    --chart-seq-1: var(--blue-50);
    --chart-seq-2: var(--blue-100);
    --chart-seq-3: var(--blue-300);
    --chart-seq-4: var(--blue-600);
    --chart-seq-5: var(--blue-800);
    --chart-positive: var(--green-700);
    --chart-negative: var(--red-700);
    --chart-neutral: var(--gray-550);
    --chart-grid: var(--gray-100);
    --chart-axis: var(--gray-200);
    --chart-label: var(--gray-700);
    --scrim: rgba(0, 0, 0, 0.4);
    --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.14);
    --shadow-toast: 0 6px 18px rgba(0, 0, 0, 0.16);
  }
}

[data-theme="ios-blue-system"] {
  color-scheme: dark;
  --bg-canvas: var(--ios-canvas-dark);
  --bg-nav: var(--ios-nav-dark);
  --bg-card: var(--ios-card-dark);
  --bg-sunken: var(--ios-sunken-dark);
  --bg-hover: var(--ios-hover-dark);
  --bg-selected: var(--ios-selected-dark);
  --border-default: var(--ios-border-dark);
  --border-subtle: var(--ios-subtle-dark);
  --border-control: var(--ios-control-dark);
  --text-strong: var(--gray-25);
  --text-primary: var(--gray-200);
  --text-secondary: var(--gray-400);
  --text-tertiary: var(--gray-500);
  --action-primary: var(--ios-blue-primary-dark);
  --on-action-primary: var(--ios-blue-on-primary-dark);
  --accent: var(--ios-blue-primary-dark);
  --accent-soft: var(--ios-blue-soft-dark);
  --on-accent-soft: var(--ios-blue-on-soft-dark);
  --focus-ring: var(--ios-blue-primary-dark);
  --warning: var(--orange-300);
  --warning-soft: var(--orange-900);
  --critical: var(--red-300);
  --critical-soft: var(--red-900);
  --on-critical: var(--gray-950);
  --success: var(--green-300);
  --success-soft: var(--green-900);
  --tile-amber: var(--yellow-300);
  --tile-amber-bg: var(--yellow-900);
  --tile-blue: var(--blue-300);
  --tile-blue-bg: var(--blue-900);
  --tile-purple: var(--purple-300);
  --tile-purple-bg: var(--purple-900);
  --tile-red: var(--red-300);
  --tile-red-bg: var(--red-900);
  --tile-green: var(--green-300);
  --tile-green-bg: var(--green-900);
  --tile-orange: var(--orange-300);
  --tile-orange-bg: var(--orange-900);
  --chart-series-1: var(--blue-300);
  --chart-series-2: var(--gray-600);
  --chart-warning: var(--orange-300);
  --chart-track: var(--gray-800);
  --chart-cat-1: var(--blue-300);
  --chart-cat-2: var(--chart-amber-dark);
  --chart-cat-3: var(--chart-purple-dark);
  --chart-cat-4: var(--chart-teal-dark);
  --chart-cat-5: var(--chart-rose-dark);
  --chart-cat-6: var(--chart-slate-dark);
  --chart-seq-1: var(--blue-900);
  --chart-seq-2: var(--blue-800);
  --chart-seq-3: var(--blue-600);
  --chart-seq-4: var(--blue-300);
  --chart-seq-5: var(--blue-100);
  --chart-positive: var(--green-300);
  --chart-negative: var(--red-300);
  --chart-neutral: var(--gray-600);
  --chart-grid: var(--gray-825);
  --chart-axis: var(--gray-800);
  --chart-label: var(--gray-400);
  --scrim: rgba(0, 0, 0, 0.6);
  --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.55);
  --shadow-toast: 0 6px 18px rgba(0, 0, 0, 0.5);
}

@media (prefers-color-scheme: light) {
  [data-theme="ios-blue-system"] {
    color-scheme: light;
    --bg-canvas: var(--ios-canvas-light);
    --bg-nav: var(--ios-nav-light);
    --bg-card: var(--ios-card-light);
    --bg-sunken: var(--ios-sunken-light);
    --bg-hover: var(--ios-hover-light);
    --bg-selected: var(--ios-card-light);
    --border-default: var(--ios-border-light);
    --border-subtle: var(--ios-subtle-light);
    --border-control: var(--ios-control-light);
    --text-strong: var(--gray-1000);
    --text-primary: var(--gray-900);
    --text-secondary: var(--gray-700);
    --text-tertiary: var(--gray-650);
    --action-primary: var(--ios-blue-primary-light);
    --on-action-primary: var(--gray-0);
    --accent: var(--ios-blue-primary-light);
    --accent-soft: var(--ios-blue-soft-light);
    --on-accent-soft: var(--ios-blue-on-soft-light);
    --focus-ring: var(--ios-blue-primary-light);
    --warning: var(--orange-700);
    --warning-soft: var(--orange-50);
    --critical: var(--red-700);
    --critical-soft: var(--red-50);
    --on-critical: var(--gray-0);
    --success: var(--green-700);
    --success-soft: var(--green-50);
    --tile-amber: var(--yellow-700);
    --tile-amber-bg: var(--yellow-50);
    --tile-blue: var(--blue-600);
    --tile-blue-bg: var(--blue-50);
    --tile-purple: var(--purple-700);
    --tile-purple-bg: var(--purple-50);
    --tile-red: var(--red-700);
    --tile-red-bg: var(--red-50);
    --tile-green: var(--green-700);
    --tile-green-bg: var(--green-50);
    --tile-orange: var(--orange-700);
    --tile-orange-bg: var(--orange-50);
    --chart-series-1: var(--blue-600);
    --chart-series-2: var(--gray-550);
    --chart-warning: var(--orange-700);
    --chart-track: var(--gray-200);
    --chart-cat-1: var(--blue-600);
    --chart-cat-2: var(--chart-amber-light);
    --chart-cat-3: var(--chart-purple-light);
    --chart-cat-4: var(--chart-teal-light);
    --chart-cat-5: var(--chart-rose-light);
    --chart-cat-6: var(--chart-slate-light);
    --chart-seq-1: var(--blue-50);
    --chart-seq-2: var(--blue-100);
    --chart-seq-3: var(--blue-300);
    --chart-seq-4: var(--blue-600);
    --chart-seq-5: var(--blue-800);
    --chart-positive: var(--green-700);
    --chart-negative: var(--red-700);
    --chart-neutral: var(--gray-550);
    --chart-grid: var(--gray-100);
    --chart-axis: var(--gray-200);
    --chart-label: var(--gray-700);
    --scrim: rgba(0, 0, 0, 0.4);
    --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.14);
    --shadow-toast: 0 6px 18px rgba(0, 0, 0, 0.16);
  }
}

[data-theme="ios-graphite-system"] {
  color-scheme: dark;
  --bg-canvas: var(--ios-canvas-dark);
  --bg-nav: var(--ios-nav-dark);
  --bg-card: var(--ios-card-dark);
  --bg-sunken: var(--ios-sunken-dark);
  --bg-hover: var(--ios-hover-dark);
  --bg-selected: var(--ios-selected-dark);
  --border-default: var(--ios-border-dark);
  --border-subtle: var(--ios-subtle-dark);
  --border-control: var(--ios-control-dark);
  --text-strong: var(--gray-25);
  --text-primary: var(--gray-200);
  --text-secondary: var(--gray-400);
  --text-tertiary: var(--gray-500);
  --action-primary: var(--gray-25);
  --on-action-primary: var(--ios-canvas-dark);
  --accent: var(--ios-blue-primary-dark);
  --accent-soft: var(--ios-blue-soft-dark);
  --on-accent-soft: var(--ios-blue-on-soft-dark);
  --focus-ring: var(--ios-blue-primary-dark);
  --warning: var(--orange-300);
  --warning-soft: var(--orange-900);
  --critical: var(--red-300);
  --critical-soft: var(--red-900);
  --on-critical: var(--gray-950);
  --success: var(--green-300);
  --success-soft: var(--green-900);
  --tile-amber: var(--yellow-300);
  --tile-amber-bg: var(--yellow-900);
  --tile-blue: var(--blue-300);
  --tile-blue-bg: var(--blue-900);
  --tile-purple: var(--purple-300);
  --tile-purple-bg: var(--purple-900);
  --tile-red: var(--red-300);
  --tile-red-bg: var(--red-900);
  --tile-green: var(--green-300);
  --tile-green-bg: var(--green-900);
  --tile-orange: var(--orange-300);
  --tile-orange-bg: var(--orange-900);
  --chart-series-1: var(--blue-300);
  --chart-series-2: var(--gray-600);
  --chart-warning: var(--orange-300);
  --chart-track: var(--gray-800);
  --chart-cat-1: var(--blue-300);
  --chart-cat-2: var(--chart-amber-dark);
  --chart-cat-3: var(--chart-purple-dark);
  --chart-cat-4: var(--chart-teal-dark);
  --chart-cat-5: var(--chart-rose-dark);
  --chart-cat-6: var(--chart-slate-dark);
  --chart-seq-1: var(--blue-900);
  --chart-seq-2: var(--blue-800);
  --chart-seq-3: var(--blue-600);
  --chart-seq-4: var(--blue-300);
  --chart-seq-5: var(--blue-100);
  --chart-positive: var(--green-300);
  --chart-negative: var(--red-300);
  --chart-neutral: var(--gray-600);
  --chart-grid: var(--gray-825);
  --chart-axis: var(--gray-800);
  --chart-label: var(--gray-400);
  --scrim: rgba(0, 0, 0, 0.6);
  --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.55);
  --shadow-toast: 0 6px 18px rgba(0, 0, 0, 0.5);
}

@media (prefers-color-scheme: light) {
  [data-theme="ios-graphite-system"] {
    color-scheme: light;
    --bg-canvas: var(--ios-canvas-light);
    --bg-nav: var(--ios-nav-light);
    --bg-card: var(--ios-card-light);
    --bg-sunken: var(--ios-sunken-light);
    --bg-hover: var(--ios-hover-light);
    --bg-selected: var(--ios-card-light);
    --border-default: var(--ios-border-light);
    --border-subtle: var(--ios-subtle-light);
    --border-control: var(--ios-control-light);
    --text-strong: var(--gray-1000);
    --text-primary: var(--gray-900);
    --text-secondary: var(--gray-700);
    --text-tertiary: var(--gray-650);
    --action-primary: var(--ios-card-dark);
    --on-action-primary: var(--gray-0);
    --accent: var(--ios-blue-primary-light);
    --accent-soft: var(--ios-blue-soft-light);
    --on-accent-soft: var(--ios-blue-on-soft-light);
    --focus-ring: var(--ios-blue-primary-light);
    --warning: var(--orange-700);
    --warning-soft: var(--orange-50);
    --critical: var(--red-700);
    --critical-soft: var(--red-50);
    --on-critical: var(--gray-0);
    --success: var(--green-700);
    --success-soft: var(--green-50);
    --tile-amber: var(--yellow-700);
    --tile-amber-bg: var(--yellow-50);
    --tile-blue: var(--blue-600);
    --tile-blue-bg: var(--blue-50);
    --tile-purple: var(--purple-700);
    --tile-purple-bg: var(--purple-50);
    --tile-red: var(--red-700);
    --tile-red-bg: var(--red-50);
    --tile-green: var(--green-700);
    --tile-green-bg: var(--green-50);
    --tile-orange: var(--orange-700);
    --tile-orange-bg: var(--orange-50);
    --chart-series-1: var(--blue-600);
    --chart-series-2: var(--gray-550);
    --chart-warning: var(--orange-700);
    --chart-track: var(--gray-200);
    --chart-cat-1: var(--blue-600);
    --chart-cat-2: var(--chart-amber-light);
    --chart-cat-3: var(--chart-purple-light);
    --chart-cat-4: var(--chart-teal-light);
    --chart-cat-5: var(--chart-rose-light);
    --chart-cat-6: var(--chart-slate-light);
    --chart-seq-1: var(--blue-50);
    --chart-seq-2: var(--blue-100);
    --chart-seq-3: var(--blue-300);
    --chart-seq-4: var(--blue-600);
    --chart-seq-5: var(--blue-800);
    --chart-positive: var(--green-700);
    --chart-negative: var(--red-700);
    --chart-neutral: var(--gray-550);
    --chart-grid: var(--gray-100);
    --chart-axis: var(--gray-200);
    --chart-label: var(--gray-700);
    --scrim: rgba(0, 0, 0, 0.4);
    --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.14);
    --shadow-toast: 0 6px 18px rgba(0, 0, 0, 0.16);
  }
}

[data-theme="ios-indigo-system"] {
  color-scheme: dark;
  --bg-canvas: var(--ios-canvas-dark);
  --bg-nav: var(--ios-nav-dark);
  --bg-card: var(--ios-indigo-card-dark);
  --bg-sunken: var(--ios-indigo-sunken-dark);
  --bg-hover: var(--ios-indigo-hover-dark);
  --bg-selected: var(--ios-indigo-selected-dark);
  --border-default: var(--ios-border-dark);
  --border-subtle: var(--ios-subtle-dark);
  --border-control: var(--ios-control-dark);
  --text-strong: var(--gray-25);
  --text-primary: var(--gray-200);
  --text-secondary: var(--gray-400);
  --text-tertiary: var(--gray-500);
  --action-primary: var(--ios-indigo-primary-dark);
  --on-action-primary: var(--ios-indigo-on-primary-dark);
  --accent: var(--ios-indigo-primary-dark);
  --accent-soft: var(--ios-indigo-soft-dark);
  --on-accent-soft: var(--ios-indigo-on-soft-dark);
  --focus-ring: var(--ios-indigo-primary-dark);
  --warning: var(--orange-300);
  --warning-soft: var(--orange-900);
  --critical: var(--red-300);
  --critical-soft: var(--red-900);
  --on-critical: var(--gray-950);
  --success: var(--green-300);
  --success-soft: var(--green-900);
  --tile-amber: var(--yellow-300);
  --tile-amber-bg: var(--yellow-900);
  --tile-blue: var(--blue-300);
  --tile-blue-bg: var(--blue-900);
  --tile-purple: var(--purple-300);
  --tile-purple-bg: var(--purple-900);
  --tile-red: var(--red-300);
  --tile-red-bg: var(--red-900);
  --tile-green: var(--green-300);
  --tile-green-bg: var(--green-900);
  --tile-orange: var(--orange-300);
  --tile-orange-bg: var(--orange-900);
  --chart-series-1: var(--blue-300);
  --chart-series-2: var(--gray-600);
  --chart-warning: var(--orange-300);
  --chart-track: var(--gray-800);
  --chart-cat-1: var(--blue-300);
  --chart-cat-2: var(--chart-amber-dark);
  --chart-cat-3: var(--chart-purple-dark);
  --chart-cat-4: var(--chart-teal-dark);
  --chart-cat-5: var(--chart-rose-dark);
  --chart-cat-6: var(--chart-slate-dark);
  --chart-seq-1: var(--blue-900);
  --chart-seq-2: var(--blue-800);
  --chart-seq-3: var(--blue-600);
  --chart-seq-4: var(--blue-300);
  --chart-seq-5: var(--blue-100);
  --chart-positive: var(--green-300);
  --chart-negative: var(--red-300);
  --chart-neutral: var(--gray-600);
  --chart-grid: var(--gray-825);
  --chart-axis: var(--gray-800);
  --chart-label: var(--gray-400);
  --scrim: rgba(0, 0, 0, 0.6);
  --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.55);
  --shadow-toast: 0 6px 18px rgba(0, 0, 0, 0.5);
}

@media (prefers-color-scheme: light) {
  [data-theme="ios-indigo-system"] {
    color-scheme: light;
    --bg-canvas: var(--ios-canvas-light);
    --bg-nav: var(--ios-nav-light);
    --bg-card: var(--ios-card-light);
    --bg-sunken: var(--ios-sunken-light);
    --bg-hover: var(--ios-hover-light);
    --bg-selected: var(--ios-card-light);
    --border-default: var(--ios-border-light);
    --border-subtle: var(--ios-subtle-light);
    --border-control: var(--ios-control-light);
    --text-strong: var(--gray-1000);
    --text-primary: var(--gray-900);
    --text-secondary: var(--gray-700);
    --text-tertiary: var(--gray-650);
    --action-primary: var(--ios-indigo-primary-light);
    --on-action-primary: var(--gray-0);
    --accent: var(--ios-indigo-primary-light);
    --accent-soft: var(--ios-indigo-soft-light);
    --on-accent-soft: var(--ios-indigo-on-soft-light);
    --focus-ring: var(--ios-indigo-primary-light);
    --warning: var(--orange-700);
    --warning-soft: var(--orange-50);
    --critical: var(--red-700);
    --critical-soft: var(--red-50);
    --on-critical: var(--gray-0);
    --success: var(--green-700);
    --success-soft: var(--green-50);
    --tile-amber: var(--yellow-700);
    --tile-amber-bg: var(--yellow-50);
    --tile-blue: var(--blue-600);
    --tile-blue-bg: var(--blue-50);
    --tile-purple: var(--purple-700);
    --tile-purple-bg: var(--purple-50);
    --tile-red: var(--red-700);
    --tile-red-bg: var(--red-50);
    --tile-green: var(--green-700);
    --tile-green-bg: var(--green-50);
    --tile-orange: var(--orange-700);
    --tile-orange-bg: var(--orange-50);
    --chart-series-1: var(--blue-600);
    --chart-series-2: var(--gray-550);
    --chart-warning: var(--orange-700);
    --chart-track: var(--gray-200);
    --chart-cat-1: var(--blue-600);
    --chart-cat-2: var(--chart-amber-light);
    --chart-cat-3: var(--chart-purple-light);
    --chart-cat-4: var(--chart-teal-light);
    --chart-cat-5: var(--chart-rose-light);
    --chart-cat-6: var(--chart-slate-light);
    --chart-seq-1: var(--blue-50);
    --chart-seq-2: var(--blue-100);
    --chart-seq-3: var(--blue-300);
    --chart-seq-4: var(--blue-600);
    --chart-seq-5: var(--blue-800);
    --chart-positive: var(--green-700);
    --chart-negative: var(--red-700);
    --chart-neutral: var(--gray-550);
    --chart-grid: var(--gray-100);
    --chart-axis: var(--gray-200);
    --chart-label: var(--gray-700);
    --scrim: rgba(0, 0, 0, 0.4);
    --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.14);
    --shadow-toast: 0 6px 18px rgba(0, 0, 0, 0.16);
  }
}

[data-theme="ios-teal-system"] {
  color-scheme: dark;
  --bg-canvas: var(--ios-canvas-dark);
  --bg-nav: var(--ios-nav-dark);
  --bg-card: var(--ios-teal-card-dark);
  --bg-sunken: var(--ios-teal-sunken-dark);
  --bg-hover: var(--ios-teal-hover-dark);
  --bg-selected: var(--ios-teal-selected-dark);
  --border-default: var(--ios-border-dark);
  --border-subtle: var(--ios-subtle-dark);
  --border-control: var(--ios-control-dark);
  --text-strong: var(--gray-25);
  --text-primary: var(--gray-200);
  --text-secondary: var(--gray-400);
  --text-tertiary: var(--gray-500);
  --action-primary: var(--ios-teal-primary-dark);
  --on-action-primary: var(--ios-teal-on-primary-dark);
  --accent: var(--ios-teal-primary-dark);
  --accent-soft: var(--ios-teal-soft-dark);
  --on-accent-soft: var(--ios-teal-on-soft-dark);
  --focus-ring: var(--ios-teal-primary-dark);
  --warning: var(--orange-300);
  --warning-soft: var(--orange-900);
  --critical: var(--red-300);
  --critical-soft: var(--red-900);
  --on-critical: var(--gray-950);
  --success: var(--green-300);
  --success-soft: var(--green-900);
  --tile-amber: var(--yellow-300);
  --tile-amber-bg: var(--yellow-900);
  --tile-blue: var(--blue-300);
  --tile-blue-bg: var(--blue-900);
  --tile-purple: var(--purple-300);
  --tile-purple-bg: var(--purple-900);
  --tile-red: var(--red-300);
  --tile-red-bg: var(--red-900);
  --tile-green: var(--green-300);
  --tile-green-bg: var(--green-900);
  --tile-orange: var(--orange-300);
  --tile-orange-bg: var(--orange-900);
  --chart-series-1: var(--blue-300);
  --chart-series-2: var(--gray-600);
  --chart-warning: var(--orange-300);
  --chart-track: var(--gray-800);
  --chart-cat-1: var(--blue-300);
  --chart-cat-2: var(--chart-amber-dark);
  --chart-cat-3: var(--chart-purple-dark);
  --chart-cat-4: var(--chart-teal-dark);
  --chart-cat-5: var(--chart-rose-dark);
  --chart-cat-6: var(--chart-slate-dark);
  --chart-seq-1: var(--blue-900);
  --chart-seq-2: var(--blue-800);
  --chart-seq-3: var(--blue-600);
  --chart-seq-4: var(--blue-300);
  --chart-seq-5: var(--blue-100);
  --chart-positive: var(--green-300);
  --chart-negative: var(--red-300);
  --chart-neutral: var(--gray-600);
  --chart-grid: var(--gray-825);
  --chart-axis: var(--gray-800);
  --chart-label: var(--gray-400);
  --scrim: rgba(0, 0, 0, 0.6);
  --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.55);
  --shadow-toast: 0 6px 18px rgba(0, 0, 0, 0.5);
}

@media (prefers-color-scheme: light) {
  [data-theme="ios-teal-system"] {
    color-scheme: light;
    --bg-canvas: var(--ios-canvas-light);
    --bg-nav: var(--ios-nav-light);
    --bg-card: var(--ios-card-light);
    --bg-sunken: var(--ios-sunken-light);
    --bg-hover: var(--ios-hover-light);
    --bg-selected: var(--ios-card-light);
    --border-default: var(--ios-border-light);
    --border-subtle: var(--ios-subtle-light);
    --border-control: var(--ios-control-light);
    --text-strong: var(--gray-1000);
    --text-primary: var(--gray-900);
    --text-secondary: var(--gray-700);
    --text-tertiary: var(--gray-650);
    --action-primary: var(--ios-teal-primary-light);
    --on-action-primary: var(--gray-0);
    --accent: var(--ios-teal-primary-light);
    --accent-soft: var(--ios-teal-soft-light);
    --on-accent-soft: var(--ios-teal-on-soft-light);
    --focus-ring: var(--ios-teal-primary-light);
    --warning: var(--orange-700);
    --warning-soft: var(--orange-50);
    --critical: var(--red-700);
    --critical-soft: var(--red-50);
    --on-critical: var(--gray-0);
    --success: var(--green-700);
    --success-soft: var(--green-50);
    --tile-amber: var(--yellow-700);
    --tile-amber-bg: var(--yellow-50);
    --tile-blue: var(--blue-600);
    --tile-blue-bg: var(--blue-50);
    --tile-purple: var(--purple-700);
    --tile-purple-bg: var(--purple-50);
    --tile-red: var(--red-700);
    --tile-red-bg: var(--red-50);
    --tile-green: var(--green-700);
    --tile-green-bg: var(--green-50);
    --tile-orange: var(--orange-700);
    --tile-orange-bg: var(--orange-50);
    --chart-series-1: var(--blue-600);
    --chart-series-2: var(--gray-550);
    --chart-warning: var(--orange-700);
    --chart-track: var(--gray-200);
    --chart-cat-1: var(--blue-600);
    --chart-cat-2: var(--chart-amber-light);
    --chart-cat-3: var(--chart-purple-light);
    --chart-cat-4: var(--chart-teal-light);
    --chart-cat-5: var(--chart-rose-light);
    --chart-cat-6: var(--chart-slate-light);
    --chart-seq-1: var(--blue-50);
    --chart-seq-2: var(--blue-100);
    --chart-seq-3: var(--blue-300);
    --chart-seq-4: var(--blue-600);
    --chart-seq-5: var(--blue-800);
    --chart-positive: var(--green-700);
    --chart-negative: var(--red-700);
    --chart-neutral: var(--gray-550);
    --chart-grid: var(--gray-100);
    --chart-axis: var(--gray-200);
    --chart-label: var(--gray-700);
    --scrim: rgba(0, 0, 0, 0.4);
    --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.14);
    --shadow-toast: 0 6px 18px rgba(0, 0, 0, 0.16);
  }
}

/* Text styles */
.fd-text-display { font: 400 38px/44px var(--font-sans); letter-spacing: -0.02em; }
.fd-text-headline { font: 400 32px/40px var(--font-sans); letter-spacing: -0.02em; }
.fd-text-headline-sm { font: 500 24px/32px var(--font-sans); letter-spacing: -0.01em; }
.fd-text-metric { font: 400 34px/40px var(--font-sans); letter-spacing: -0.02em; }
.fd-text-title-lg { font: 500 17px/24px var(--font-sans); }
.fd-text-title { font: 500 16px/24px var(--font-sans); }
.fd-text-title-sm { font: 500 15px/22px var(--font-sans); }
.fd-text-body-lg { font: 400 16px/24px var(--font-sans); }
.fd-text-body { font: 400 15px/22px var(--font-sans); }
.fd-text-body-sm { font: 400 14px/20px var(--font-sans); }
.fd-text-caption { font: 400 13px/18px var(--font-sans); }
.fd-text-label { font: 600 14px/20px var(--font-sans); }
.fd-text-overline { font: 500 12px/16px var(--font-sans); letter-spacing: 0.08em; }
.fd-text-badge { font: 600 12px/16px var(--font-sans); }
.fd-text-code { font: 400 13px/18px var(--font-mono); }
.fd-text-overline { text-transform: uppercase; }