/* =============================================================================
   ELANG CAFE BACK OFFICE — DESIGN TOKENS (Premium Dark Luxury, 30 Okt 2026)
   Palet dasar dari brief redesign; dua nilai disesuaikan setelah diukur (WCAG 2.x):
     - text-muted #827A74 → #958C84: aslinya 4,1–4,4:1 di kartu, kini 5,2–6,1:1.
     - secondary #AB4E1E hanya 3,1–3,7:1 → dipakai sebagai ISIAN dekoratif saja;
       teks berwarna terakota memakai --color-secondary-text #D0703E (5,0–5,8:1).
   Kontras terukur lainnya: teks utama 14,1–16,5:1 · teks kedua 7,2–8,5:1 ·
   emas 7,1–8,3:1 di permukaan gelap · teks gelap di tombol emas 8,3:1 (hover 10,6:1).
   Semua komponen membaca token ini; Bootstrap dipetakan di bagian bawah supaya
   form/tabel/alert yang sudah ada ikut bergaya tanpa mengubah templat.
   ============================================================================= */
:root {
  --color-background: #0B0603;
  --color-surface: #1A120E;
  --color-surface-elevated: #241913;
  --color-surface-sunken: #120C09;
  --color-surface-hover: #2C1F18;

  --color-primary: #D09D57;
  --color-primary-hover: #E0B575;
  --color-primary-soft: rgba(208, 157, 87, 0.12);
  --color-primary-ring: rgba(208, 157, 87, 0.35);
  --color-on-primary: #1A0F06;

  --color-secondary: #AB4E1E;
  --color-secondary-text: #D0703E;
  --color-brown: #562510;

  --color-text-primary: #EDE8DE;
  --color-text-secondary: #AAA8A4;
  --color-text-muted: #958C84;

  --color-border: rgba(208, 157, 87, 0.14);
  --color-border-strong: rgba(208, 157, 87, 0.26);
  --color-divider: rgba(237, 232, 222, 0.07);

  --color-success: #48B58A;
  --color-danger: #E57070;
  --color-warning: #D9A65C;
  --color-info: #6BAED6;
  --color-success-soft: rgba(72, 181, 138, 0.14);
  --color-danger-soft: rgba(229, 112, 112, 0.14);
  --color-warning-soft: rgba(217, 166, 92, 0.14);
  --color-info-soft: rgba(107, 174, 214, 0.14);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;

  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs: 0.75rem;   /* 12 — label kapital, badge */
  --fs-sm: 0.8125rem; /* 13 — teks kedua, sel tabel padat */
  --fs-md: 0.875rem;  /* 14 — teks isi */
  --fs-lg: 1rem;      /* 16 — judul kartu */
  --fs-xl: 1.375rem;  /* 22 — judul halaman */
  --fs-2xl: 1.75rem;  /* 28 — angka statistik */

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.5);
  --shadow-gold: 0 6px 18px rgba(208, 157, 87, 0.22);

  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;

  --sidebar-width: 264px;
  --sidebar-width-collapsed: 76px;
  --topbar-height: 64px;
  --bottomnav-height: 68px;
}

/* ---- Pemetaan ke Bootstrap 5.3 (mode gelap) ---- */
[data-bs-theme="dark"] {
  color-scheme: dark;
  --bs-body-bg: var(--color-background);
  --bs-body-bg-rgb: 11, 6, 3;
  --bs-body-color: var(--color-text-primary);
  --bs-body-color-rgb: 237, 232, 222;
  --bs-body-font-family: var(--font-ui);
  --bs-body-font-size: var(--fs-md);
  --bs-emphasis-color: #FFFFFF;
  --bs-secondary-color: var(--color-text-secondary);
  --bs-tertiary-color: var(--color-text-muted);
  --bs-secondary-bg: var(--color-surface-elevated);
  --bs-tertiary-bg: var(--color-surface);
  --bs-border-color: var(--color-border);
  --bs-border-color-translucent: var(--color-border);
  --bs-border-radius: var(--radius-md);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-primary: var(--color-primary);
  --bs-primary-rgb: 208, 157, 87;
  --bs-primary-text-emphasis: var(--color-primary-hover);
  --bs-primary-bg-subtle: var(--color-primary-soft);
  --bs-primary-border-subtle: var(--color-border-strong);
  --bs-success-rgb: 72, 181, 138;
  --bs-danger-rgb: 229, 112, 112;
  --bs-warning-rgb: 217, 166, 92;
  --bs-info-rgb: 107, 174, 214;
  --bs-link-color: var(--color-primary);
  --bs-link-color-rgb: 208, 157, 87;
  --bs-link-hover-color: var(--color-primary-hover);
  --bs-link-hover-color-rgb: 224, 181, 117;
  --bs-heading-color: var(--color-text-primary);
  --bs-focus-ring-color: var(--color-primary-ring);
  --bs-form-valid-color: var(--color-success);
  --bs-form-invalid-color: var(--color-danger);
}