/* Tema kalem: tidak ada hitam pekat dan tidak ada putih menyilaukan.
   Seluruh pasangan warna di bawah sudah diverifikasi rasio kontrasnya;
   angka pada komentar adalah rasio terhadap --bg-base. */
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto-variable-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Permukaan */
  --bg-base: #f3efe7;       /* kanvas krem hangat */
  --bg-surface: #fbf8f2;    /* kartu dan panel */
  --bg-raised: #e8e2d6;     /* kepala halaman */
  --border: #d9d1c2;        /* garis pemisah, dekoratif */
  --border-strong: #8c7b5c; /* batas elemen interaktif — 3,59:1 */

  /* Teks */
  --text-primary: #2b2822;  /* 12,81:1 */
  --text-muted: #655d52;    /*  5,65:1 */
  --text-dim: #6f675c;      /*  4,86:1 */

  /* Tingkat risiko — satu-satunya tempat warna dipakai untuk menyampaikan makna */
  --ok: #2f6b4a;            /* Bersih        5,96:1 di atas kartu */
  --low: #3c6b55;           /* Rendah        5,78:1 */
  --warn: #8a6410;          /* Sedang        5,07:1 */
  --high: #a9501b;          /* Tinggi        5,15:1 */
  --danger: #9b2c22;        /* Sangat Tinggi 7,13:1 */

  /* Garis lencana: warna risiko yang dilunakkan ke permukaan kartu.
     Ditulis eksplisit, bukan color-mix(), karena Safari 15.4 belum mendukungnya. */
  --ok-line: #adc2b2;
  --low-line: #b2c2b6;
  --warn-line: #d0c09c;
  --high-line: #dcb8a0;
  --danger-line: #d7aaa3;

  /* Aksi: isian netral, bukan warna. Warna disimpan untuk tingkat risiko saja. */
  --action: #2b2822;
  --action-text: #f6f2ea;   /* 13,16:1 di atas --action */

  /* Tipografi */
  --display: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --body: Roboto, "Segoe UI", system-ui, sans-serif;

  /* Ritme */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
}