:root,
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f5f8;
  --surface: #ffffff;
  --surface-2: #f7f9fb;
  --surface-3: #eef1f5;
  --border: #e7eaef;
  /* Batas kontrol yang bisa diisi. --border (1,2:1 terhadap permukaan) cukup
     untuk garis pemisah, tetapi terlalu samar sebagai tepi kotak isian:
     WCAG 1.4.11 meminta 3:1 untuk komponen interaktif. */
  --border-strong: #8b95a8;
  --fg: #101828;
  --muted: #5b6b82;
  --faint: #55647a;
  --accent: #2563eb;
  --accent-hover: #1e40af;
  --accent-weak: #eef4ff;
  --ok: #16a34a;
  --danger: #dc2626;
  --warn: #d97706;

  /* Varian teks status. Warna dasar di atas dipakai untuk latar, border, dan
     ikon; sebagai teks nilainya hanya 3,0–4,1:1 di atas tint 10% sehingga
     gagal WCAG AA. Tiga token berikut khusus untuk `color:` — jangan dipakai
     sebagai latar karena kontrasnya terhadap teks putih justru rendah. */
  --ok-text: #166534;
  --warn-text: #92400e;
  --danger-text: #b91c1c;
  --accent-text: #1d4ed8;
  --purple-text: #6d28d9;
  --teal-text: #0f766e;
  --cyan-text: #155e75;

  /* Warna teks di atas --accent. Dipisah dari --accent sendiri karena aksen
     tema gelap sengaja dicerahkan; teks putih di atasnya hanya 3,27:1. */
  --accent-fg: #ffffff;

  /* Alias yang sudah terlanjur dipakai modul. Sebelumnya tidak pernah
     didefinisikan sehingga var() jatuh ke nilai cadangan tema terang dan tidak
     ikut berubah saat tema gelap aktif. */
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --line: var(--border);
  --brand: var(--accent);

  --panel-radius: 14px;
  --control-radius: 9px;
  --page-padding: 15px;
  --panel-shadow: 0 1px 2px rgba(16, 24, 40, .04);

  /* Alias untuk Django Admin. Nilainya tetap berasal dari token aplikasi. */
  --app-bg: var(--bg);
  --app-surface: var(--surface);
  --app-surface-2: var(--surface-2);
  --app-surface-3: var(--surface-3);
  --app-border: var(--border);
  --app-fg: var(--fg);
  --app-muted: var(--muted);
  --app-faint: var(--faint);
  --app-accent: var(--accent);
  --app-accent-hover: var(--accent-hover);
  --app-accent-weak: var(--accent-weak);
  --app-ok: var(--ok);
  --app-danger: var(--danger);
  --app-warn: var(--warn);
  --app-shadow: var(--panel-shadow);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #080b12;
  --surface: #111725;
  --surface-2: #0d131f;
  --surface-3: #1a2233;
  --border: #222c3d;
  --border-strong: #5c6b81;
  --fg: #e8eef6;
  --muted: #a3b0c2;
  --faint: #aab6c7;
  --accent: #4f8cf7;
  --accent-hover: #76a7fa;
  --accent-weak: rgba(79, 140, 247, .15);
  --panel-shadow: none;
  /* Di atas permukaan gelap arah kontrasnya terbalik: teks status harus lebih
     terang daripada warna dasarnya, bukan lebih gelap. */
  --ok-text: #4ade80;
  --warn-text: #fbbf24;
  --danger-text: #f87171;
  --accent-text: #93c5fd;
  --purple-text: #c4b5fd;
  --teal-text: #5eead4;
  --cyan-text: #67e8f9;

  /* Aksen gelap (#4f8cf7) terlalu terang untuk teks putih (3,27:1). Teks tinta
     di atasnya mencapai 5,73:1 tanpa perlu menggelapkan aksennya sendiri, yang
     juga dipakai untuk tautan dan cincin fokus. */
  --accent-fg: #0b1220;
}