/* WANA — Fiori DNA design tokens (light mode)
 * Sumber: wana/RULE-DESIGN-FIORI.md di Pi
 * Jangan hardcode warna/radius di komponen — pakai token ini. */

:root {
  --shell: 480px;
  /* Brand */
  --brand: #3B82F6;
  --brand-pressed: #2563EB;

  /* Teks */
  --ink: #111111;
  --muted: #6B7280;

  /* Permukaan */
  --canvas: #FFFFFF;
  --surface-alt: #F5F5F7;

  /* Border */
  --border: #E5E5E5;
  --border-strong: #D9D9D9;

  /* Status semantik */
  --success: #256F3A;
  --success-bg: #F5FAE5;
  --danger: #AA0808;
  --danger-bg: #FFEAF4;
  --bad: #AA0808;      /* garis target / kondisi buruk (dulu --bad tak terdefinisi) */
  --good: #256F3A;     /* kondisi baik (dipakai blok lama) */
  --navy: #1E3A5F;     /* garis & titik grafik tren */
  --navy-soft: #DCE3EE; /* batang grafik tren */
  --warning: #E76500;
  --warning-bg: #FFF8D6;
  --info: #3B82F6;
  --info-bg: #DBEAFE;

  /* Radius — HANYA dua nilai yang boleh dipakai */
  --radius-sm: 8px;
  --radius-pill: 999px;

  /* Spacing (kelipatan 8px) */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 12px;
  --sp-lg: 16px;
  --sp-xl: 20px;
  --sp-2xl: 24px;
  --sp-3xl: 32px;

  /* Tipografi */
  --font: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fs-display: 32px;   /* satu angka besar per layar */
  --fs-title: 20px;     /* judul halaman */
  --fs-section: 16px;   /* section header */
  --fs-body: 14px;
  --fs-label: 12px;

  /* Touch target minimum */
  --touch-min: 44px;
}

/* Lebar kolom aplikasi mengikuti layar: sempit di HP, lebar di layar normal */
@media (min-width: 768px) { :root { --shell: 680px; } }
@media (min-width: 1100px) { :root { --shell: 920px; } }
@media (min-width: 1440px) {
  :root { --shell: 1280px; } /* letterboxing Fiori: batas baca nyaman layar sangat lebar */
}