/* Arka Sync Prototype 2026 v1. Token desain
 *
 *  Dari mana palet ini datang
 * Logo Arka Sync yang berjalan (apps/deprecated/web-main/public/logo.svg)
 * memakai dua warna saja: navy #036 dan kuning #fff000. Keduanya masuk ke
 * sistem apa adanya, karena logo adalah aset tetap dan UI yang bertabrakan
 * dengan logonya sendiri terbaca seperti dua merek yang dipaksa bersatu.
 *
 * Terracotta #E05A33 dari [PO-AE-18] tetap memegang seluruh aksi utama.
 * Jadi pembagiannya tegas dan tidak pernah tertukar:
 *
 *   NAVY       permukaan gelap, footer, chrome aplikasi, blok statistik
 *   TERRACOTTA setiap aksi, setiap tombol utama, penanda "sedang berjalan"
 *   KUNING     sorotan kecil, stiker, garis bawah, angka yang perlu dilihat
 *   OFF-WHITE  dasar halaman
 *
 *  Kontras, dihitung bukan dirasakan (formula WCAG)
 *   putih di atas navy .............. 12,61:1  aman ukuran apa pun
 *   kuning di atas navy ............. 10,64:1  aman ukuran apa pun
 *   navy di atas kuning ............. 10,64:1  aman ukuran apa pun
 *   navy di atas off-white .......... 12,07:1  aman ukuran apa pun
 *   slate di atas off-white ......... 14,05:1  aman ukuran apa pun
 *   terracotta 600 di atas off-white .. 4,74:1  aman ukuran apa pun
 *   putih di atas terracotta 600 ...... 4,95:1  aman ukuran apa pun
 *   terracotta 500 di atas off-white .. 3,54:1  HANYA teks besar, ikon, garis
 *   kuning di atas off-white .......... 1,13:1  TIDAK PERNAH membawa teks
 *
 * Dua larangan konkret yang lahir dari tabel itu:
 *   1. Kuning tidak pernah jadi warna teks di atas latar terang. Ia hanya
 *      bidang, dan teks di atasnya wajib navy.
 *   2. Terracotta 500 tidak pernah membawa teks isi berukuran biasa.
 *      Tombol memakai 600.
 *
 *  Motif
 * Logonya tersusun dari lingkaran dan kapsul bersudut 63,1 derajat. Angka
 * itu bukan karangan, ia terbaca dari transform rotate(-63.10282) di dalam
 * berkas logonya. Seluruh motif di assets/css/motif.css memakai dua bentuk
 * itu saja, jadi latar, stiker, dan pembatas seksi benar benar satu
 * keluarga dengan logonya, bukan dekorasi yang kebetulan menempel.
 */

