:root {
  /* Palet Warna Inti (Resmi Sesuai Guideline) */
  --color-ink: #13205c; /* Judul, teks utama, tombol utama */
  --color-accent: #f5b700; /* Header tabel, fokus input, tombol sekunder penting */
  --color-accent-subtle: #fff3c4; /* Baris tabel selang-seling, highlight hasil input */
  --color-radius: #4cc3e0; /* Hanya untuk lingkaran radius dan pin cabang */
  --color-paper: #fbfbf8; /* Latar halaman */
  --color-text-secondary: #5a607a; /* Keterangan, label kecil, catatan */
  --color-line: #e3e5ec; /* Pemisah dan border tipis */

  /* Warna Verdict (hanya untuk badge verdict & teks status) */
  --color-verdict-layak: #1e7a4c;
  --color-verdict-pertimbangan: #b86e00;
  --color-verdict-tidak-layak: #b42318;

  /* Latar Belakang Tint Verdict Lembut */
  --color-verdict-layak-bg: #eaf6ee;
  --color-verdict-pertimbangan-bg: #fef7e6;
  --color-verdict-tidak-layak-bg: #fdf1f0;

  /* Tipografi */
  --font-heading:
    "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body:
    "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;

  /* Ukuran Tipografi */
  --font-size-page-title: 32px;
  --font-size-section-title: 20px;
  --font-size-body: 16px;
  --font-size-label: 13px;

  /* Line Height & Width */
  --line-height-base: 1.5;
  --max-line-length: 75ch;

  /* Sistem Shadow Bertingkat (UI/UX Pro Max) */
  --shadow-xs: 0 1px 2px rgba(19, 32, 92, 0.04);
  --shadow-sm:
    0 2px 4px rgba(19, 32, 92, 0.04), 0 1px 2px rgba(19, 32, 92, 0.02);
  --shadow-md:
    0 4px 14px rgba(19, 32, 92, 0.06), 0 1px 3px rgba(19, 32, 92, 0.03);
  --shadow-lg:
    0 12px 32px rgba(19, 32, 92, 0.08), 0 2px 6px rgba(19, 32, 92, 0.03);

  /* Fokus & Aksesibilitas (WCAG AA & UI UX Pro Max) */
  --focus-outline-width: 2px;
  --focus-outline-color: var(--color-accent);
  --focus-outline-offset: 2px;
  --min-touch-target: 44px;
  --border-radius: 6px;
  --border-radius-sm: 4px;
  --border-radius-pill: 9999px;

  /* Timing & Easing */
  --transition-fast: 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Base Reset & Typography */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  min-height: 100%;
  background-color: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings */
h1,
h2,
h3,
.heading-page,
.heading-section {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-ink);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

h1,
.heading-page {
  font-size: var(--font-size-page-title);
}

h2,
.heading-section {
  font-size: var(--font-size-section-title);
}

/* Numeric Formatting Helper (Wajib Konsisten) */
.tabular-nums {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  letter-spacing: -0.01em;
}

/* Accessible Keyboard Focus (Amber 2px) */
:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-outline-color);
  outline-offset: var(--focus-outline-offset);
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
}

/* Screen Reader Only Utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Respect Prefers Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}