:root {
  
  
  --cls-bl1:#f5fbfd; --cls-bl2:#e7f5fa; --cls-bl3:#d3ecf4; --cls-bl4:#b9e1ee;
  --cls-bl5:#97d3e6; --cls-bl6:#5cc6e8; --cls-bl7:#1ba3d3; --cls-bl8:#1690b8;
  --cls-bl9:#12809f; --cls-bl10:#0e6f8a; --cls-bl11:#0d5f77; --cls-bl12:#0a3f50;
  
  --cls-bd1:#0a1a20; --cls-bd2:#0f242c; --cls-bd3:#143039; --cls-bd4:#1a3d48;
  --cls-bd5:#204a57; --cls-bd6:#2a6172; --cls-bd7:#2f93b8; --cls-bd8:#2fa6cf;
  --cls-bd9:#35b6e0; --cls-bd10:#50c1e6; --cls-bd11:#7ed3ec; --cls-bd12:#e8ecfb;
  
  --cls-nl1:#ffffff; --cls-nl2:#f4f8fb; --cls-nl3:#e7f1f6; --cls-nl4:#deeaf1;
  --cls-nl5:#d7e5ec; --cls-nl6:#c7d8e2; --cls-nl7:#b0c4d2; --cls-nl8:#93a8bb;
  --cls-nl9:#7986a3; --cls-nl10:#656d8a; --cls-nl11:#444b6b; --cls-nl12:#13153e;
  
  --cls-nd1:#0e1330; --cls-nd2:#171d42; --cls-nd3:#212a55; --cls-nd4:#29335f;
  --cls-nd5:#313a68; --cls-nd6:#3c4776; --cls-nd7:#4a5688; --cls-nd8:#5c6799;
  --cls-nd9:#6b76a0; --cls-nd10:#7f89ad; --cls-nd11:#aab2d4; --cls-nd12:#e8ecfb;

  
  
  --cls-bg: var(--cls-nl2);
  --cls-surface: var(--cls-nl1);
  --cls-surface-2: var(--cls-nl3);
  --cls-line: var(--cls-nl5);
  --cls-text: var(--cls-nl12);
  --cls-text-soft: var(--cls-nl11);
  --cls-text-mute: var(--cls-nl10);
  --cls-primary: var(--cls-bl9);
  --cls-primary-bright: var(--cls-bl7);
  --cls-primary-ink: var(--cls-bl9);
  --cls-primary-weak: #e2f4fa;
  --cls-on-primary: #ffffff;
  --cls-secondary: #13153e;
  --cls-on-secondary: #ffffff;
  --cls-accent: #f89d94;
  --cls-accent-ink: #e0685c;
  --cls-accent-weak: #fdf1f0;
  --cls-on-accent: #5b1d16;
  --cls-good: #23a26d;
  --cls-good-weak: #e4f5ee;
  --cls-on-good: #06251b;
  --cls-star: #f5b400;

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

  
  --cls-shadow: 0 3px 12px rgba(19, 21, 62, .08);
  --cls-shadow-lg: 0 8px 24px rgba(19, 21, 62, .12);

  
  --cls-font: "Roboto", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;

  --cls-maxw: 1140px;
}



[data-mode="dark"] {
  --cls-bg: var(--cls-nd1);
  --cls-surface: var(--cls-nd2);
  --cls-surface-2: var(--cls-nd3);
  --cls-line: var(--cls-nd5);
  --cls-text: var(--cls-nd12);
  --cls-text-soft: var(--cls-nd11);
  --cls-text-mute: var(--cls-nd10);
  --cls-primary: var(--cls-bd9);
  --cls-primary-bright: var(--cls-bd10);
  --cls-primary-ink: var(--cls-bd10);
  --cls-primary-weak: #123243;
  --cls-on-primary: #04202b;
  --cls-secondary: #1b2150;
  --cls-on-secondary: #ffffff;
  --cls-accent: #f89d94;
  --cls-accent-ink: #ff9a8f;
  --cls-accent-weak: #3a1a17;
  --cls-on-accent: #3d0f0a;
  --cls-good: #35c07f;
  --cls-good-weak: #10321f;
  --cls-on-good: #06251b;
  --cls-star: #f5b400;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    --cls-bg: var(--cls-nd1);
    --cls-surface: var(--cls-nd2);
    --cls-surface-2: var(--cls-nd3);
    --cls-line: var(--cls-nd5);
    --cls-text: var(--cls-nd12);
    --cls-text-soft: var(--cls-nd11);
    --cls-text-mute: var(--cls-nd10);
    --cls-primary: var(--cls-bd9);
    --cls-primary-bright: var(--cls-bd10);
    --cls-primary-ink: var(--cls-bd10);
    --cls-primary-weak: #123243;
    --cls-on-primary: #04202b;
    --cls-secondary: #1b2150;
    --cls-on-secondary: #ffffff;
    --cls-accent: #f89d94;
    --cls-accent-ink: #ff9a8f;
    --cls-accent-weak: #3a1a17;
    --cls-on-accent: #3d0f0a;
    --cls-good: #35c07f;
    --cls-good-weak: #10321f;
    --cls-on-good: #06251b;
    --cls-star: #f5b400;
  }
}