/* 配色参考：Linear / Stripe / Vercel Geist / Notion / Figma / Supabase / Shopify / Airbnb / Tailwind */

html:not([data-theme]),
html[data-theme="default"] {
  color-scheme: light;
  --bg: #f4f5f7;
  --card: #ffffff;
  --ink: #1f2430;
  --muted: #6b7280;
  --line: #e5e7eb;
  --primary: #4f46e5;
  --primary-solid: #4338ca;
  --primary-ink: #ffffff;
  --green: #16a34a;
  --green-bg: #dcfce7;
  --orange: #ea580c;
  --orange-bg: #ffedd5;
  --red: #dc2626;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --surface: #ffffff;
  --surface-muted: #fafafa;
  --surface-raised: #f7f8fa;
  --surface-hover: #f9fafb;
  --surface-hover-strong: #f0f0f3;
  --surface-subtle: #eef0f4;
  --readonly-bg: #f3f4f6;
  --row-hover: #fafbff;
  --divider: #e9ebf0;
  --divider-strong: #e3e5ea;
  --badge-bg: #eef2ff;
  --chip-bg: #f0f1f4;
  --chip-white-bg: #fff3c4;
  --chip-white-text: #8a6d00;
  --chip-white-border: #ecd06b;
  --modal-backdrop: rgba(17, 24, 39, 0.45);
  --modal-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  --focus-ring: rgba(79, 70, 229, 0.12);
  --icon-primary-hover: #eef2ff;
  --icon-danger-hover: #fde8e8;
  --sub-date: #94a3b8;
  --sub-sep: #cbd5e1;
  --mask-solid: #000;
  --on-primary: #ffffff;
}

/* Linear — 冷灰 + 紫蓝，偏工具感 */
html[data-theme="linear"] {
  color-scheme: light;
  --bg: #f7f8f8;
  --card: #ffffff;
  --ink: #0f0f0f;
  --muted: #6b6f76;
  --line: #e6e6e6;
  --primary: #5e6ad2;
  --primary-solid: #4f56c9;
  --primary-ink: #ffffff;
  --green: #26b562;
  --green-bg: #e6f7ed;
  --orange: #e07a2f;
  --orange-bg: #fef0e4;
  --red: #e5484d;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.04);
  --surface: #ffffff;
  --surface-muted: #fafafa;
  --surface-raised: #f4f5f5;
  --surface-hover: #f0f1f1;
  --surface-hover-strong: #e8e9e9;
  --surface-subtle: #eceeee;
  --readonly-bg: #f2f3f3;
  --row-hover: #f3f4fc;
  --divider: #ebebeb;
  --divider-strong: #e0e0e0;
  --badge-bg: rgba(94, 106, 210, 0.12);
  --chip-bg: #f0f1f3;
  --chip-white-bg: #fff8dc;
  --chip-white-text: #7a6200;
  --chip-white-border: #e8d070;
  --modal-backdrop: rgba(15, 15, 15, 0.5);
  --modal-shadow: 0 24px 48px rgba(0, 0, 0, 0.18);
  --focus-ring: rgba(94, 106, 210, 0.18);
  --icon-primary-hover: rgba(94, 106, 210, 0.12);
  --icon-danger-hover: rgba(229, 72, 77, 0.1);
  --sub-date: #8b919a;
  --sub-sep: #c4c8ce;
}

