/* DIHASILKAN MESIN oleh scripts/sinkron-token.sh. Jangan diedit.
   Sumbernya Management/02_Business Context/tokens.css.
   Disalin: 2026-08-20 02:33 UTC */
/* =====================================================================
   LiburanBali — Design Tokens
   Sumber kanonik tunggal untuk warna, tipografi, ruang, sudut, elevation.

   Asal nilai brand (Fase 2, berbasis bukti bukan selera):
   - Palet 6 warna diambil dari aset resmi "Brand Kit.png" + "Mascot Kit.png".
   - Bali Blue #2259D8 menang atas #1259DB yang tayang di showcase-app,
     karena aset brand resmi mengalahkan kode turunan.
   - Sunset Orange #FF8A3D menang atas #FFBA3D. Label di Brand Kit typo:
     piksel swatch-nya sendiri render #FA7533 dan #FC7A42 di kedua aset,
     oranye kuat, bukan amber muda.

   Aturan: JANGAN pakai hex lepas di kode produk. Pakai nama semantik.
   Kalau butuh warna yang belum ada namanya, tambahkan di sini dulu.

   Selisih dengan kode yang masih tayang ada di brandbook.html §08.
   ===================================================================== */

:root {
  /* ---------------------------------------------------------------
     1. PRIMITIVE — ramp mentah. Jangan dipakai langsung di komponen.
     --------------------------------------------------------------- */

  /* Bali Blue — warna induk brand */
  --blue-50:  #EEF3FE;
  --blue-100: #D7E3FC;
  --blue-200: #AEC5F8;
  --blue-300: #7BA1F2;
  --blue-400: #4A7DE8;
  --blue-500: #2259D8;   /* Bali Blue — nilai brand resmi */
  --blue-600: #1A46B0;
  --blue-700: #153889;
  --blue-800: #102A66;
  --blue-900: #0A1B42;

  /* Sun Yellow — sorotan, garis bawah, badge. Tidak pernah bawa teks putih. */
  --yellow-50:  #FFF9E0;
  --yellow-100: #FFF0B3;
  --yellow-200: #FCE470;
  --yellow-300: #FADA35;
  --yellow-400: #F8D000;  /* Sun Yellow — nilai brand resmi */
  --yellow-500: #D9B500;
  --yellow-600: #A88C00;
  --yellow-700: #6E5C00;

  /* Ocean Teal — kategori laut, info */
  --teal-50:  #E6F8FA;
  --teal-100: #BFEDF2;
  --teal-200: #7FDBE5;
  --teal-300: #3FC7D6;
  --teal-400: #19B7C6;   /* Ocean Teal — nilai brand resmi */
  --teal-500: #14939E;
  --teal-600: #0F6E77;
  --teal-700: #0A4A4F;

  /* Palm Green — alam, status berhasil */
  --green-50:  #EDF7EB;
  --green-100: #D2ECCC;
  --green-200: #A5D89A;
  --green-300: #7DC46E;
  --green-400: #5BAE4B;  /* Palm Green — nilai brand resmi */
  --green-500: #488B3C;
  --green-600: #36682D;  /* dipakai kalau harus bawa teks putih */
  --green-700: #24461E;

  /* Sunset Orange — aksen, promo, urgensi. Porsi paling kecil. */
  --orange-50:  #FFF2E9;
  --orange-100: #FFDCC2;
  --orange-200: #FFBE8C;
  --orange-300: #FFA463;
  --orange-400: #FF8A3D; /* Sunset Orange — nilai brand resmi */
  --orange-500: #E06A1E;
  --orange-600: #B35217;
  --orange-700: #7A360D;

  /* Netral. n-50 adalah Cloud White #F8F8F8 dari palet resmi. */
  --n-0:   #FFFFFF;
  --n-50:  #F8F8F8;      /* Cloud White — nilai brand resmi */
  --n-100: #F0F2F5;
  --n-200: #E2E6EC;
  --n-300: #C9D0DA;
  --n-400: #9AA4B4;
  --n-500: #6B7788;
  --n-600: #4C5666;
  --n-700: #333B47;
  --n-800: #1F2530;
  --n-900: #121820;

  /* Merah. Tidak ada di palet brand, tapi error wajib punya warna sendiri.
     Nilainya diambil dari yang sudah tayang di showcase-app/admin.css. */
  --red-50:  #FDECEA;
  --red-100: #FAD1CC;
  --red-400: #E04434;
  --red-500: #C0392B;
  --red-600: #96271B;


  /* ---------------------------------------------------------------
     2. SEMANTIK — ini yang dipakai komponen. Selalu lewat nama ini.
     --------------------------------------------------------------- */

  /* Permukaan */
  --bg-page:      var(--n-50);
  --bg-surface:   var(--n-0);
  --bg-sunken:    var(--n-100);
  --bg-inverse:   var(--blue-800);

  /* Teks. Angka kontras dihitung di atas --bg-page (#F8F8F8). */
  --text-1:       var(--n-800);   /* 14.9:1 — judul & body */
  --text-2:       var(--n-600);   /* 6.9:1  — teks pendukung */
  --text-3:       var(--n-500);   /* 4.3:1  — HANYA teks >=18px bold atau >=24px */
  --text-invert:  var(--n-0);
  --text-link:    var(--blue-500);

  /* Aksi utama. Satu per layar. */
  --action:        var(--blue-500);
  --action-hover:  var(--blue-600);
  --action-press:  var(--blue-700);
  --action-soft:   var(--blue-50);
  --action-border: var(--blue-200);
  --on-action:     var(--n-0);    /* 6.0:1 */

  /* Aksen. Menandai, bukan mendominasi. */
  --accent:       var(--orange-400);
  --accent-soft:  var(--orange-50);
  --accent-text:  var(--orange-600);  /* oranye yang aman jadi teks di putih */
  --on-accent:    var(--n-800);       /* 6.6:1 — JANGAN putih (2.3:1) */

  /* Sorotan kuning. Underline, marker, badge kecil. */
  --highlight:      var(--yellow-400);
  --highlight-soft: var(--yellow-50);
  --on-highlight:   var(--n-800);     /* 10.3:1 — JANGAN putih (1.5:1) */

  /* Status */
  --info:          var(--teal-400);
  --info-soft:     var(--teal-50);
  --info-text:     var(--teal-600);
  --on-info:       var(--n-800);      /* 6.3:1 — JANGAN putih (2.4:1) */

  --success:       var(--green-400);
  --success-solid: var(--green-600);  /* dipakai kalau perlu teks putih (6.6:1) */
  --success-soft:  var(--green-50);
  --success-text:  var(--green-600);

  --warning:       var(--orange-400);
  --warning-soft:  var(--orange-50);
  --warning-text:  var(--orange-600);

  --danger:        var(--red-500);
  --danger-soft:   var(--red-50);
  --danger-text:   var(--red-600);
  --on-danger:     var(--n-0);        /* 5.4:1 */

  /* Garis */
  --border:        var(--n-200);
  --border-strong: var(--n-300);
  --border-accent: var(--orange-200);  /* hanya untuk kartu unggulan */

  /* Fokus keyboard. Wajib kelihatan di semua permukaan. */
  --focus-ring:        var(--blue-500);
  --focus-ring-width:  3px;
  --focus-ring-offset: 2px;

  /* Nonaktif. Kontras 2.0:1 memang sengaja rendah, dan itu boleh:
     WCAG membebaskan kontrol nonaktif dari ambang minimum. */
  --disabled-bg:     var(--n-200);
  --disabled-text:   var(--n-400);
  --disabled-border: var(--n-200);


  /* ---------------------------------------------------------------
     3. TIPOGRAFI — keluarga font tidak pernah bercabang.
     --------------------------------------------------------------- */
  --f-display: "Plus Jakarta Sans", "Poppins", system-ui, sans-serif;
  --f-text:    "Poppins", system-ui, -apple-system, sans-serif;

  --fw-display:  800;   /* Plus Jakarta Sans ExtraBold */
  --fw-bold:     700;
  --fw-semi:     600;
  --fw-medium:   500;
  --fw-regular:  400;


  /* ---------------------------------------------------------------
     4. RUANG — 8 tingkat. Nilai di luar skala ini tidak boleh dipakai.
     --------------------------------------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;


  /* ---------------------------------------------------------------
     5. SUDUT — brand ini membulat. 6 tingkat, tidak ada nilai lepas.
     --------------------------------------------------------------- */
  --r-xs:   8px;    /* chip, badge, input kecil */
  --r-sm:   12px;   /* input, tombol kecil */
  --r-md:   16px;   /* tombol, thumbnail */
  --r-lg:   22px;   /* kartu */
  --r-xl:   28px;   /* panel besar, modal */
  --r-full: 999px;  /* pil, avatar, tombol ikon */


  /* ---------------------------------------------------------------
     6. ELEVATION — bayangan selalu berbias biru, tidak pernah abu netral.
     --------------------------------------------------------------- */
  --e-0: none;
  --e-1: 0 2px 6px rgba(34, 89, 216, 0.08);
  --e-2: 0 6px 18px rgba(34, 89, 216, 0.10);
  --e-3: 0 14px 34px rgba(34, 89, 216, 0.14);
  --e-4: 0 24px 56px rgba(34, 89, 216, 0.18);


  /* ---------------------------------------------------------------
     7. DENSITY — SATU-SATUNYA hal yang boleh berbeda antar permukaan.
     Default :root = marketing (landing, sosial, deck klien).
     --------------------------------------------------------------- */
  --d-display:    44px;  --d-display-lh: 1.05;
  --d-h1:         34px;  --d-h1-lh:      1.15;
  --d-h2:         26px;  --d-h2-lh:      1.20;
  --d-h3:         20px;  --d-h3-lh:      1.30;
  --d-body-lg:    18px;  --d-body-lg-lh: 1.60;
  --d-body:       16px;  --d-body-lh:    1.65;
  --d-sm:         14px;  --d-sm-lh:      1.50;
  --d-xs:         12px;  --d-xs-lh:      1.40;

  --d-btn-h:      48px;
  --d-btn-px:     var(--s-5);
  --d-field-h:    48px;
  --d-card-p:     var(--s-5);
  --d-section-gap: var(--s-7);
  --d-radius-card: var(--r-lg);
}

/* Density produk: app operasional, dashboard, tabel. Isi sama, lebih rapat.
   Warna, keluarga font, sudut, dan elevation TIDAK ikut berubah. */
[data-density="product"] {
  --d-display:    34px;  --d-display-lh: 1.10;
  --d-h1:         26px;  --d-h1-lh:      1.20;
  --d-h2:         21px;  --d-h2-lh:      1.25;
  --d-h3:         17px;  --d-h3-lh:      1.35;
  --d-body-lg:    16px;  --d-body-lg-lh: 1.55;
  --d-body:       14px;  --d-body-lh:    1.55;
  --d-sm:         13px;  --d-sm-lh:      1.45;
  --d-xs:         11px;  --d-xs-lh:      1.35;

  --d-btn-h:      40px;
  --d-btn-px:     var(--s-4);
  --d-field-h:    40px;
  --d-card-p:     var(--s-4);
  --d-section-gap: var(--s-5);
  --d-radius-card: var(--r-md);
}