:root {
  
  --mag-n-l1: #ffffff;  --mag-n-l2: #eef2f6;  --mag-n-l3: #f3f6f9;  --mag-n-l4: #edf1f6;
  --mag-n-l5: #e8edf2;  --mag-n-l6: #e2e8ef;  --mag-n-l7: #ccd4de;  --mag-n-l8: #b2bbc7;
  --mag-n-l9: #98a2b0;  --mag-n-l10: #7a8494; --mag-n-l11: #5c6678; --mag-n-l12: #222c3c;
  
  --mag-n-d1: #14181f;  --mag-n-d2: #1d232d;  --mag-n-d3: #262d39;  --mag-n-d4: #2b3340;
  --mag-n-d5: #313946;  --mag-n-d6: #363f4d;  --mag-n-d7: #454f60;  --mag-n-d8: #5a6476;
  --mag-n-d9: #6f7a8b;  --mag-n-d10: #838e9f; --mag-n-d11: #97a2b3; --mag-n-d12: #e9eef5;
  
  --mag-o-l1: #fff6f3;  --mag-o-l2: #ffe9e2;  --mag-o-l3: #ffd6c9;  --mag-o-l4: #ffc8b7;
  --mag-o-l5: #ffb9a4;  --mag-o-l6: #ffab92;  --mag-o-l7: #f77a55;  --mag-o-l8: #e05d3a;
  --mag-o-l9: #c8401e;  --mag-o-l10: #b23417; --mag-o-l11: #a12f14; --mag-o-l12: #5a1c0d;
  
  --mag-o-d1: #211008;  --mag-o-d2: #2e160c;  --mag-o-d3: #3d1c10;  --mag-o-d4: #4c2313;
  --mag-o-d5: #5b2915;  --mag-o-d6: #6a3018;  --mag-o-d7: #8f3d1d;  --mag-o-d8: #af421e;
  --mag-o-d9: #cf471f;  --mag-o-d10: #e15a30; --mag-o-d11: #ff8b62; --mag-o-d12: #ffd0bd;
  
  --mag-blue-l: #1f6fb0;  --mag-blue-d: #6bb6f5;
  --mag-teal-l: #0bab97;  --mag-teal-d: #22e0c8;
  --mag-star-l: #d1810c;  --mag-star-d: #ffb43d;
  --mag-good-l: #1a9d52;  --mag-good-d: #35d47f;
  --mag-mid-l:  #c0791a;  --mag-mid-d:  #f0a63d;
  --mag-low-l:  #d23b34;  --mag-low-d:  #f0655c;
  --mag-flare:  #ff6a42;  

  
  --mag-r-sm: 3px;
  --mag-r: 4px;
  --mag-r-lg: 5px;

  
  --mag-font-head: "Open Sans", "Roboto", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --mag-font-body: "Roboto", "Open Sans", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --mag-base: 16px;

  --mag-gap: 22px;
  --mag-pad: 20px;
}


:root {
  --mag-primary: var(--mag-o-l9);
  --mag-primary-dk: var(--mag-o-l11);
  --mag-secondary: var(--mag-blue-l);
  --mag-accent: var(--mag-teal-l);
  --mag-bg: var(--mag-n-l2);
  --mag-surface: var(--mag-n-l1);
  --mag-surface-2: var(--mag-n-l3);
  --mag-line: var(--mag-n-l6);
  --mag-line-strong: var(--mag-n-l7);
  --mag-text: var(--mag-n-l12);
  --mag-muted: var(--mag-n-l11);
  --mag-star: var(--mag-star-l);
  --mag-good: var(--mag-good-l);
  --mag-mid: var(--mag-mid-l);
  --mag-low: var(--mag-low-l);
  --mag-shadow: 0 2px 10px rgba(43, 52, 68, .08);
  --mag-shadow-sm: 0 1px 4px rgba(43, 52, 68, .06);
}



[data-mode="dark"] {
  --mag-primary: var(--mag-o-d9);
  --mag-primary-dk: var(--mag-o-d11);
  --mag-secondary: var(--mag-blue-d);
  --mag-accent: var(--mag-teal-d);
  --mag-bg: var(--mag-n-d1);
  --mag-surface: var(--mag-n-d2);
  --mag-surface-2: var(--mag-n-d3);
  --mag-line: var(--mag-n-d6);
  --mag-line-strong: var(--mag-n-d7);
  --mag-text: var(--mag-n-d12);
  --mag-muted: var(--mag-n-d11);
  --mag-star: var(--mag-star-d);
  --mag-good: var(--mag-good-d);
  --mag-mid: var(--mag-mid-d);
  --mag-low: var(--mag-low-d);
  --mag-shadow: 0 4px 18px rgba(0, 0, 0, .45);
  --mag-shadow-sm: 0 1px 6px rgba(0, 0, 0, .38);
}



@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    --mag-primary: var(--mag-o-d9);
    --mag-primary-dk: var(--mag-o-d11);
    --mag-secondary: var(--mag-blue-d);
    --mag-accent: var(--mag-teal-d);
    --mag-bg: var(--mag-n-d1);
    --mag-surface: var(--mag-n-d2);
    --mag-surface-2: var(--mag-n-d3);
    --mag-line: var(--mag-n-d6);
    --mag-line-strong: var(--mag-n-d7);
    --mag-text: var(--mag-n-d12);
    --mag-muted: var(--mag-n-d11);
    --mag-star: var(--mag-star-d);
    --mag-good: var(--mag-good-d);
    --mag-mid: var(--mag-mid-d);
    --mag-low: var(--mag-low-d);
    --mag-shadow: 0 4px 18px rgba(0, 0, 0, .45);
    --mag-shadow-sm: 0 1px 6px rgba(0, 0, 0, .38);
  }
}