:root {
  /* Navy, dari logo #036 */
  --n-50:  #eef3f8;
  --n-100: #d5e2ef;
  --n-200: #a8c1db;
  --n-300: #6f93bb;
  --n-400: #3d6796;
  --n-500: #12457a;
  --n-600: #003366;   /* warna logo */
  --n-700: #002a55;
  --n-800: #001f3f;
  --n-900: #00162e;

  /* Terracotta, dari [PO-AE-18] #E05A33 */
  --t-50:  #fef3ef;
  --t-100: #fbdfd4;
  --t-200: #f7bfa9;
  --t-300: #f09a78;
  --t-400: #e87a52;
  --t-500: #e05a33;   /* token merek */
  --t-600: #c04a22;   /* aman untuk teks kecil dan latar tombol */
  --t-700: #9c3b1a;
  --t-800: #742c13;

  /* Kuning, dari logo #fff000 */
  --y-100: #fffce0;
  --y-200: #fff9a8;
  --y-300: #fff566;
  --y-400: #fff000;   /* warna logo */
  --y-500: #e6d800;
  --y-600: #b8ac00;

  /* Netral */
  --s-0:   #ffffff;
  --s-50:  #f9fafb;   /* token latar */
  --s-100: #f2f4f7;
  --s-200: #e6e9ee;
  --s-300: #cfd5de;
  --s-400: #9aa5b4;
  --s-500: #6b7686;
  --s-600: #4b5563;
  --s-700: #374151;
  --s-800: #1f2937;   /* token teks */
  --s-900: #111827;

  /* Krem hangat. Dipakai untuk seksi yang perlu berganti nada tanpa
   * menjadi abu abu dingin, karena Arunika adalah cahaya pagi. */
  --cream: #fdf8f3;
  --cream-2: #f9efe5;

  /* Status order */
  --ok-600:   #10733f;  --ok-50:   #e7f5ed;
  --wait-600: #9a6700;  --wait-50: #fdf6e6;
  --info-600: #12457a;  --info-50: #eef3f8;
  --stop-600: #b3261e;  --stop-50: #fdeeed;

  /* Peran */
  --bg:          var(--s-50);
  --bg-raised:   var(--s-0);
  --ink:         var(--s-800);
  --ink-soft:    var(--s-600);
  --ink-faint:   var(--s-500);
  --ink-invert:  #ffffff;
  --line:        var(--s-200);
  --line-strong: var(--s-300);
  --brand:       var(--t-500);
  --brand-press: var(--t-600);
  --brand-ink:   var(--t-600);
  --brand-wash:  var(--t-50);
  --deep:        var(--n-600);
  --deep-2:      var(--n-800);
  --pop:         var(--y-400);

  /* Huruf */
  --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, sans-serif;

  /* Skala lebih berani dari sebelumnya. Situs seperti Gojek dan Tokopedia
   * tidak malu malu pada ukuran judul, dan judul kecil membuat halaman
   * terbaca seperti template. */
  --fs-mega:  clamp(2.25rem, 1.3rem + 4.4vw, 4.5rem);
  --fs-hero:  clamp(2rem, 1.35rem + 3.2vw, 3.5rem);
  --fs-h1:    clamp(1.875rem, 1.4rem + 2.2vw, 3rem);
  --fs-h2:    clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  --fs-h3:    clamp(1.125rem, 1.03rem + 0.5vw, 1.375rem);
  --fs-body:  1rem;
  --fs-sm:    0.875rem;
  --fs-xs:    0.8125rem;

  /*  Sudut. Lebih gemuk dari sebelumnya.
   * [PO-AE-18] menetapkan 8px, dan itu tetap radius dasar untuk kontrol
   * kecil seperti input dan tombol. Permukaan besar memakai kelipatannya,
   * karena kartu 8px di sebelah tipografi 4rem terbaca kaku. */
  --r-sm:   6px;
  --r:      8px;     /* token merek */
  --r-md:   12px;
  --r-lg:   18px;
  --r-xl:   28px;
  --r-2xl:  40px;
  --r-pill: 999px;

  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 5.5rem;  --sp-10: 7rem;

  /* Skala mengalir. Ini yang menjaga kontinuitas.
   *
   * Tipografi sudah memakai clamp sejak awal, tapi spasinya dulu meloncat
   * di satu breakpoint: gutter 18px jadi 32px dan tinggi seksi 48px jadi
   * 88px dalam satu piksel lebar, naik 78 sampai 83 persen. Di bawah itu
   * spasinya justru datar dari 360 sampai 720 sementara hurufnya terus
   * membesar, jadi makin lebar layar makin sesak rasanya.
   *
   * Nilai di bawah tumbuh selaras dengan hurufnya, jadi rasio huruf ke
   * ruang nyaris tetap di seluruh lebar. Geometrinya boleh dihitung, tapi
   * yang dirasakan mata adalah rasio itu, bukan angka mutlaknya.
   *
   *              360px    1440px
   *   gutter      24px  ->  40px
   *   seksi Y     56px  -> 104px
   *   padding     22px  ->  28px
   *   gap         14px  ->  24px
   */
  --gutter:   clamp(1.5rem,   1.1667rem + 1.4815vw, 2.5rem);
  --section-y: clamp(3.5rem,  2.5rem    + 4.4444vw, 6.5rem);
  --pad:      clamp(1.375rem, 1.25rem   + 0.5556vw, 1.75rem);
  --pad-lg:   clamp(1.625rem, 1.4rem    + 1.0000vw, 2.25rem);
  --gap:      clamp(0.875rem, 0.6667rem + 0.9259vw, 1.5rem);
  --gap-lg:   clamp(1.5rem,   1.15rem   + 1.5556vw, 2.5rem);

  /* Lebar terkecil sebuah kolom sebelum kisi memecah dirinya sendiri.
   * Dipakai lewat auto-fit supaya jumlah kolom berubah sedikit demi
   * sedikit, bukan meloncat dua kolom sekaligus di satu breakpoint. */
  --col-wide: 17.5rem;
  --col-mid:  15rem;
  --col-tile: 6rem;

  /* Bayangan hangat, bukan abu abu. Bayangan netral di atas krem terbaca
   * kotor. */
  --shadow-1: 0 1px 2px rgba(0, 31, 63, 0.06);
  --shadow-2: 0 6px 20px rgba(0, 31, 63, 0.08);
  --shadow-3: 0 18px 44px rgba(0, 31, 63, 0.12);
  --shadow-pop: 0 10px 0 0 var(--n-800);

  --wrap: 1200px;
  --wrap-narrow: 760px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur: 220ms;

  /* Sudut kapsul logo. Satu satunya sumber angka ini. */
  --motif-angle: 63.1deg;

  --caret: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7686' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* Tidak ada lagi breakpoint untuk spasi. Seluruh nilainya mengalir. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}