/**
 * Design tokens — diambil 1:1 dari DESIGN-airbnb.md (bagian colors/typography/rounded/spacing).
 * JANGAN edit nilai di file ini kecuali DESIGN-airbnb.md juga diubah — file lain (base.css,
 * components.css, pages.css) hanya boleh MEMAKAI variabel ini, bukan menulis nilai literal baru.
 */

:root {
  /* ===== Colors — brand & accent ===== */
  --color-primary: #ff385c;
  --color-primary-active: #e00b41;
  --color-primary-disabled: #ffd1da;
  --color-primary-error-text: #c13515;
  --color-primary-error-text-hover: #b32505;
  --color-luxe: #460479;
  --color-plus: #92174d;

  /* ===== Colors — text ===== */
  --color-ink: #222222;
  --color-body: #3f3f3f;
  --color-muted: #6a6a6a;
  --color-muted-soft: #929292;
  --color-star-rating: #222222;
  --color-on-primary: #ffffff;
  --color-on-dark: #ffffff;

  /* ===== Colors — surface & hairline ===== */
  --color-canvas: #ffffff;
  --color-surface-soft: #f7f7f7;
  --color-surface-card: #ffffff;
  --color-surface-strong: #f2f2f2;
  --color-hairline: #dddddd;
  --color-hairline-soft: #ebebeb;
  --color-border-strong: #c1c1c1;

  /* ===== Colors — semantic / misc ===== */
  --color-legal-link: #428bff;
  --color-scrim: #000000;

  /* ===== Typography — font family =====
     Inter di posisi pertama (self-hosted, assets/fonts/, lihat
     assets/css/fonts.css) — DESIGN-airbnb.md § "Note on Font Substitutes"
     eksplisit menyebut Inter sebagai "closest open-source substitute" untuk
     'Airbnb Cereal VF'/Circular, yang keduanya proprietary dan TIDAK bisa
     di-self-host secara legal. 'Circular' dipertahankan di stack sebagai
     fallback nama (kalau browser user kebetulan punya font itu terinstal
     lokal), tapi Inter yang jadi font utama yang benar-benar ter-render.
     Satu variable ini dipakai semua token --type-* di bawah, jadi berlaku
     untuk seluruh skala tipografi (display-xl s/d nav-link) sekaligus. */
  --font-family-base: 'Inter', 'Circular', -apple-system, system-ui, Roboto, 'Helvetica Neue', sans-serif;

  /* ===== Typography scale (size / weight / line-height / letter-spacing) =====
     5 token DISPLAY (display-xl/lg/md/sm + rating-display) line-height-nya
     dikurangi ~2% dari nilai asli DESIGN-airbnb.md (mis. display-xl: 1.43 x
     0.98 = 1.4014 -> 1.40) — kompensasi cap-height Inter yang sedikit lebih
     longgar dari Cereal VF asli, sesuai § "Note on Font Substitutes". Token
     non-display (title-md/sm, body-*, caption-*, badge, micro-label,
     uppercase-tag, button-*, link, nav-link) SENGAJA TIDAK disentuh — size/
     weight/letter-spacing token display juga tidak berubah, murni line-height. */
  --type-display-xl-size: 28px;   --type-display-xl-weight: 700; --type-display-xl-lh: 1.40; --type-display-xl-ls: 0;
  --type-display-lg-size: 22px;   --type-display-lg-weight: 500; --type-display-lg-lh: 1.16; --type-display-lg-ls: -0.44px;
  --type-display-md-size: 21px;   --type-display-md-weight: 700; --type-display-md-lh: 1.40; --type-display-md-ls: 0;
  --type-display-sm-size: 20px;   --type-display-sm-weight: 600; --type-display-sm-lh: 1.18; --type-display-sm-ls: -0.18px;
  --type-title-md-size: 16px;     --type-title-md-weight: 600;   --type-title-md-lh: 1.25;   --type-title-md-ls: 0;
  --type-title-sm-size: 16px;     --type-title-sm-weight: 500;   --type-title-sm-lh: 1.25;   --type-title-sm-ls: 0;
  --type-rating-display-size: 64px; --type-rating-display-weight: 700; --type-rating-display-lh: 1.08; --type-rating-display-ls: -1px;
  --type-body-md-size: 16px;      --type-body-md-weight: 400;    --type-body-md-lh: 1.5;     --type-body-md-ls: 0;
  --type-body-sm-size: 14px;      --type-body-sm-weight: 400;    --type-body-sm-lh: 1.43;    --type-body-sm-ls: 0;
  --type-caption-size: 14px;      --type-caption-weight: 500;    --type-caption-lh: 1.29;    --type-caption-ls: 0;
  --type-caption-sm-size: 13px;   --type-caption-sm-weight: 400; --type-caption-sm-lh: 1.23; --type-caption-sm-ls: 0;
  --type-badge-size: 11px;        --type-badge-weight: 600;      --type-badge-lh: 1.18;      --type-badge-ls: 0;
  --type-micro-label-size: 12px;  --type-micro-label-weight: 700; --type-micro-label-lh: 1.33; --type-micro-label-ls: 0;
  --type-uppercase-tag-size: 8px; --type-uppercase-tag-weight: 700; --type-uppercase-tag-lh: 1.25; --type-uppercase-tag-ls: 0.32px;
  --type-button-md-size: 16px;    --type-button-md-weight: 500;  --type-button-md-lh: 1.25;  --type-button-md-ls: 0;
  --type-button-sm-size: 14px;    --type-button-sm-weight: 500;  --type-button-sm-lh: 1.29;  --type-button-sm-ls: 0;
  --type-link-size: 14px;         --type-link-weight: 400;       --type-link-lh: 1.43;       --type-link-ls: 0;
  --type-nav-link-size: 16px;     --type-nav-link-weight: 600;   --type-nav-link-lh: 1.25;   --type-nav-link-ls: 0;

  /* ===== Rounded (border-radius) ===== */
  --radius-none: 0px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  /* ===== Spacing ===== */
  --spacing-xxs: 2px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-base: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;
  --spacing-section: 64px;

  /* ===== Elevation — satu-satunya shadow tier di sistem ini ===== */
  --shadow-card-hover:
    rgba(0, 0, 0, 0.02) 0 0 0 1px,
    rgba(0, 0, 0, 0.04) 0 2px 6px 0,
    rgba(0, 0, 0, 0.1) 0 4px 8px 0;
  --scrim-modal: rgba(0, 0, 0, 0.5);

  /* ===== Layout =====
     container-max-narrow & container-max-medium: bukan dari DESIGN-airbnb.md
     (dokumen itu tidak memberi angka pasti untuk lebar kolom teks/search-bar
     hero) — mengikuti pola container-max-detail (juga bukan literal token
     warna/tipografi/radius/shadow, tapi container-width variant yang sah).
     narrow (640px): titik tengah proporsi "~600-700px" untuk headline/
     subheadline hero. medium (880px): titik tengah "~850-900px" untuk
     booking-bar — search-bar-pill Airbnb asli lebih lebar dari teks
     headline, tidak terikat constraint lebar paragraf. */
  --container-max: 1280px;
  --container-max-detail: 1080px;
  --container-max-narrow: 640px;
  --container-max-medium: 880px;
}