/* Stripe — 蓝紫 + 冷白底，支付/ SaaS 感 */
html[data-theme="stripe"] {
  color-scheme: light;
  --bg: #f6f9fc;
  --card: #ffffff;
  --ink: #0a2540;
  --muted: #697386;
  --line: #e3e8ee;
  --primary: #635bff;
  --primary-solid: #5751e6;
  --primary-ink: #ffffff;
  --green: #09825d;
  --green-bg: #d7f5ea;
  --orange: #c84801;
  --orange-bg: #ffe8d9;
  --red: #df1b41;
  --shadow: 0 2px 5px rgba(50, 50, 93, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --surface: #ffffff;
  --surface-muted: #f8fafc;
  --surface-raised: #f0f4f8;
  --surface-hover: #eef2f6;
  --surface-hover-strong: #e3e8ee;
  --surface-subtle: #e6ebf0;
  --readonly-bg: #f0f4f8;
  --row-hover: #f5f3ff;
  --divider: #e6ebf0;
  --divider-strong: #d8dee6;
  --badge-bg: rgba(99, 91, 255, 0.1);
  --chip-bg: #eef1f5;
  --chip-white-bg: #fff4cc;
  --chip-white-text: #7a5c00;
  --chip-white-border: #e5c84a;
  --modal-backdrop: rgba(10, 37, 64, 0.45);
  --modal-shadow: 0 30px 60px rgba(50, 50, 93, 0.15);
  --focus-ring: rgba(99, 91, 255, 0.15);
  --icon-primary-hover: rgba(99, 91, 255, 0.1);
  --icon-danger-hover: rgba(223, 27, 65, 0.1);
  --sub-date: #8792a2;
  --sub-sep: #c1c9d2;
}

/* Vercel Geist — 黑白极简 + 亮蓝 */
html[data-theme="vercel"] {
  color-scheme: light;
  --bg: #fafafa;
  --card: #ffffff;
  --ink: #000000;
  --muted: #666666;
  --line: #eaeaea;
  --primary: #0070f3;
  --primary-solid: #0060df;
  --primary-ink: #ffffff;
  --green: #0cce6b;
  --green-bg: #e6faf0;
  --orange: #f5a623;
  --orange-bg: #fef6e6;
  --red: #ee0000;
  --shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  --surface: #ffffff;
  --surface-muted: #fafafa;
  --surface-raised: #f5f5f5;
  --surface-hover: #f0f0f0;
  --surface-hover-strong: #e8e8e8;
  --surface-subtle: #ebebeb;
  --readonly-bg: #f5f5f5;
  --row-hover: #f0f7ff;
  --divider: #eaeaea;
  --divider-strong: #ddd;
  --badge-bg: rgba(0, 112, 243, 0.1);
  --chip-bg: #f0f0f0;
  --chip-white-bg: #fff9e6;
  --chip-white-text: #806600;
  --chip-white-border: #e6c84a;
  --modal-backdrop: rgba(0, 0, 0, 0.5);
  --modal-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
  --focus-ring: rgba(0, 112, 243, 0.15);
  --icon-primary-hover: rgba(0, 112, 243, 0.08);
  --icon-danger-hover: rgba(238, 0, 0, 0.08);
  --sub-date: #888;
  --sub-sep: #ccc;
}

/* Notion — 暖灰 + 柔和蓝 */
html[data-theme="notion"] {
  color-scheme: light;
  --bg: #fbfbfa;
  --card: #ffffff;
  --ink: #37352f;
  --muted: #787774;
  --line: #e9e9e7;
  --primary: #2383e2;
  --primary-solid: #1a73c7;
  --primary-ink: #ffffff;
  --green: #0f7b6c;
  --green-bg: #ddf3ef;
  --orange: #d9730d;
  --orange-bg: #fdecc8;
  --red: #e03e3e;
  --shadow: 0 1px 3px rgba(15, 15, 15, 0.06);
  --surface: #ffffff;
  --surface-muted: #f7f6f3;
  --surface-raised: #f1f1ef;
  --surface-hover: #efefec;
  --surface-hover-strong: #e8e8e5;
  --surface-subtle: #e3e2de;
  --readonly-bg: #f1f1ef;
  --row-hover: #eef5fc;
  --divider: #ebebea;
  --divider-strong: #e0e0de;
  --badge-bg: rgba(35, 131, 226, 0.1);
  --chip-bg: #f1f1ef;
  --chip-white-bg: #fef3c7;
  --chip-white-text: #854d0e;
  --chip-white-border: #f0c14a;
  --modal-backdrop: rgba(55, 53, 47, 0.4);
  --modal-shadow: 0 20px 40px rgba(15, 15, 15, 0.12);
  --focus-ring: rgba(35, 131, 226, 0.15);
  --icon-primary-hover: rgba(35, 131, 226, 0.08);
  --icon-danger-hover: rgba(224, 62, 62, 0.08);
  --sub-date: #9b9a97;
  --sub-sep: #c4c3c0;
}

/* Figma — 紫粉多色，偏创意工具 */
html[data-theme="figma"] {
  color-scheme: light;
  --bg: #f5f5f5;
  --card: #ffffff;
  --ink: #1e1e1e;
  --muted: #757575;
  --line: #e6e6e6;
  --primary: #a259ff;
  --primary-solid: #7c3aed;
  --primary-ink: #ffffff;
  --green: #1bc47d;
  --green-bg: #dff7ec;
  --orange: #f24822;
  --orange-bg: #fde8e2;
  --red: #f24822;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --surface: #ffffff;
  --surface-muted: #fafafa;
  --surface-raised: #f0f0f0;
  --surface-hover: #ececec;
  --surface-hover-strong: #e0e0e0;
  --surface-subtle: #e8e8e8;
  --readonly-bg: #f0f0f0;
  --row-hover: #f8f0ff;
  --divider: #e6e6e6;
  --divider-strong: #d9d9d9;
  --badge-bg: rgba(162, 89, 255, 0.12);
  --chip-bg: #f0f0f0;
  --chip-white-bg: #fff5e0;
  --chip-white-text: #8a6000;
  --chip-white-border: #f0c850;
  --modal-backdrop: rgba(30, 30, 30, 0.45);
  --modal-shadow: 0 24px 48px rgba(0, 0, 0, 0.16);
  --focus-ring: rgba(162, 89, 255, 0.18);
  --icon-primary-hover: rgba(162, 89, 255, 0.1);
  --icon-danger-hover: rgba(242, 72, 34, 0.1);
  --sub-date: #999;
  --sub-sep: #ccc;
}

/* Supabase — 墨绿 + 青绿 accent */
html[data-theme="supabase"] {
  color-scheme: light;
  --bg: #f8faf9;
  --card: #ffffff;
  --ink: #1c1c1c;
  --muted: #6b7280;
  --line: #e2e8e4;
  --primary: #3ecf8e;
  --primary-solid: #24a871;
  --primary-ink: #0f1f17;
  --green: #059669;
  --green-bg: #d1fae5;
  --orange: #f59e0b;
  --orange-bg: #fef3c7;
  --red: #ef4444;
  --shadow: 0 1px 3px rgba(28, 28, 28, 0.06);
  --surface: #ffffff;
  --surface-muted: #f4f7f5;
  --surface-raised: #eef2ef;
  --surface-hover: #e8ede9;
  --surface-hover-strong: #dfe5e1;
  --surface-subtle: #e4ebe6;
  --readonly-bg: #eef2ef;
  --row-hover: #edfbf4;
  --divider: #e2e8e4;
  --divider-strong: #d5ddd8;
  --badge-bg: rgba(62, 207, 142, 0.15);
  --chip-bg: #eef2ef;
  --chip-white-bg: #fef9c3;
  --chip-white-text: #854d0e;
  --chip-white-border: #e8c840;
  --modal-backdrop: rgba(28, 28, 28, 0.5);
  --modal-shadow: 0 20px 40px rgba(28, 28, 28, 0.15);
  --focus-ring: rgba(62, 207, 142, 0.2);
  --icon-primary-hover: rgba(62, 207, 142, 0.12);
  --icon-danger-hover: rgba(239, 68, 68, 0.1);
  --sub-date: #8b9590;
  --sub-sep: #b8c4bc;
}

/* Shopify Polaris — 品牌绿 */
html[data-theme="shopify"] {
  color-scheme: light;
  --bg: #f6f6f7;
  --card: #ffffff;
  --ink: #202223;
  --muted: #6d7175;
  --line: #e1e3e5;
  --primary: #008060;
  --primary-solid: #006e52;
  --primary-ink: #ffffff;
  --green: #008060;
  --green-bg: #d3f0e8;
  --orange: #b98900;
  --orange-bg: #fff5d1;
  --red: #d82c0d;
  --shadow: 0 1px 0 rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.04);
  --surface: #ffffff;
  --surface-muted: #fafbfb;
  --surface-raised: #f1f2f3;
  --surface-hover: #edeeef;
  --surface-hover-strong: #e4e5e7;
  --surface-subtle: #e1e3e5;
  --readonly-bg: #f1f2f3;
  --row-hover: #eef8f4;
  --divider: #e1e3e5;
  --divider-strong: #d2d5d8;
  --badge-bg: rgba(0, 128, 96, 0.1);
  --chip-bg: #f1f2f3;
  --chip-white-bg: #fff8e1;
  --chip-white-text: #7a6200;
  --chip-white-border: #e6c850;
  --modal-backdrop: rgba(32, 34, 35, 0.45);
  --modal-shadow: 0 20px 40px rgba(32, 34, 35, 0.15);
  --focus-ring: rgba(0, 128, 96, 0.15);
  --icon-primary-hover: rgba(0, 128, 96, 0.08);
  --icon-danger-hover: rgba(216, 44, 13, 0.08);
  --sub-date: #8c9196;
  --sub-sep: #b5babf;
}

