/* ==========================================================================
   KarbonKita — Design tokens v2
   Arah: catatan verifikasi warga kota.
   Palet hangat dari deck MAGE 12, hijau aksi dari aplikasi.
   Jangan pakai nilai mentah di komponen: selalu lewat var(--*).
   ========================================================================== */

:root {
  /* --- Kertas & tinta --------------------------------------------------- */
  --paper: #f4f1e8;        /* latar utama, dari deck */
  --paper-soft: #ece6d8;   /* panel lembut / garis isian */
  --surface: #fffdf7;      /* kertas terang untuk receipt & kartu QR */
  --ink: #0c2117;          /* judul & panel gelap, dari deck */
  --ink-soft: #26382e;     /* teks isi */
  --muted: #5e6b61;        /* metadata, 4.95:1 di atas paper */
  --muted-dark: #b9c8be;   /* metadata di panel gelap, 9.4:1 */
  --line: rgba(12, 33, 23, 0.14);
  --line-strong: rgba(12, 33, 23, 0.26);
  --line-dark: rgba(244, 241, 232, 0.18);

  /* --- Hijau ------------------------------------------------------------ */
  --forest: #2e6b4e;       /* dari deck; tautan & aksen struktural */
  --forest-deep: #1f4a35;
  --action: #1b8039;       /* dari aplikasi; tombol utama */
  --action-hover: #145c2a;
  --lime: #c8f169;         /* dari deck; hanya di panel gelap / blok CTA */
  --lime-soft: #e4f8b8;

  /* --- Status ----------------------------------------------------------- */
  --amber: #7a3e00;
  --amber-bg: #f3e3c3;
  --red: #a33a2b;
  --red-bg: #f7e3de;

  /* --- Peran semantik --------------------------------------------------- */
  --color-bg: var(--paper);
  --color-surface: var(--surface);
  --color-text: var(--ink-soft);
  --color-heading: var(--ink);
  --color-muted: var(--muted);
  --color-border: var(--line);
  --color-primary: var(--action);
  --color-primary-hover: var(--action-hover);
  --color-on-primary: #ffffff;
  --color-on-dark: var(--paper);
  --color-on-dark-muted: var(--muted-dark);
  --color-focus: var(--ink);

  /* --- Tipografi --------------------------------------------------------
     Satu keluarga: Plus Jakarta Sans. Alasan: wordmark dan UI aplikasi
     memakai bentuk membulat yang sama; satu keluarga membuat halaman
     terasa seperti produk, bukan template hijau.
     Mono hanya untuk hash dan angka teknis. */
  --font-sans: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", "Roboto Mono",
    Menlo, Consolas, monospace;

  --text-display: clamp(3.1rem, 7vw, 5.7rem);
  --text-h2: clamp(2.05rem, 4.2vw, 3.5rem);
  --text-h3: clamp(1.2rem, 1.55vw, 1.42rem);
  --text-lead: clamp(1.08rem, 1.32vw, 1.24rem);
  --text-body: 1rem;
  --text-sm: 0.875rem;
  --text-xs: 0.78rem;
  --text-2xs: 0.72rem;

  --leading-display: 0.96;
  --leading-h2: 1.02;
  --leading-h3: 1.25;
  --leading-body: 1.65;
  --tracking-display: -0.055em;
  --tracking-h2: -0.035em;
  --tracking-h3: -0.015em;

  /* --- Spasi (skala 4px) ------------------------------------------------ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --section-y: clamp(4.5rem, 8vw, 7.5rem);
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --measure: 68ch;
  --measure-lead: 52ch;
  --max-width: 1240px;
  --nav-h: 76px;

  /* --- Radius -----------------------------------------------------------
     Hierarki, bukan satu angka untuk semua:
     tombol/receipt tajam (4px), telepon membulat (36px). */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-phone: 36px;
  --radius-pill: 999px;

  /* --- Elevasi ----------------------------------------------------------
     Hanya benda fisik (telepon & receipt) yang punya bayangan. */
  --shadow-phone: 0 2px 4px rgba(12, 33, 23, 0.08),
    0 34px 80px -34px rgba(12, 33, 23, 0.5);
  --shadow-receipt: 0 2px 4px rgba(12, 33, 23, 0.06),
    0 26px 54px -30px rgba(12, 33, 23, 0.32);
  --shadow-nav: 0 1px 0 rgba(12, 33, 23, 0.08);

  /* --- Gerak ------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.32, 0.64, 1);
  --duration-fast: 140ms;
  --duration-base: 220ms;
  --duration-slow: 640ms;
}