:root {
  
  
  --dir-bl1:#f7f8ff; --dir-bl2:#eef0ff; --dir-bl3:#e3e6ff; --dir-bl4:#d3d9ff;
  --dir-bl5:#c1caff; --dir-bl6:#adb6f7; --dir-bl7:#9aa3ee; --dir-bl8:#7d88e6;
  --dir-bl9:#4a5ae8; --dir-bl10:#3a49e0; --dir-bl11:#3f49bf; --dir-bl12:#222a5e;
  
  --dir-bd1:#121321; --dir-bd2:#17192e; --dir-bd3:#1c1f3e; --dir-bd4:#21264d;
  --dir-bd5:#262c5c; --dir-bd6:#2c3472; --dir-bd7:#343e8d; --dir-bd8:#3d49ae;
  --dir-bd9:#7d8bff; --dir-bd10:#abb4ff; --dir-bd11:#9aa5ff; --dir-bd12:#eceefb;
  
  --dir-nl1:#ffffff; --dir-nl2:#f6f7fb; --dir-nl3:#eef0f6; --dir-nl4:#e7e9f1;
  --dir-nl5:#e2e5ee; --dir-nl6:#d8dbe6; --dir-nl7:#cdd0dd; --dir-nl8:#b9bccd;
  --dir-nl9:#9a9fb2; --dir-nl10:#6b7180; --dir-nl11:#4a4f5e; --dir-nl12:#1a1c22;
  
  --dir-nd1:#14151c; --dir-nd2:#1c1e28; --dir-nd3:#262a37; --dir-nd4:#2d3140;
  --dir-nd5:#333747; --dir-nd6:#3b3f52; --dir-nd7:#434860; --dir-nd8:#545a76;
  --dir-nd9:#6e7590; --dir-nd10:#8b93aa; --dir-nd11:#b6bccf; --dir-nd12:#eceefb;

  
  
  --dir-bg: var(--dir-nl2);
  --dir-surface: var(--dir-nl1);
  --dir-surface-alt: var(--dir-nl3);
  --dir-line: var(--dir-nl5);
  --dir-line-strong: var(--dir-nl7);
  --dir-text: var(--dir-nl12);
  --dir-text-soft: var(--dir-nl11);
  --dir-text-mute: var(--dir-nl10);
  --dir-primary: var(--dir-bl9);
  --dir-primary-ink: var(--dir-bl10);
  --dir-primary-weak: var(--dir-bl2);
  --dir-on-primary: #ffffff;
  --dir-secondary: #16181f;
  --dir-secondary-hover: #000000;
  --dir-on-secondary: #ffffff;
  --dir-accent: #ffc24b;
  --dir-accent-ink: #b3801a;
  --dir-on-accent: #4a3610;
  --dir-good: #1f9d63;
  --dir-warn: #d84a3a;
  --dir-media-ink: var(--dir-nl12);

  
  --dir-r-xs: 2px;
  --dir-r: 4px;
  --dir-r-md: 6px;
  --dir-r-pill: 999px;

  
  --dir-shadow-flat: 0 0 0 1px var(--dir-line);
  --dir-shadow-hover: 0 0 0 1px var(--dir-line-strong);

  
  --dir-font: "Roboto", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --dir-num: "Roboto Mono", "Roboto", ui-monospace, monospace;

  
  --dir-gap: 16px;
  --dir-gap-lg: 24px;
  --dir-pad: 18px;
  --dir-maxw: 1160px;
}



[data-mode="dark"] {
  --dir-bg: var(--dir-nd1);
  --dir-surface: var(--dir-nd2);
  --dir-surface-alt: var(--dir-nd3);
  --dir-line: var(--dir-nd5);
  --dir-line-strong: var(--dir-nd7);
  --dir-text: var(--dir-nd12);
  --dir-text-soft: var(--dir-nd11);
  --dir-text-mute: var(--dir-nd10);
  --dir-primary: var(--dir-bd9);
  --dir-primary-ink: var(--dir-bd10);
  --dir-primary-weak: var(--dir-bd3);
  --dir-on-primary: #0e1330;
  --dir-secondary: #e6e8f5;
  --dir-secondary-hover: #ffffff;
  --dir-on-secondary: #16181f;
  --dir-accent: #e8b862;
  --dir-accent-ink: #ffce6b;
  --dir-on-accent: #2a1e05;
  --dir-good: #35c07f;
  --dir-warn: #ff6b5b;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    --dir-bg: var(--dir-nd1);
    --dir-surface: var(--dir-nd2);
    --dir-surface-alt: var(--dir-nd3);
    --dir-line: var(--dir-nd5);
    --dir-line-strong: var(--dir-nd7);
    --dir-text: var(--dir-nd12);
    --dir-text-soft: var(--dir-nd11);
    --dir-text-mute: var(--dir-nd10);
    --dir-primary: var(--dir-bd9);
    --dir-primary-ink: var(--dir-bd10);
    --dir-primary-weak: var(--dir-bd3);
    --dir-on-primary: #0e1330;
    --dir-secondary: #e6e8f5;
    --dir-secondary-hover: #ffffff;
    --dir-on-secondary: #16181f;
    --dir-accent: #e8b862;
    --dir-accent-ink: #ffce6b;
    --dir-on-accent: #2a1e05;
    --dir-good: #35c07f;
    --dir-warn: #ff6b5b;
  }
}