/* Hallmark · tokens · theme: Almanac · genre: editorial
 * axes: paper=light(95%, parchment 85°) · display=roman-serif · accent=warm (merah bata 32°)
 *
 * Ekspor portabel dari token yang dipakai index.html. Impor berkas ini di
 * halaman lain agar sistemnya ikut pindah, bukan ditemukan ulang.
 * Aturan: tidak ada halaman yang boleh menulis warna atau font-family mentah.
 * Kalau butuh nilai yang belum ada di sini — tambahkan di sini dulu, lalu
 * rujuk lewat namanya.
 */

:root {
  /* ═══ permukaan ═══ */
  --color-paper:      oklch(95% 0.013 85);      /* kertas perkamen — bukan putih murni */
  --color-paper-2:    oklch(92.5% 0.016 85);    /* pita bertingkat */
  --color-paper-3:    oklch(89% 0.019 85);      /* hover lebih dalam */
  --color-card:       oklch(97.2% 0.010 85);    /* kartu terangkat */

  /* ═══ tinta ═══ */
  --color-ink:        oklch(21% 0.014 65);      /* 12.6:1 di atas paper */
  --color-ink-2:      oklch(41% 0.012 65);      /* teks isi redup — 5.2:1 */
  --color-muted:      oklch(47% 0.011 70);      /* keterangan kecil — 4.6:1 */

  /* ═══ garis ═══ */
  --color-rule:       oklch(80% 0.012 85);      /* rambut garis biasa */
  --color-rule-2:     oklch(66% 0.014 85);      /* garis tegas / hover */

  /* ═══ aksen — satu, hangat, < 3% viewport ═══ */
  --color-accent:     oklch(47% 0.155 32);      /* merah bata / tinta stempel — 6.4:1 */
  --color-accent-2:   oklch(37% 0.125 32);      /* tekan / hover — 9.9:1 */
  --color-accent-ink: oklch(97% 0.010 85);      /* teks di atas bidang aksen — 6.4:1 */
  --color-focus:      oklch(47% 0.155 32);      /* cincin fokus — 6.4:1 vs paper */

  /* ═══ lapisan transparan (modifier, bukan warna palet) ═══ */
  --scrim:        oklch(21% 0.014 65 / 0.42);   /* latar di belakang dialog */
  --shadow-panel: 0 24px 60px -30px oklch(21% 0.014 65 / 0.5);

  /* ═══ sampul buku (seni CSS, Tier A) ═══ */
  --color-cover-1:    oklch(88% 0.038 85);      /* manila */
  --color-cover-2:    oklch(84% 0.045 145);     /* hijau arsip */
  --color-cover-3:    oklch(86% 0.040 55);      /* jingga pudar */
  --color-cover-4:    oklch(85% 0.035 245);     /* biru linen */
  --color-cover-5:    oklch(87% 0.030 20);      /* merah bata pudar */

  /* ═══ huruf — 2 + 1 ═══ */
  --font-display:  "Newsreader", ui-serif, Georgia, serif;          /* judul, wordmark */
  --font-body:     "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-outlier:  "JetBrains Mono", ui-monospace, monospace;       /* satu peran: kode referensi
                                                                       (nomor klasifikasi + tuts kbd) */

  /* ═══ skala ukuran — rasio 1.25 ═══ */
  --text-xs:    0.72rem;
  --text-sm:    0.82rem;
  --text-base:  1rem;
  --text-md:    1.15rem;
  --text-lg:    1.45rem;
  --text-xl:    1.85rem;
  --text-2xl:   2.3rem;
  --text-3xl:   2.9rem;
  --text-display-s: clamp(1.9rem, 3vw + 0.8rem, 2.9rem);

  /* ═══ jarak — basis 4pt ═══ */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  --shell-pad: clamp(1.15rem, 4vw, 2.75rem);
  --shell-max: 74rem;

  /* ═══ garis & sudut ═══ */
  --rule-hair:  1px;
  --rule-bold:  2px;
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-pill: 999px;

  /* ═══ gerak — Almanac berjalan 0.85× ═══ */
  --dur-micro: 100ms;
  --dur-short: 190ms;
  --dur-long:  360ms;
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ═══ lapisan ═══ */
  --z-base:     1;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;
}