/* ==========================================================================
   PICKMASTER PRO — TOKEN DESAIN
   ==========================================================================
   Satu-satunya tempat nilai desain didefinisikan. app.css, home.css, dan
   print.css hanya memakainya.

   Sebelum berkas ini ada, warna sudah tertoken tetapi ukuran huruf sama
   sekali belum (13 nilai px tersebar), radius dilangkahi 16 nilai mentah,
   dan dua berkas memakai tangga breakpoint yang berbeda.

   Palet: SAP Fiori Horizon (terang) dan Horizon Dark. Tema: gelap adalah nilai dasar di :root. Tema terang di-override lewat
   :root[data-theme="light"]. Atribut data-theme dipasang di <html> oleh
   skrip kecil di <head> sebelum cat pertama, jadi tidak ada kedip tema.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---------------------------------------------------------------------
     WARNA — TEMA GELAP (dasar)
     --------------------------------------------------------------------- */
  --bg: #12171c;
  --bg-elev: #1a2027;
  --bg-panel: #1d232a;
  --bg-panel-2: #232a32;
  --bg-input: #262e37;
  --bg-input-hi: #2c353f;
  --bg-hover: rgba(255, 255, 255, .05);

  --line: rgba(234, 236, 238, .1);
  --line-strong: rgba(234, 236, 238, .2);

  --tx: #eaecee;
  --tx-2: #a9b4be;
  /* #79879c memberi 4,48:1 di atas --bg-input — tepat di bawah ambang AA
     untuk teks 10,5 px pada pengalih peringkat. Dinaikkan ke 4,67:1. */
  --tx-3: #94a3b1;
  /* Warna teks yang diletakkan DI ATAS bidang brand/aksen. Sebelumnya
     .btn-accent memakai #fff di atas --accent: 2,41:1 di tema gelap —
     jauh di bawah ambang AA untuk tombol yang dipakai memilih mode RO. */
  --on-brand: #ffffff;
  --on-accent: #0b2125;

  --brand: #0070f2;
  /* #7b7bff = 4,43:1 di atas --brand-soft; dinaikkan ke 4,64:1. */
  --brand-hi: #4db1ff;
  --brand-soft: rgba(77, 177, 255, .14);
  --accent: #2ec3c7;
  --accent-soft: rgba(46, 195, 199, .14);

  --ok: #6ccf4a;
  --ok-soft: rgba(93, 193, 34, .14);
  --warn: #ffa04d;
  --warn-soft: rgba(255, 143, 69, .14);
  /* #f5455f = 4,28:1 di atas --bad-soft; dinaikkan ke 4,62:1. */
  --bad: #ff8a92;
  --bad-soft: rgba(250, 134, 142, .14);
  --info: #4db1ff;
  --info-soft: rgba(77, 177, 255, .14);

  --sh-1: 0 0 2px rgba(0, 0, 0, .5), 0 2px 4px rgba(0, 0, 0, .35);
  --sh-2: 0 0 2px rgba(0, 0, 0, .5), 0 8px 16px rgba(0, 0, 0, .4);
  --sh-3: 0 0 2px rgba(0, 0, 0, .5), 0 16px 32px rgba(0, 0, 0, .5);

  /* ---------------------------------------------------------------------
     TIPOGRAFI
     Nilai dasarnya persis sama dengan yang dulu ditulis mentah, jadi tidak
     ada perubahan tampilan. Bedanya sekarang semuanya dikali --fs-scale,
     sehingga mode sarung tangan bisa menaikkan seluruh teks sekaligus.
     --------------------------------------------------------------------- */
  --ff: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ff-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  --fs-scale: 1;

  --fs-micro: calc(10.5px * var(--fs-scale));   /* label mikro, kode status  */
  --fs-2xs:   calc(11px   * var(--fs-scale));   /* meta, kapsul             */
  --fs-xs:    calc(11.5px * var(--fs-scale));   /* label field              */
  --fs-sm:    calc(12px   * var(--fs-scale));   /* teks sekunder            */
  --fs-base:  calc(12.5px * var(--fs-scale));   /* teks isi                 */
  --fs-md:    calc(13px   * var(--fs-scale));   /* teks isi tegas           */
  --fs-lg:    calc(13.5px * var(--fs-scale));   /* judul kecil, tombol      */
  --fs-xl:    calc(14px   * var(--fs-scale));   /* judul panel              */
  --fs-2xl:   calc(15px   * var(--fs-scale));   /* nama merek               */
  --fs-3xl:   calc(17px   * var(--fs-scale));   /* angka KPI                */
  --fs-4xl:   calc(22px   * var(--fs-scale));   /* judul seksi besar        */
  --fs-nano:  calc(9.5px  * var(--fs-scale));   /* kode kategori di kapsul  */
  --fs-5xl:   calc(25px   * var(--fs-scale));   /* angka KPI halaman depan  */
  --fs-6xl:   calc(27px   * var(--fs-scale));   /* angka di tengah donut    */
  --fs-display: 48px;                           /* angka raksasa, tidak ikut skala */

  /* ---------------------------------------------------------------------
     RADIUS — tangga lengkap supaya tidak ada lagi nilai px mentah
     --------------------------------------------------------------------- */
  --r-2xs: 4px;
  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 13px;
  --r-lg: 18px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* ---------------------------------------------------------------------
     TINGGI KONTROL & TARGET SENTUH
     --h-touch dipakai sebagai min-height pada setiap kontrol yang disentuh
     di layar sempit. Mode sarung tangan menaikkannya ke --h-touch-lg.
     --------------------------------------------------------------------- */
  --h-topbar: 64px;
  --h-nav: 52px;
  --h-control: 38px;
  --h-control-sm: 32px;
  --h-touch: 44px;
  --h-touch-lg: 52px;
  --h-touch-now: var(--h-touch);

  /* ---------------------------------------------------------------------
     TEPI AMAN — ponsel berponi / indikator home
     Bernilai 0 di perangkat yang tidak punya, jadi aman dipakai di mana pun.
     --------------------------------------------------------------------- */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur: .18s;
  --ease-spring: cubic-bezier(.16, 1, .3, 1);
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --ease-tech: cubic-bezier(.2, .8, .2, 1);
  --dur-fast: .14s;
  --dur-norm: .24s;
  --dur-slow: .38s;

  --glow-brand: 0 0 18px -2px rgba(0, 112, 242, .45);
  --glow-accent: 0 0 18px -2px rgba(46, 195, 199, .4);
  --glow-ok: 0 0 16px -2px rgba(93, 193, 34, .38);
  --glow-warn: 0 0 16px -2px rgba(255, 143, 69, .38);
  --glow-bad: 0 0 16px -2px rgba(250, 134, 142, .4);

  /* ---------------------------------------------------------------------
     TANGGA BREAKPOINT (dokumentasi)
     CSS belum bisa memakai var() di dalam @media, jadi nilai di bawah ini
     adalah kontrak yang WAJIB diikuti app.css maupun home.css. Sebelumnya
     keduanya punya tangga sendiri (home reflow di 620/860/1240, app di
     640/900/1280), sehingga ada pita lebar tempat satu bagian sudah
     berganti tata letak sementara bagian lain belum.

        480px  — ponsel kecil
        640px  — ponsel
        768px  — ponsel besar / tablet potret   <- tabel beralih ke kartu
        900px  — tablet
       1024px  — tablet lanskap
       1100px  — laptop kecil
       1280px  — laptop
     --------------------------------------------------------------------- */
  --bp-xs: 480px;
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 900px;
  --bp-xl: 1024px;
  --bp-2xl: 1100px;
  --bp-3xl: 1280px;
}