/* Airbnb — 珊瑚红 */
html[data-theme="airbnb"] {
  color-scheme: light;
  --bg: #fafafa;
  --card: #ffffff;
  --ink: #222222;
  --muted: #717171;
  --line: #ebebeb;
  --primary: #ff5a5f;
  --primary-solid: #e5484d;
  --primary-ink: #ffffff;
  --green: #008a05;
  --green-bg: #e6f4e6;
  --orange: #e07912;
  --orange-bg: #fef0e0;
  --red: #c13515;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --surface: #ffffff;
  --surface-muted: #fafafa;
  --surface-raised: #f7f7f7;
  --surface-hover: #f2f2f2;
  --surface-hover-strong: #ebebeb;
  --surface-subtle: #e8e8e8;
  --readonly-bg: #f7f7f7;
  --row-hover: #fff5f5;
  --divider: #ebebeb;
  --divider-strong: #ddd;
  --badge-bg: rgba(255, 90, 95, 0.1);
  --chip-bg: #f0f0f0;
  --chip-white-bg: #fff8e1;
  --chip-white-text: #8a6000;
  --chip-white-border: #f0c850;
  --modal-backdrop: rgba(34, 34, 34, 0.45);
  --modal-shadow: 0 22px 44px rgba(0, 0, 0, 0.15);
  --focus-ring: rgba(255, 90, 95, 0.15);
  --icon-primary-hover: rgba(255, 90, 95, 0.08);
  --icon-danger-hover: rgba(193, 53, 21, 0.08);
  --sub-date: #999;
  --sub-sep: #ccc;
}

