/* ==========================================================================
   tokens.css — semua keputusan visual Onix ada di sini.
   Komponen & halaman hanya memakai variabel ini; ganti tema cukup di file ini.

   Arah (pemilik, 8 Okt 2026): dasar PUTIH bersih, flat, ringkas, elegan, bayangan tipis.
   Palet pemilik untuk aksen: #22577A (utama) · #38A3A5 · #57CC99 · #80ED99 · #C7F9CC.
   Warna channel (WhatsApp hijau, dst.) hanya untuk ikon/badge channel, bukan tema.
   Tanpa gradien pada kartu, dashboard, dan formulir.
   ========================================================================== */

/* 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 pemilik -------------------------------------------------------- */
    --primary:        #22577A;   /* tombol utama, menu aktif, tautan, fokus — kontras dengan putih 7,7:1 */
    --primary-hover:  #1B4562;
    --primary-press:  #163A52;
    --primary-soft:   #E9F1F6;   /* latar menu aktif, baris terpilih */
    --primary-line:   #CADCE8;
    --teal:           #38A3A5;   /* aksen kedua: ikon, grafik, info */
    --teal-text:      #2A7E80;
    --emerald:        #57CC99;   /* sukses, terhubung */
    --emerald-text:   #1E7A52;
    --mint:           #80ED99;   /* penanda kecil (belum dibaca, progres) */
    --tea:            #C7F9CC;   /* latar lembut */
    --tea-soft:       #EEFDF0;

    /* Alias lama (dipakai komponen yang disalin dari Sociomile): "hitam" = warna utama. */
    --black:   var(--primary);
    --black-2: var(--primary-hover);
    --blue:    var(--teal);
    --purple:  #6E5BA8;
    --green:   var(--emerald);
    --amber:   #F2A93B;
    --red:     #E5484D;

    /* --- Netral (dasar putih bersih) -------------------------------------------- */
    --page:        #FFFFFF;
    --surface:     #FFFFFF;
    --surface-sub: #FAFBFC;
    --surface-alt: #F3F6F8;
    --line:        #E3E8EC;
    --line-soft:   #EDF1F4;
    --line-strong: #CBD5DC;

    --ink:   #13293D;      /* teks utama (navy gelap, senada dengan warna utama) */
    --ink-2: #4B6272;      /* teks pendukung — kontras 6:1 */
    --ink-3: #64788A;      /* keterangan, waktu — kontras ≥ 4,5:1 di putih */
    --ink-4: #9AABB8;      /* placeholder, ikon redup */

    /* --- Status: teks / latar / garis (semua kontras teks ≥ 4,5:1) ------------------ */
    --st-hot:     #B4232A;  --st-hot-bg:     #FDEEEE;  --st-hot-ln:     #F7D3D4;   /* mendesak, gagal, terputus */
    --st-warm:    #8C5A06;  --st-warm-bg:    #FEF6E7;  --st-warm-ln:    #F6E2BC;   /* belum dibalas, perlu tindakan */
    --st-cool:    #1E7A52;  --st-cool-bg:    #EEFDF0;  --st-cool-ln:    #C7F2CF;   /* selesai, aktif, terhubung */
    --st-info:    #22577A;  --st-info-bg:    #E9F1F6;  --st-info-ln:    #CADCE8;   /* info, diproses */
    --st-mention: #2A7E80;  --st-mention-bg: #E8F5F5;  --st-mention-ln: #C6E6E6;   /* menunggu, aksen kedua */
    --st-cold:    #4B6272;  --st-cold-bg:    #F3F6F8;  --st-cold-ln:    #E3E8EC;   /* ditutup, netral */

    /* --- Channel (hanya ikon/badge) ---------------------------------------------- */
    --ch-whatsapp: #25D366;
    --ch-voice:    #F97316;
    --ch-livechat: #0BA5EC;
    --ch-api:      #667085;

    /* --- Grafik: SOLID ------------------------------------------------------------ */
    --ch-1: var(--primary);
    --ch-2: var(--teal);
    --ch-3: var(--emerald);
    --ch-4: var(--amber);
    --ch-5: #9AABB8;
    --ch-6: var(--mint);
    --ch-track: #EEF2F5;

    /* --- Permukaan FLAT (nama lama tetap, nilainya warna datar) ------------------- */
    --grad-card:   var(--surface);
    --grad-metric: var(--surface);
    --grad-panel:  var(--surface-sub);
    --grad-ink:    var(--primary);
    --page-wash:   none;

    /* --- Bayangan tipis + garis 1px ---------------------------------------------- */
    --ring: 0 0 0 1px var(--line);
    --sh-1: 0 0 0 1px var(--line), 0 1px 2px rgba(19, 41, 61, .04);
    --sh-2: 0 0 0 1px var(--line), 0 1px 3px rgba(19, 41, 61, .06);
    --sh-3: 0 0 0 1px rgba(19, 41, 61, .06), 0 8px 24px rgba(19, 41, 61, .10), 0 2px 6px rgba(19, 41, 61, .05);
    --sh-ink: 0 1px 2px rgba(19, 41, 61, .16);
    --focus-ring: 0 0 0 3px rgba(34, 87, 122, .20);

    /* --- Bentuk & huruf ------------------------------------------------------------ */
    --r-sm: 6px;
    --r:    8px;
    --r-lg: 10px;
    --r-pill: 99px;

    --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;

    --fs-xs: 10.5px;
    --fs-sm: 11.5px;
    --fs-md: 12.5px;
    --fs-base: 13px;
    --fs-lg: 16px;
    --fs-metric: 24px;

    --sidebar-w: 216px;
    --sidebar-w-collapsed: 56px;
    --topbar-h: 48px;
    --control-h: 30px;
    --control-h-sm: 26px;

    --ease: cubic-bezier(.2, .7, .2, 1);
}