/* Design Tokens - X View City */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Newsreader:wght@400&display=swap");

:root {
  /* Warna - berdasarkan bahan bangunan dan lingkungan hunian */
  --plaster: #f2f3ef; /* latar utama, putih plester yang sedikit dingin */
  --sage: #e4e7de; /* permukaan sekunder, blok berselang */
  --forest: #2f4a34; /* warna utama: tombol, judul aksen, header solid */
  --ink: #23261f; /* teks utama, hitam kehijauan, bukan #111 */
  --lichen: #8a9478; /* teks sekunder, garis tipis, keterangan */
  --amber: #b07a16; /* HANYA untuk status ketersediaan unit */

  /* Spasi - kelipatan 8 */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
  --space-12: 96px;
  --space-16: 128px;

  /* Sudut membulat - dibedakan menurut hierarki */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-app: 10px;

  /* Tipografi */
  --font-display: "Archivo", sans-serif;
  --font-body: "Newsreader", serif;

  /* Font weights */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Font sizes */
  --text-display: clamp(2.6rem, 5.5vw, 4.4rem);
  --text-h1: clamp(2rem, 3.5vw, 2.8rem);
  --text-h2: clamp(1.5rem, 2.4vw, 1.9rem);
  --text-h3: 1.15rem;
  --text-body: 1.0625rem;
  --text-small: 0.875rem;
  --text-label: 0.8125rem;

  /* Line heights */
  --leading-tight: 1.2;
  --leading-normal: 1.7;

  /* Letter spacing */
  --tracking-tight: -0.02em;

  /* Kontainer */
  --container-max: 1180px;
  --container-padding: 24px;

  /* Breakpoints */
  --bp-sm: 640px;
  --bp-md: 900px;
  --bp-lg: 1200px;

  /* Borders */
  --border-subtle: 1px solid rgba(35, 38, 31, 0.12);
  --border-focus: 2px solid var(--forest);

  /* Shadows - hanya untuk kartu pemantauan progres */
  --shadow-app: 0 4px 16px rgba(35, 38, 31, 0.08);
}