/* Tailwind Sky — 天蓝清爽 */
html[data-theme="sky"] {
  color-scheme: light;
  --bg: #f0f9ff;
  --card: #ffffff;
  --ink: #0c4a6e;
  --muted: #64748b;
  --line: #e0f2fe;
  --primary: #0ea5e9;
  --primary-solid: #0369a1;
  --primary-ink: #ffffff;
  --primary-text-shadow: 0 1px 1px rgba(0, 0, 0, 0.14);
  --green: #10b981;
  --green-bg: #d1fae5;
  --orange: #f97316;
  --orange-bg: #ffedd5;
  --red: #ef4444;
  --shadow: 0 1px 3px rgba(14, 165, 233, 0.08);
  --surface: #ffffff;
  --surface-muted: #f8fcff;
  --surface-raised: #e0f2fe;
  --surface-hover: #dbeafe;
  --surface-hover-strong: #bae6fd;
  --surface-subtle: #e0f2fe;
  --readonly-bg: #f0f9ff;
  --row-hover: #ecfeff;
  --divider: #e0f2fe;
  --divider-strong: #bae6fd;
  --badge-bg: rgba(14, 165, 233, 0.12);
  --chip-bg: #e0f2fe;
  --chip-white-bg: #fef9c3;
  --chip-white-text: #854d0e;
  --chip-white-border: #f0c850;
  --modal-backdrop: rgba(12, 74, 110, 0.4);
  --modal-shadow: 0 20px 40px rgba(14, 165, 233, 0.12);
  --focus-ring: rgba(14, 165, 233, 0.18);
  --icon-primary-hover: rgba(14, 165, 233, 0.1);
  --icon-danger-hover: rgba(239, 68, 68, 0.08);
  --sub-date: #7dd3fc;
  --sub-sep: #93c5fd;
}

/* Rose — 玫瑰粉，偏时尚 */
html[data-theme="rose"] {
  color-scheme: light;
  --bg: #fff1f2;
  --card: #ffffff;
  --ink: #4c0519;
  --muted: #9f1239;
  --line: #fecdd3;
  --primary: #e11d48;
  --primary-solid: #be123c;
  --primary-ink: #ffffff;
  --green: #059669;
  --green-bg: #d1fae5;
  --orange: #ea580c;
  --orange-bg: #ffedd5;
  --red: #be123c;
  --shadow: 0 1px 3px rgba(225, 29, 72, 0.08);
  --surface: #ffffff;
  --surface-muted: #fff5f6;
  --surface-raised: #ffe4e6;
  --surface-hover: #fecdd3;
  --surface-hover-strong: #fda4af;
  --surface-subtle: #ffe4e6;
  --readonly-bg: #fff5f6;
  --row-hover: #fff1f2;
  --divider: #fecdd3;
  --divider-strong: #fda4af;
  --badge-bg: rgba(225, 29, 72, 0.1);
  --chip-bg: #ffe4e6;
  --chip-white-bg: #fef9c3;
  --chip-white-text: #854d0e;
  --chip-white-border: #f0c850;
  --modal-backdrop: rgba(76, 5, 25, 0.4);
  --modal-shadow: 0 20px 40px rgba(225, 29, 72, 0.12);
  --focus-ring: rgba(225, 29, 72, 0.15);
  --icon-primary-hover: rgba(225, 29, 72, 0.08);
  --icon-danger-hover: rgba(190, 18, 60, 0.08);
  --sub-date: #fb7185;
  --sub-sep: #fda4af;
}

