@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap");

:root {
  --brand-bg: #f2f5f9;
  --brand-surface: #ffffff;
  --brand-surface-alt: #f8fbff;
  --brand-primary: #0d6efd;
  --brand-primary-hover: #0b5ed7;
  --brand-primary-active: #0a58ca;
  --brand-primary-subtle: #cfe2ff;
  --brand-primary-subtle-2: #e7f1ff;
  --brand-primary-border-subtle: #9ec5fe;
  --brand-text: #212529;
  --brand-subtle: #6c757d;
  --brand-border: #dee2e6;
  --brand-selected-bg: var(--brand-primary-subtle-2);
  --brand-selected-text: var(--brand-primary-active);
  --brand-logo-shadow: rgba(13, 110, 253, 0.2);
  --brand-focus-ring: rgba(13, 110, 253, 0.25);
  --brand-danger: #dc3545;
  --brand-secondary: #6c757d;
  --brand-secondary-strong: #5c636a;
  --brand-success: #198754;
  --brand-warning: #ffc107;
  --bs5-radius-sm: 0.375rem;
  --bs5-radius: 0.5rem;
  --bs5-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --bs5-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.12);
  --brand-font-sans: "Noto Sans TC", "Noto Sans", "PingFang TC", "Microsoft JhengHei", Roboto, sans-serif;
  --density-scale: 1;
  --density-header-h: 62px;
  --density-control-h: 2.55rem;
  --density-list-py: 0.72rem;
  --density-list-px: 0.86rem;
}

html.dark-mode {
  --brand-bg: #0f172a;
  --brand-surface: #162033;
  --brand-surface-alt: #1d2a40;
  --brand-primary: #5ea8ff;
  --brand-primary-hover: #4592ef;
  --brand-primary-active: #3b85df;
  --brand-primary-subtle: #1f3f64;
  --brand-primary-subtle-2: #243a58;
  --brand-primary-border-subtle: #3d628f;
  --brand-text: #dbe8f7;
  --brand-subtle: #9eb0c5;
  --brand-border: #2f4059;
  --brand-selected-bg: #243a58;
  --brand-selected-text: #dcecff;
  --brand-logo-shadow: rgba(64, 146, 255, 0.28);
  --brand-focus-ring: rgba(94, 168, 255, 0.35);
  --brand-danger: #ff6b7a;
  --brand-secondary: #95a3b6;
  --brand-secondary-strong: #a8b5c8;
  --brand-success: #43bf82;
  --brand-warning: #ffcf5a;
}

@media screen and (max-width: 1200px) {
  :root {
    --density-scale: 0.93;
    --density-header-h: 54px;
    --density-control-h: 2.2rem;
    --density-list-py: 0.52rem;
    --density-list-px: 0.6rem;
  }
}