:root {
  
  --lx-n-l1: #ffffff;  --lx-n-l2: #f7f9fc;  --lx-n-l3: #eef3fa;  --lx-n-l4: #e9eff7;
  --lx-n-l5: #e4ebf5;  --lx-n-l6: #dfe7f2;  --lx-n-l7: #c7d3e5;  --lx-n-l8: #adbad1;
  --lx-n-l9: #93a1bd;  --lx-n-l10: #76839e; --lx-n-l11: #5a6580; --lx-n-l12: #17233c;
  
  --lx-n-d1: #0f1826;  --lx-n-d2: #182234;  --lx-n-d3: #1f2b40;  --lx-n-d4: #233047;
  --lx-n-d5: #28354d;  --lx-n-d6: #2c3a54;  --lx-n-d7: #394a68;  --lx-n-d8: #4f607c;
  --lx-n-d9: #65758f;  --lx-n-d10: #7c8ba6; --lx-n-d11: #93a1bd; --lx-n-d12: #e7eefb;
  
  --lx-b-l1: #f4f8fd;  --lx-b-l2: #e7f0fb;  --lx-b-l3: #d3e4f7;  --lx-b-l4: #c1d8f3;
  --lx-b-l5: #afccf0;  --lx-b-l6: #9dc0ec;  --lx-b-l7: #5f95d9;  --lx-b-l8: #477dc9;
  --lx-b-l9: #2f65b9;  --lx-b-l10: #2a5aa5; --lx-b-l11: #234f95; --lx-b-l12: #122a4f;
  
  --lx-b-d1: #0b1524;  --lx-b-d2: #0f1f38;  --lx-b-d3: #132949;  --lx-b-d4: #173359;
  --lx-b-d5: #1c3e68;  --lx-b-d6: #204878;  --lx-b-d7: #295a97;  --lx-b-d8: #3066b4;
  --lx-b-d9: #3672d1;  --lx-b-d10: #4d86df; --lx-b-d11: #7aa7e8; --lx-b-d12: #cfe0f8;
  
  --lx-gold-l: #e8b931;  --lx-gold-d: #f0c94f;
  --lx-gold-ink-l: #8a6a0f; --lx-gold-ink-d: #e8c34d;
  --lx-ok-l: #1a8f60;  --lx-ok-d: #37d38f;

  
  --lx-r-sm: 5px;
  --lx-r: 6px;
  --lx-r-pill: 999px;

  
  --lx-font: "Plus Jakarta Sans", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --lx-base: 16px;

  --lx-gap: 20px;
  --lx-pad: 20px;
  --lx-rail-w: 232px;
}


:root {
  --lx-primary: var(--lx-b-l9);
  --lx-primary-dk: var(--lx-b-l11);
  --lx-ink: var(--lx-n-l12);
  --lx-accent: var(--lx-gold-l);
  --lx-accent-ink: var(--lx-gold-ink-l);
  --lx-bg: var(--lx-n-l2);
  --lx-surface: var(--lx-n-l1);
  --lx-surface-2: var(--lx-n-l3);
  --lx-line: var(--lx-n-l6);
  --lx-line-strong: var(--lx-n-l7);
  --lx-text: var(--lx-n-l12);
  --lx-muted: var(--lx-n-l11);
  --lx-ok: var(--lx-ok-l);
  --lx-shadow: 0 4px 16px rgba(7, 20, 46, .07);
  --lx-shadow-sm: 0 1px 5px rgba(7, 20, 46, .06);
}



[data-mode="dark"] {
  --lx-primary: var(--lx-b-d9);
  --lx-primary-dk: var(--lx-b-d11);
  --lx-ink: var(--lx-n-d12);
  --lx-accent: var(--lx-gold-d);
  --lx-accent-ink: var(--lx-gold-ink-d);
  --lx-bg: var(--lx-n-d1);
  --lx-surface: var(--lx-n-d2);
  --lx-surface-2: var(--lx-n-d3);
  --lx-line: var(--lx-n-d6);
  --lx-line-strong: var(--lx-n-d7);
  --lx-text: var(--lx-n-d12);
  --lx-muted: var(--lx-n-d11);
  --lx-ok: var(--lx-ok-d);
  --lx-shadow: 0 6px 22px rgba(0, 0, 0, .5);
  --lx-shadow-sm: 0 1px 6px rgba(0, 0, 0, .4);
}



@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    --lx-primary: var(--lx-b-d9);
    --lx-primary-dk: var(--lx-b-d11);
    --lx-ink: var(--lx-n-d12);
    --lx-accent: var(--lx-gold-d);
    --lx-accent-ink: var(--lx-gold-ink-d);
    --lx-bg: var(--lx-n-d1);
    --lx-surface: var(--lx-n-d2);
    --lx-surface-2: var(--lx-n-d3);
    --lx-line: var(--lx-n-d6);
    --lx-line-strong: var(--lx-n-d7);
    --lx-text: var(--lx-n-d12);
    --lx-muted: var(--lx-n-d11);
    --lx-ok: var(--lx-ok-d);
    --lx-shadow: 0 6px 22px rgba(0, 0, 0, .5);
    --lx-shadow-sm: 0 1px 6px rgba(0, 0, 0, .4);
  }
}