/* ── 暗色模式（各主题，由 html.theme-dark 控制） ── */

html.theme-dark:not([data-theme]),
html.theme-dark[data-theme="default"] {
    color-scheme: dark;
    --bg: #111318;
    --card: #1a1d26;
    --ink: #e8eaef;
    --muted: #9aa3b2;
    --line: #2a2f3a;
    --primary: #818cf8;
    --primary-solid: #6366f1;
    --primary-ink: #ffffff;
    --green: #4ade80;
    --green-bg: rgba(74, 222, 128, 0.14);
    --orange: #fb923c;
    --orange-bg: rgba(251, 146, 60, 0.16);
    --red: #f87171;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
    --surface: #22262f;
    --surface-muted: #1e222b;
    --surface-raised: #252a34;
    --surface-hover: #252a34;
    --surface-hover-strong: #2d333f;
    --surface-subtle: #2a2f3a;
    --readonly-bg: #1a1e26;
    --row-hover: #22283a;
    --divider: #2a2f3a;
    --divider-strong: #323845;
    --badge-bg: rgba(129, 140, 248, 0.18);
    --chip-bg: #2a2f3a;
    --chip-white-bg: rgba(251, 191, 36, 0.2);
    --chip-white-text: #fbbf24;
    --chip-white-border: rgba(251, 191, 36, 0.45);
    --modal-backdrop: rgba(0, 0, 0, 0.65);
    --modal-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    --focus-ring: rgba(129, 140, 248, 0.25);
    --icon-primary-hover: rgba(129, 140, 248, 0.18);
    --icon-danger-hover: rgba(248, 113, 113, 0.18);
    --sub-date: #7a8494;
    --sub-sep: #4a5568;
    --mask-solid: #fff;
  }

html.theme-dark[data-theme="linear"] {
    color-scheme: dark;
    --bg: #0d0d0d;
    --card: #161616;
    --ink: #ededed;
    --muted: #8a8f98;
    --line: #2a2a2a;
    --primary: #7170ff;
    --primary-solid: #5e56d6;
    --primary-ink: #ffffff;
    --green: #4ade80;
    --green-bg: rgba(74, 222, 128, 0.14);
    --orange: #fb923c;
    --orange-bg: rgba(251, 146, 60, 0.16);
    --red: #f87171;
    --surface: #1c1c1c;
    --surface-muted: #141414;
    --surface-raised: #222;
    --surface-hover: #252525;
    --surface-hover-strong: #2e2e2e;
    --surface-subtle: #2a2a2a;
    --readonly-bg: #141414;
    --row-hover: #1a1a2e;
    --divider: #2a2a2a;
    --divider-strong: #333;
    --badge-bg: rgba(113, 112, 255, 0.18);
    --chip-bg: #2a2a2a;
    --chip-white-bg: rgba(251, 191, 36, 0.18);
    --chip-white-text: #fbbf24;
    --chip-white-border: rgba(251, 191, 36, 0.4);
    --modal-backdrop: rgba(0, 0, 0, 0.7);
    --focus-ring: rgba(113, 112, 255, 0.25);
    --icon-primary-hover: rgba(113, 112, 255, 0.15);
    --icon-danger-hover: rgba(248, 113, 113, 0.15);
    --sub-date: #6b7280;
    --sub-sep: #4b5563;
    --mask-solid: #fff;
  }