/* ==========================================================================
   TEMA TERANG
   Nilainya pernah dikalibrasi kontras sekali; angka yang disesuaikan ulang
   di sini adalah empat warna status yang mendarat di 4,37–4,45:1 saat
   dipakai di atas tint lembutnya sendiri.
   ========================================================================== */
:root[data-theme="light"] {
  color-scheme: light;

  --bg: #f5f6f7;
  --bg-elev: #ffffff;
  --bg-panel: #ffffff;
  --bg-panel-2: #f7f8f9;
  --bg-input: #f9fafb;
  --bg-input-hi: #ffffff;
  --bg-hover: rgba(29, 45, 62, .045);

  --line: rgba(29, 45, 62, .12);
  --line-strong: rgba(29, 45, 62, .26);

  --tx: #1d2d3e;
  --tx-2: #475e75;
  --tx-3: #556b82;
  --on-brand: #ffffff;
  --on-accent: #ffffff;

  --brand: #0064d9;
  --brand-hi: #0057bd;
  --brand-soft: rgba(0, 112, 242, .1);
  --accent: #0a6f78;
  --accent-soft: rgba(10, 126, 132, .1);

  /* Empat nilai berikut digeser sedikit lebih gelap: masing-masing semula
     4,45 / 4,38 / 4,37 / 4,37 di atas tint lembutnya, kini 4,62:1. */
  --ok: #256f3a;
  --ok-soft: rgba(48, 145, 76, .12);
  --warn: #a24f00;
  --warn-soft: rgba(231, 101, 0, .12);
  --bad: #aa0808;
  --bad-soft: rgba(213, 0, 0, .08);
  --info: #0057bd;
  --info-soft: rgba(0, 112, 242, .1);

  --sh-1: 0 0 2px rgba(34, 53, 72, .16), 0 2px 4px rgba(34, 53, 72, .12);
  --sh-2: 0 0 2px rgba(34, 53, 72, .16), 0 8px 16px rgba(34, 53, 72, .14);
  --sh-3: 0 0 2px rgba(34, 53, 72, .16), 0 16px 32px rgba(34, 53, 72, .18);
  --glow-brand: 0 4px 16px -2px rgba(0, 112, 242, .28);
  --glow-accent: 0 4px 16px -2px rgba(10, 126, 132, .22);
  --glow-ok: 0 4px 16px -2px rgba(48, 145, 76, .22);
  --glow-warn: 0 4px 16px -2px rgba(231, 101, 0, .22);
  --glow-bad: 0 4px 16px -2px rgba(213, 0, 0, .2);
}

/* ==========================================================================
   MODE SARUNG TANGAN
   Dinyalakan petugas dari topbar. Menaikkan seluruh teks satu langkah dan
   setiap target sentuh ke 52 px — untuk dipakai sambil memegang scanner,
   berdiri di depan rak, kadang bersarung tangan.
   ========================================================================== */
:root[data-density="glove"] {
  --fs-scale: 1.12;
  --h-touch-now: var(--h-touch-lg);
  --h-control: 46px;
  --h-control-sm: 40px;
}

/* ==========================================================================
   PERGANTIAN TEMA TANPA KEDIP
   Dulu .metric mentransisikan `background` 0,18 detik sementara `color`
   berganti seketika: pada awal peralihan teks dan latar sempat sewarna
   (rasio kontras 1,00) sehingga angka KPI hilang sesaat. Selama atribut
   data-theme-switching menyala, semua transisi warna dimatikan sehingga
   tema berganti dalam satu frame.
   ========================================================================== */
:root[data-theme-switching] *,
:root[data-theme-switching] *::before,
:root[data-theme-switching] *::after {
  transition: none !important;
}