/* ==========================================================================
   tokens.css — semua keputusan visual Onix ada di sini (gaya Sociomile: netral hangat, padat, elegan).
   Komponen & halaman hanya memakai variabel ini; ganti tema cukup di file ini.

   Palet pemilik: #233D4D (utama — aksi, menu aktif, fokus), #FE7F2D (aksen oranye), #FCCA46 (kuning — perlu tindakan),
   #A1C181 (sage — sukses/aktif), #619B8A (teal — info/sekunder). Merah hanya untuk gagal/bahaya.
   Grafik memakai warna solid; gradasi hanya tipis di permukaan (kartu, panel, tombol).
   ========================================================================== */

/* Inter (teks) & JetBrains Mono (angka, waktu, kode) — di-host sendiri, tanpa CDN. */
@font-face {
    font-family: "Inter";
    src: url("/assets/fonts/inter-latin.woff2") format("woff2");
    font-weight: 100 900; font-style: normal; font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+2713, U+2715, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Inter";
    src: url("/assets/fonts/inter-latin-ext.woff2") format("woff2");
    font-weight: 100 900; font-style: normal; font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "JetBrains Mono";
    src: url("/assets/fonts/jetbrains-mono-latin.woff2") format("woff2");
    font-weight: 400 800; font-style: normal; font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "JetBrains Mono";
    src: url("/assets/fonts/jetbrains-mono-latin-ext.woff2") format("woff2");
    font-weight: 400 800; font-style: normal; font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* --- Palet ------------------------------------------------------------------ */
    --primary:    #233D4D;   /* aksi utama, menu aktif, angka penting */
    --primary-2:  #2F5064;   /* hover */
    --primary-3:  #1A2F3B;   /* ditekan */
    --orange:     #FE7F2D;   /* aksen: sorotan, Pro, seri grafik kedua */
    --yellow:     #FCCA46;   /* perlu tindakan */
    --sage:       #A1C181;   /* sukses, aktif */
    --teal:       #619B8A;   /* info, sekunder */
    --red:        #C2463C;   /* gagal, bahaya */

    /* --- Netral hangat ------------------------------------------------------------ */
    --page:        #F7F6F2;
    --surface:     #FFFFFF;
    --surface-sub: #FBFAF7;
    --surface-alt: #F3F2ED;
    --line:        #E5E3DC;
    --line-soft:   #EEEDE7;
    --line-strong: #D6D4CB;

    --ink:   #1B2329;      /* teks utama */
    --ink-2: #4B5660;      /* teks pendukung, kontras ≥ 7:1 */
    --ink-3: #66717A;      /* keterangan, waktu — kontras ≥ 4,5:1 di semua latar */
    --ink-4: #A0A9B0;      /* placeholder, ikon redup */

    /* --- Status: teks / latar / garis (semua kontras teks ≥ 4,5:1) ----------------- */
    --st-hot:    #A8392F;  --st-hot-bg:    #FCEEEC;  --st-hot-ln:    #F3D6D2;   /* gagal, mendesak */
    --st-warm:   #7F5700;  --st-warm-bg:   #FFF7DE;  --st-warm-ln:   #F5E2A4;   /* perlu tindakan (kuning) */
    --st-cool:   #3B6A2B;  --st-cool-bg:   #F0F6EA;  --st-cool-ln:   #D8E7C8;   /* sukses, aktif (sage) */
    --st-info:   #2B6455;  --st-info-bg:   #EAF4F1;  --st-info-ln:   #CDE2DB;   /* info, diproses (teal) */
    --st-accent: #A3480F;  --st-accent-bg: #FFF1E7;  --st-accent-ln: #FAD7BF;   /* sorotan (oranye) */
    --st-cold:   #5A656E;  --st-cold-bg:   #F2F3F1;  --st-cold-ln:   #E1E3DF;   /* netral, ditutup */

    /* --- Grafik: SOLID ------------------------------------------------------------- */
    --ch-1: var(--primary);
    --ch-2: var(--orange);
    --ch-3: var(--teal);
    --ch-4: var(--yellow);
    --ch-5: var(--sage);
    --ch-6: #A9A69B;
    --ch-track: #ECEAE3;

    /* --- Gradasi permukaan (delta 1–2%, tidak untuk data) ----------------------------- */
    --grad-card:
        radial-gradient(120% 90% at 100% 0%, #FDFDFB 0%, transparent 58%),
        linear-gradient(177deg, #FFFFFF 0%, #FCFCFA 62%, #F9F8F5 100%);
    --grad-metric:
        radial-gradient(130% 100% at 0% 0%, #FFFFFF 0%, transparent 55%),
        linear-gradient(158deg, #FEFEFD 0%, #FBFAF8 48%, #F7F6F2 100%);
    --grad-panel: linear-gradient(180deg, #FCFBF8 0%, #F4F3EE 100%);
    --grad-primary: linear-gradient(180deg, #2F5064 0%, #233D4D 100%);
    --grad-accent: linear-gradient(180deg, #FF9150 0%, #FE7F2D 100%);
    --grad-dark: linear-gradient(180deg, #2B4657 0%, #172A35 100%);
    --page-wash:
        radial-gradient(900px 480px at 8% -10%, rgba(97, 155, 138, .09), transparent 64%),
        radial-gradient(780px 430px at 98% 0%, rgba(254, 127, 45, .06), transparent 60%);

    /* --- Bayangan: ring 1px untuk tepi tegas, blur besar untuk lembut ------------------- */
    --ring: 0 0 0 1px rgba(27, 35, 41, .075);
    --sh-1: var(--ring), 0 1px 1.5px rgba(27, 35, 41, .05);
    --sh-2: var(--ring), 0 1px 2px rgba(27, 35, 41, .05), 0 4px 10px -3px rgba(27, 35, 41, .07);
    --sh-3: var(--ring), 0 2px 4px rgba(27, 35, 41, .06), 0 12px 28px -6px rgba(27, 35, 41, .17);
    --sh-primary: 0 1px 2px rgba(23, 42, 53, .30), 0 3px 8px -2px rgba(23, 42, 53, .26);
    --sh-accent: 0 1px 2px rgba(163, 72, 15, .28), 0 3px 8px -2px rgba(254, 127, 45, .32);
    --focus-ring: 0 0 0 3px rgba(35, 61, 77, .16);

    /* --- Bentuk & huruf -------------------------------------------------------------- */
    --r-sm: 7px;
    --r:    9px;
    --r-lg: 13px;
    --r-xl: 16px;
    --r-pill: 99px;
    --r-chip: var(--r-pill);   /* label, status, tag — aplikasi: radius kecil (tema di bawah) */

    --r-xs: 3px;

    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --font-num: var(--font-mono);   /* angka, waktu, nomor INT/TKT — aplikasi memakai Inter tabular (tema di bawah) */

    --fs-xs: 10.5px;
    --fs-sm: 11.5px;
    --fs-md: 12.5px;
    --fs-base: 13.5px;
    --fs-lg: 18px;
    --fs-metric: 26px;

    --sidebar-w: 224px;
    --sidebar-w-collapsed: 60px;
    --topbar-h: 52px;
    --control-h: 30px;
    --control-h-sm: 26px;

    /* --- Gerak: singkat, lembut, bisa disela ------------------------------------------- */
    --ease: cubic-bezier(.2, .7, .2, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
    --dur-fast: .14s;
    --dur: .22s;
    --dur-slow: .42s;
}

/* ==========================================================================
   Tema aplikasi (Fase 5i, 11 Okt 2026 — permintaan pemilik: "background lebih terang & clean, border radius lebih
   minimalis, sidebar compact, menu aktif lebih kelihatan, lebih elegan").
   Berlaku untuk aplikasi, halaman masuk, situs publik (landing, kontak, legal, dokumentasi), dan halaman galat. Widget
   livechat di situs pelanggan tetap memakai token :root di atas.
   ========================================================================== */
.app-body, .auth-body, .site-body, .error-body, .call-body {
    /* Netral terang, sedikit dingin supaya serasi dengan --primary (biru tua). */
    --page:        #F6F7F9;
    --surface-sub: #FAFBFC;
    --surface-alt: #F1F3F5;
    --line:        #E2E5E9;
    --line-soft:   #ECEEF1;
    --line-strong: #D1D6DC;
    --ch-6: #A7AEB5;
    --ch-track: #EDF0F3;

    /* Permukaan rata (tanpa gradasi); kedalaman cukup dari garis tipis + bayangan sangat halus. */
    --grad-card: linear-gradient(#FFFFFF, #FFFFFF);
    --grad-metric: linear-gradient(#FFFFFF, #FFFFFF);
    --grad-panel: linear-gradient(#FFFFFF, #FFFFFF);
    --page-wash: none;
    --ring: 0 0 0 1px rgba(16, 24, 40, .08);
    --sh-1: var(--ring), 0 1px 2px rgba(16, 24, 40, .04);
    --sh-2: var(--ring), 0 1px 3px rgba(16, 24, 40, .05);
    --sh-3: var(--ring), 0 4px 8px -2px rgba(16, 24, 40, .08), 0 14px 28px -8px rgba(16, 24, 40, .16);

    /* Radius minimal. */
    --r-xs: 2px;
    --r-sm: 4px;
    --r:    6px;
    --r-lg: 8px;
    --r-xl: 10px;
    --r-chip: 4px;

    /* Angka & waktu memakai Inter dengan digit tabular (lebih rapi daripada huruf mono); kode & kunci API tetap mono. */
    --font-num: var(--font-sans);

    /* Sidebar ringkas & menu aktif yang jelas. */
    --sidebar-w: 216px;
    --sidebar-w-collapsed: 56px;
    --topbar-h: 50px;
    --nav-h: 28px;
    --nav-hover-bg: #F1F3F5;
    --nav-active-bg: #E7EDF1;
}