html.theme-dark[data-theme="stripe"] {
    color-scheme: dark;
    --bg: #0a1628;
    --card: #0f1d32;
    --ink: #e8edf5;
    --muted: #8b9ab5;
    --line: #1e3354;
    --primary: #7a73ff;
    --primary-solid: #635bff;
    --primary-ink: #ffffff;
    --green: #4ade80;
    --green-bg: rgba(74, 222, 128, 0.14);
    --orange: #fb923c;
    --orange-bg: rgba(251, 146, 60, 0.16);
    --red: #f87171;
    --surface: #152238;
    --surface-muted: #0c1829;
    --surface-raised: #1a2d4a;
    --surface-hover: #1e3354;
    --surface-hover-strong: #243d60;
    --surface-subtle: #1e3354;
    --readonly-bg: #0c1829;
    --row-hover: #151a3a;
    --divider: #1e3354;
    --divider-strong: #243d60;
    --badge-bg: rgba(122, 115, 255, 0.18);
    --chip-bg: #1e3354;
    --chip-white-bg: rgba(251, 191, 36, 0.18);
    --chip-white-text: #fbbf24;
    --chip-white-border: rgba(251, 191, 36, 0.4);
    --modal-backdrop: rgba(0, 0, 0, 0.7);
    --focus-ring: rgba(122, 115, 255, 0.25);
    --icon-primary-hover: rgba(122, 115, 255, 0.15);
    --icon-danger-hover: rgba(248, 113, 113, 0.15);
    --sub-date: #6b8099;
    --sub-sep: #3d5270;
    --mask-solid: #fff;
  }

html.theme-dark[data-theme="vercel"] {
    color-scheme: dark;
    --bg: #000;
    --card: #111;
    --ink: #ededed;
    --muted: #888;
    --line: #333;
    --primary: #3291ff;
    --primary-solid: #0070f3;
    --primary-ink: #ffffff;
    --green: #4ade80;
    --green-bg: rgba(74, 222, 128, 0.14);
    --orange: #fb923c;
    --orange-bg: rgba(251, 146, 60, 0.16);
    --red: #f87171;
    --surface: #1a1a1a;
    --surface-muted: #0a0a0a;
    --surface-raised: #222;
    --surface-hover: #2a2a2a;
    --surface-hover-strong: #333;
    --surface-subtle: #2a2a2a;
    --readonly-bg: #0a0a0a;
    --row-hover: #0a1628;
    --divider: #333;
    --divider-strong: #444;
    --badge-bg: rgba(50, 145, 255, 0.18);
    --chip-bg: #222;
    --chip-white-bg: rgba(251, 191, 36, 0.18);
    --chip-white-text: #fbbf24;
    --chip-white-border: rgba(251, 191, 36, 0.4);
    --modal-backdrop: rgba(0, 0, 0, 0.75);
    --focus-ring: rgba(50, 145, 255, 0.25);
    --icon-primary-hover: rgba(50, 145, 255, 0.15);
    --icon-danger-hover: rgba(248, 113, 113, 0.15);
    --sub-date: #666;
    --sub-sep: #444;
    --mask-solid: #fff;
  }

html.theme-dark[data-theme="notion"] {
    color-scheme: dark;
    --bg: #191919;
    --card: #252525;
    --ink: #e6e4e0;
    --muted: #9b9a97;
    --line: #373737;
    --primary: #529cca;
    --primary-solid: #2383e2;
    --primary-ink: #ffffff;
    --green: #4ade80;
    --green-bg: rgba(74, 222, 128, 0.14);
    --orange: #fb923c;
    --orange-bg: rgba(251, 146, 60, 0.16);
    --red: #f87171;
    --surface: #2f2f2f;
    --surface-muted: #1f1f1f;
    --surface-raised: #333;
    --surface-hover: #3a3a3a;
    --surface-hover-strong: #444;
    --surface-subtle: #3a3a3a;
    --readonly-bg: #1f1f1f;
    --row-hover: #1e2a35;
    --divider: #373737;
    --divider-strong: #444;
    --badge-bg: rgba(82, 156, 202, 0.18);
    --chip-bg: #333;
    --chip-white-bg: rgba(251, 191, 36, 0.18);
    --chip-white-text: #fbbf24;
    --chip-white-border: rgba(251, 191, 36, 0.4);
    --modal-backdrop: rgba(0, 0, 0, 0.7);
    --focus-ring: rgba(82, 156, 202, 0.25);
    --icon-primary-hover: rgba(82, 156, 202, 0.15);
    --icon-danger-hover: rgba(248, 113, 113, 0.15);
    --sub-date: #787774;
    --sub-sep: #555;
    --mask-solid: #fff;
  }

