:root {
  
  
  --app-bl1:#f9fbfd; --app-bl2:#f1f5fb; --app-bl3:#e2ebf8; --app-bl4:#cfdff4;
  --app-bl5:#b9cfef; --app-bl6:#9ebce5; --app-bl7:#81a6d9; --app-bl8:#6690cc;
  --app-bl9:#1f6fe0; --app-bl10:#135ad1; --app-bl11:#1a4f9e; --app-bl12:#0f2f66;
  
  --app-bd1:#121821; --app-bd2:#171f2e; --app-bd3:#1c283e; --app-bd4:#21314d;
  --app-bd5:#263a5c; --app-bd6:#2c4672; --app-bd7:#34558d; --app-bd8:#3d67ae;
  --app-bd9:#3f86ff; --app-bd10:#659eff; --app-bd11:#6ba4ff; --app-bd12:#eaf0ff;
  
  --app-nl1:#ffffff; --app-nl2:#f4f6fb; --app-nl3:#eef1f7; --app-nl4:#e6e9f1;
  --app-nl5:#dde1ec; --app-nl6:#d0d5e2; --app-nl7:#bcc2d4; --app-nl8:#a3aac1;
  --app-nl9:#868ea6; --app-nl10:#646b80; --app-nl11:#4e576d; --app-nl12:#1b2333;
  
  --app-nd1:#12172a; --app-nd2:#1a2236; --app-nd3:#232c46; --app-nd4:#2b3550;
  --app-nd5:#313c60; --app-nd6:#3b4770; --app-nd7:#465488; --app-nd8:#56659c;
  --app-nd9:#6b7ba8; --app-nd10:#808daf; --app-nd11:#aeb8d4; --app-nd12:#eaf0ff;

  
  
  --app-bg: var(--app-nl3);
  --app-surface: var(--app-nl1);
  --app-surface-2: var(--app-nl2);
  --app-line: var(--app-nl4);
  --app-text: var(--app-nl12);
  --app-text-soft: var(--app-nl11);
  --app-text-mute: var(--app-nl10);
  --app-primary: var(--app-bl9);
  --app-primary-ink: var(--app-bl10);
  --app-primary-weak: var(--app-bl3);
  --app-on-primary: #ffffff;
  --app-secondary: #673bb7;
  --app-accent: #10d876;
  --app-accent-ink: #0a9b55;
  --app-accent-weak: #d5f7e6;
  --app-on-accent: #05341f;
  --app-danger: #f0475b;
  --app-danger-weak: #fde0e4;

  
  --app-r: 16px;
  --app-r-sm: 12px;
  --app-r-lg: 22px;
  --app-r-pill: 999px;

  
  --app-shadow: 0 6px 20px rgba(27, 35, 51, .07);
  --app-shadow-lg: 0 12px 34px rgba(27, 35, 51, .12);
  --app-shadow-fab: 0 8px 22px rgba(30, 116, 253, .38);

  
  --app-font: "Montserrat", system-ui, -apple-system, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;

  --app-shell: 640px;
}



[data-mode="dark"] {
  --app-bg: var(--app-nd1);
  --app-surface: var(--app-nd2);
  --app-surface-2: var(--app-nd3);
  --app-line: var(--app-nd5);
  --app-text: var(--app-nd12);
  --app-text-soft: var(--app-nd11);
  --app-text-mute: var(--app-nd10);
  --app-primary: var(--app-bd9);
  --app-primary-ink: var(--app-bd10);
  --app-primary-weak: var(--app-bd3);
  --app-on-primary: #08122b;
  --app-secondary: #a98be6;
  --app-accent: #22e089;
  --app-accent-ink: #4dedaa;
  --app-accent-weak: #10321f;
  --app-on-accent: #05341f;
  --app-danger: #ff6274;
  --app-danger-weak: #3a1720;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    --app-bg: var(--app-nd1);
    --app-surface: var(--app-nd2);
    --app-surface-2: var(--app-nd3);
    --app-line: var(--app-nd5);
    --app-text: var(--app-nd12);
    --app-text-soft: var(--app-nd11);
    --app-text-mute: var(--app-nd10);
    --app-primary: var(--app-bd9);
    --app-primary-ink: var(--app-bd10);
    --app-primary-weak: var(--app-bd3);
    --app-on-primary: #08122b;
    --app-secondary: #a98be6;
    --app-accent: #22e089;
    --app-accent-ink: #4dedaa;
    --app-accent-weak: #10321f;
    --app-on-accent: #05341f;
    --app-danger: #ff6274;
    --app-danger-weak: #3a1720;
  }
}