/* Hallmark · macrostructure: bespoke (alur sesi bertahap) · tone: austere
 * theme: custom, diturunkan dari Grid · genre: editorial · register: A (instrumen)
 * design-system: design.md · anchor hue: ultramarine · enrichment: none
 * axes: paper-band=light · display-style=grotesk-heavy · accent-hue=cool
 * pre-emit critique: P5 H5 E4 S5 R4 V4
 *
 * Kenapa bukan nama katalog. Halaman ini adalah alur sesi delapan tahap, bukan
 * bentuk halaman pemasaran. Tidak ada macrostructure katalog yang menggambarkannya,
 * jadi bentuknya bespoke. Stamp sebelumnya menyebut Narrative Workflow; itu tidak
 * lagi benar setelah penomoran tahap diturunkan dari skala display ke label meta.
 *
 * Kenapa bukan tema Grid. Rel kolom terekspos adalah elemen yang mendefinisikan
 * Grid, dan rel itu dibuang atas permintaan pemilik proyek. Yang diwarisi dan
 * dipertahankan: Archivo satu keluarga, satu tinta sinyal, nol radius, nol
 * bayangan, struktur dibawa hairline. Identitas temanya tidak lagi Grid.
 *
 * Tiga penyimpangan sengaja, semuanya karena ini instrumen penelitian:
 *   1. Rel kolom dibuang seluruhnya.
 *   2. Bidang berwarna penuh hanya di layar penjelasan, setelah pengukuran selesai.
 *   3. Warna tidak pernah menandai benar atau salah selama sesi berlangsung.
 */

:root{
  /* --- sheet: near-white cool, never pure white --- */
  --color-paper:    oklch(99% 0.003 255);
  --color-paper-2:  oklch(97.2% 0.004 255);
  --color-paper-3:  oklch(94.5% 0.005 255);

  /* --- ink: cool near-black, never pure black --- */
  --color-ink:      oklch(16% 0.010 255);
  --color-muted:    oklch(52% 0.012 255);

  /* --- one signal ink. ultramarine: technical, institutional. --- */
  --color-accent:     oklch(45% 0.19 264);
  --color-accent-ink: oklch(99% 0.003 255);
  --color-focus:      oklch(45% 0.19 264);

  /* --- hairlines do all the structure --- */
  --color-rule:     oklch(88% 0.004 255);
  --color-rule-2:   oklch(80% 0.006 255);

  /* --- one family. Archivo across the whole page. --- */
  --font-display: Archivo, "Helvetica Neue", Arial, sans-serif;
  --font-body:    Archivo, "Helvetica Neue", Arial, sans-serif;
  --display-weight: 800;
  --tracking-display: -0.045em;
  --tracking-label: 0.09em;

  /* --- 4pt scale --- */
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  20px;
  --space-lg:  32px;
  --space-2xl: 72px;
  --space-3xl: 112px;

  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   21px;
  --text-display-s: clamp(30px, 5vw, 44px);
  --text-numeral:   clamp(64px, 11vw, 132px);

  --lh-tight: 0.9;
  --lh-body:  1.5;
  --lh-read:  1.75;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.18s;

  --rule-hair: 1px;
  --rule-bold: 2px;
  --radius-card: 0;
  --shadow-card: none;
}