html.theme-dark[data-theme="figma"] {
    color-scheme: dark;
    --bg: #1e1e1e;
    --card: #2c2c2c;
    --ink: #fff;
    --muted: #b3b3b3;
    --line: #444;
    --primary: #b87aff;
    --primary-solid: #9333ea;
    --primary-ink: #ffffff;
    --green: #4ade80;
    --green-bg: rgba(74, 222, 128, 0.14);
    --orange: #fb923c;
    --orange-bg: rgba(251, 146, 60, 0.16);
    --red: #f87171;
    --surface: #333;
    --surface-muted: #252525;
    --surface-raised: #3a3a3a;
    --surface-hover: #404040;
    --surface-hover-strong: #4a4a4a;
    --surface-subtle: #404040;
    --readonly-bg: #252525;
    --row-hover: #2a1f3a;
    --divider: #444;
    --divider-strong: #555;
    --badge-bg: rgba(184, 122, 255, 0.18);
    --chip-bg: #3a3a3a;
    --chip-white-bg: rgba(251, 191, 36, 0.18);
    --chip-white-text: #fbbf24;
    --chip-white-border: rgba(251, 191, 36, 0.4);
    --modal-backdrop: rgba(0, 0, 0, 0.7);
    --focus-ring: rgba(184, 122, 255, 0.25);
    --icon-primary-hover: rgba(184, 122, 255, 0.15);
    --icon-danger-hover: rgba(248, 113, 113, 0.15);
    --sub-date: #888;
    --sub-sep: #555;
    --mask-solid: #fff;
  }

html.theme-dark[data-theme="supabase"] {
    color-scheme: dark;
    --bg: #1c1c1c;
    --card: #242424;
    --ink: #ededed;
    --muted: #8b8b8b;
    --line: #333;
    --primary: #3ecf8e;
    --primary-solid: #24a871;
    --primary-ink: #0f1f17;
    --green: #4ade80;
    --green-bg: rgba(62, 207, 142, 0.14);
    --orange: #fb923c;
    --orange-bg: rgba(251, 146, 60, 0.16);
    --red: #f87171;
    --surface: #2a2a2a;
    --surface-muted: #1a1a1a;
    --surface-raised: #303030;
    --surface-hover: #363636;
    --surface-hover-strong: #404040;
    --surface-subtle: #333;
    --readonly-bg: #1a1a1a;
    --row-hover: #1a2e24;
    --divider: #333;
    --divider-strong: #444;
    --badge-bg: rgba(62, 207, 142, 0.18);
    --chip-bg: #333;
    --chip-white-bg: rgba(251, 191, 36, 0.18);
    --chip-white-text: #fbbf24;
    --chip-white-border: rgba(251, 191, 36, 0.4);
    --modal-backdrop: rgba(0, 0, 0, 0.7);
    --focus-ring: rgba(62, 207, 142, 0.25);
    --icon-primary-hover: rgba(62, 207, 142, 0.15);
    --icon-danger-hover: rgba(248, 113, 113, 0.15);
    --sub-date: #6b8b7a;
    --sub-sep: #444;
    --mask-solid: #fff;
  }

html.theme-dark[data-theme="shopify"] {
    color-scheme: dark;
    --bg: #1a1a1a;
    --card: #242424;
    --ink: #e3e5e7;
    --muted: #8c9196;
    --line: #3a3f44;
    --primary: #47c1a8;
    --primary-solid: #008060;
    --primary-ink: #ffffff;
    --green: #47c1a8;
    --green-bg: rgba(71, 193, 168, 0.14);
    --orange: #fb923c;
    --orange-bg: rgba(251, 146, 60, 0.16);
    --red: #f87171;
    --surface: #2e2e2e;
    --surface-muted: #1f1f1f;
    --surface-raised: #333;
    --surface-hover: #3a3a3a;
    --surface-hover-strong: #444;
    --surface-subtle: #3a3a3a;
    --readonly-bg: #1f1f1f;
    --row-hover: #1a2e28;
    --divider: #3a3f44;
    --divider-strong: #444;
    --badge-bg: rgba(71, 193, 168, 0.18);
    --chip-bg: #333;
    --chip-white-bg: rgba(251, 191, 36, 0.18);
    --chip-white-text: #fbbf24;
    --chip-white-border: rgba(251, 191, 36, 0.4);
    --modal-backdrop: rgba(0, 0, 0, 0.7);
    --focus-ring: rgba(71, 193, 168, 0.25);
    --icon-primary-hover: rgba(71, 193, 168, 0.15);
    --icon-danger-hover: rgba(248, 113, 113, 0.15);
    --sub-date: #6d7175;
    --sub-sep: #444;
    --mask-solid: #fff;
  }

html.theme-dark[data-theme="airbnb"] {
    color-scheme: dark;
    --bg: #121212;
    --card: #1e1e1e;
    --ink: #f0f0f0;
    --muted: #aaa;
    --line: #333;
    --primary: #ff7e82;
    --primary-solid: #e5484d;
    --primary-ink: #ffffff;
    --green: #4ade80;
    --green-bg: rgba(74, 222, 128, 0.14);
    --orange: #fb923c;
    --orange-bg: rgba(251, 146, 60, 0.16);
    --red: #f87171;
    --surface: #282828;
    --surface-muted: #1a1a1a;
    --surface-raised: #303030;
    --surface-hover: #363636;
    --surface-hover-strong: #404040;
    --surface-subtle: #333;
    --readonly-bg: #1a1a1a;
    --row-hover: #2a1a1a;
    --divider: #333;
    --divider-strong: #444;
    --badge-bg: rgba(255, 126, 130, 0.18);
    --chip-bg: #333;
    --chip-white-bg: rgba(251, 191, 36, 0.18);
    --chip-white-text: #fbbf24;
    --chip-white-border: rgba(251, 191, 36, 0.4);
    --modal-backdrop: rgba(0, 0, 0, 0.7);
    --focus-ring: rgba(255, 126, 130, 0.25);
    --icon-primary-hover: rgba(255, 126, 130, 0.15);
    --icon-danger-hover: rgba(248, 113, 113, 0.15);
    --sub-date: #888;
    --sub-sep: #555;
    --mask-solid: #fff;
  }

html.theme-dark[data-theme="sky"] {
    color-scheme: dark;
    --bg: #0c1929;
    --card: #0f2744;
    --ink: #e0f2fe;
    --muted: #7dd3fc;
    --line: #1e3a5f;
    --primary: #38bdf8;
    --primary-solid: #0369a1;
    --primary-ink: #ffffff;
    --primary-text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
    --green: #4ade80;
    --green-bg: rgba(74, 222, 128, 0.14);
    --orange: #fb923c;
    --orange-bg: rgba(251, 146, 60, 0.16);
    --red: #f87171;
    --surface: #153050;
    --surface-muted: #0a1628;
    --surface-raised: #1a3a5c;
    --surface-hover: #1e4066;
    --surface-hover-strong: #244a70;
    --surface-subtle: #1e4066;
    --readonly-bg: #0a1628;
    --row-hover: #0f2a40;
    --divider: #1e3a5f;
    --divider-strong: #244a70;
    --badge-bg: rgba(56, 189, 248, 0.18);
    --chip-bg: #1e3a5f;
    --chip-white-bg: rgba(251, 191, 36, 0.18);
    --chip-white-text: #fbbf24;
    --chip-white-border: rgba(251, 191, 36, 0.4);
    --modal-backdrop: rgba(0, 0, 0, 0.7);
    --focus-ring: rgba(56, 189, 248, 0.25);
    --icon-primary-hover: rgba(56, 189, 248, 0.15);
    --icon-danger-hover: rgba(248, 113, 113, 0.15);
    --sub-date: #5ba3cc;
    --sub-sep: #3d6a8a;
    --mask-solid: #fff;
  }

html.theme-dark[data-theme="rose"] {
    color-scheme: dark;
    --bg: #1a0a0f;
    --card: #2a1018;
    --ink: #fecdd3;
    --muted: #fb7185;
    --line: #4c1528;
    --primary: #fb7185;
    --primary-solid: #e11d48;
    --primary-ink: #ffffff;
    --green: #4ade80;
    --green-bg: rgba(74, 222, 128, 0.14);
    --orange: #fb923c;
    --orange-bg: rgba(251, 146, 60, 0.16);
    --red: #f87171;
    --surface: #351520;
    --surface-muted: #150810;
    --surface-raised: #401828;
    --surface-hover: #4a1c30;
    --surface-hover-strong: #552038;
    --surface-subtle: #4a1c30;
    --readonly-bg: #150810;
    --row-hover: #2a1020;
    --divider: #4c1528;
    --divider-strong: #552038;
    --badge-bg: rgba(251, 113, 133, 0.18);
    --chip-bg: #401828;
    --chip-white-bg: rgba(251, 191, 36, 0.18);
    --chip-white-text: #fbbf24;
    --chip-white-border: rgba(251, 191, 36, 0.4);
    --modal-backdrop: rgba(0, 0, 0, 0.7);
    --focus-ring: rgba(251, 113, 133, 0.25);
    --icon-primary-hover: rgba(251, 113, 133, 0.15);
    --icon-danger-hover: rgba(248, 113, 113, 0.15);
    --sub-date: #e879a0;
    --sub-sep: #881337;
    --mask-solid: #fff;
  }