/* ============================================================
   WABA CRM — Design Tokens
   Palet netral + aksen "signal" TEAL WHATSAPP (bukan jade generik lagi —
   diselaraskan §10.59 dengan warna asli aplikasi WhatsApp: #00A884/#008069
   untuk aksen, dan skema gelap resmi WhatsApp #111B21/#202C33/#2A3942 untuk
   dark mode, karena tonal ramp itu terbukti nyaman di mata (nilai antar
   lapisan berdekatan, tak ada lompatan kontras yang tajam). Data pakai
   IBM Plex Mono. Semua nilai diturunkan dari sini; komponen tidak boleh
   hardcode warna. */

:root {
    /* ---- Warna dasar: netral dingin, senada dgn abu-abu WhatsApp Web ---- */
    --c-bg:            #F0F2F5;   /* latar aplikasi — abu WhatsApp */
    --c-surface:       #FFFFFF;   /* panel, kartu */
    --c-surface-2:     #F7F8FA;   /* surface sekunder, hover halus */
    --c-surface-3:     #E9ECEF;   /* inset, track */
    --c-border:        #E2E5E9;   /* garis pembatas dingin */
    --c-border-strong: #CBD1D6;

    /* ---- Teks (slate) ---- */
    --c-ink:      #1F2733;   /* teks utama, slate near-black */
    --c-ink-soft: #5B6672;   /* teks sekunder */
    --c-ink-mute: #97A1AD;   /* teks tersier / placeholder */
    --c-ink-inv:  #FFFFFF;   /* teks di atas warna gelap/aksen (SAMA di dark
                                mode — dipasangkan cuma dgn --c-signal yg
                                tak berubah warna antar tema, lihat §10.59) */

    /* ---- Tooltip: bubble tetap gelap-solid di KEDUA tema (bukan pakai
       --c-ink/--c-ink-inv, karena --c-ink itu sendiri BERBALIK terang di
       dark mode — kalau dipakai di sini, tooltip jadi putih-di-atas-putih
       tak kebaca; bug laten §10.59 yg baru ketahuan & diperbaiki). ---- */
    --c-tooltip-bg:  #1F2733;
    --c-tooltip-ink: #FFFFFF;

    /* ---- Aksen SIGNAL — teal asli WhatsApp (accent #00A884, header/pressed
       #008069) — makna: aktif/terhubung/window terbuka. ---- */
    --c-signal:      #00A884;
    --c-signal-600:  #17A589;
    --c-signal-700:  #008069;
    --c-signal-soft: #E3F5F0;   /* latar badge/hover teal */
    --c-signal-ring: rgba(0,168,132,.28);

    /* ---- Status jendela 24 jam (fuse): teal → amber → rose ---- */
    --c-window-open:   #00A884;  /* > 6 jam tersisa */
    --c-window-warn:   #E0912F;  /* 1–6 jam */
    --c-window-close:  #E5484D;  /* < 1 jam / tertutup */
    --c-window-amber-soft: #FBF0DD;
    --c-window-rose-soft:  #FBE5E6;

    /* ---- Feedback ---- */
    --c-danger:      #E5484D;
    --c-danger-soft: #FBE5E6;
    --c-warning:     #E0912F;
    --c-success:     var(--c-signal);
    --c-info:        #34B7F1;   /* biru asli WhatsApp (link/centang baca) */
    --c-info-soft:   #E7F5FC;

    /* ---- Tipografi ---- */
    --font-ui:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: "IBM Plex Mono", "SFMono-Regular", ui-monospace, "Cascadia Code", monospace;

    --fs-xs:   0.75rem;    /* 12px — meta, caption */
    --fs-sm:   0.8125rem;  /* 13px — data, label */
    --fs-base: 0.9375rem;  /* 15px — body */
    --fs-md:   1.0625rem;  /* 17px — subjudul */
    --fs-lg:   1.375rem;   /* 22px — judul panel */
    --fs-xl:   1.75rem;    /* 28px — heading */

    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    --lh-tight: 1.25;
    --lh-base:  1.55;

    /* ---- Spasi (skala 4px) ---- */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;

    /* ---- Radius (lebih lembut = lebih modern) ---- */
    --r-sm:  8px;
    --r-md:  12px;
    --r-lg:  16px;
    --r-xl:  24px;
    --r-pill: 999px;

    /* ---- Shadow (halus, cool-tinted ala Material elevation) ---- */
    --sh-xs: 0 1px 2px rgba(16, 24, 40, .06);
    --sh-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .10);
    --sh-md: 0 2px 4px rgba(16, 24, 40, .06), 0 6px 16px rgba(16, 24, 40, .10);
    --sh-lg: 0 4px 8px rgba(16, 24, 40, .06), 0 16px 40px rgba(16, 24, 40, .16);
    --sh-focus: 0 0 0 3px var(--c-signal-ring);

    /* ---- Layout ---- */
    --sidebar-w:     72px;
    --list-w:        340px;
    --contact-w:     320px;
    --header-h:      60px;
    --composer-min:  56px;
    /* Tinggi rail navigasi saat jadi bottom-bar mobile (<=720px), + area
       aman iPhone ber-notch/home-indicator. Dipakai di components.css
       (rail itu sendiri) DAN di tiap halaman yang perlu menyisakan ruang
       untuknya (workspace__body, panel Inbox), supaya konsisten. */
    --rail-h-mobile: calc(60px + env(safe-area-inset-bottom, 0px));

    /* ---- Transisi (kurva Material standar) ---- */
    --t-fast: 120ms cubic-bezier(.4, 0, .2, 1);
    --t-base: 200ms cubic-bezier(.4, 0, .2, 1);
    --t-med:  280ms cubic-bezier(.4, 0, .2, 1);

    /* ---- Z-index ---- */
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-overlay:  300;
    --z-modal:    400;
    --z-toast:    500;
    --z-palette:  600;
}

/* ---- Dark mode, diaktifkan lewat [data-theme="dark"] ----
   §10.59: dirombak total memakai tonal ramp GELAP ASLI WhatsApp
   (#0B141A → #111B21 → #202C33 → #2A3942 — makin terang sedikit demi
   sedikit, bukan lompatan besar), plus teks #E9EDEF/#8696A0 asli WhatsApp
   yang SENGAJA tak seterang putih penuh (mengurangi silau/tak nyaman di
   mata — inilah keluhan awalnya). --c-signal-600/700 diberi varian LEBIH
   TERANG khusus dark mode (bukan cuma versi gelap dari terang) karena
   keduanya dipakai luas sbg WARNA TEKS (link <a>, badge, label aktif) di
   atas latar gelap — kalau dibiarkan pakai nilai terang aslinya (yang
   memang dibuat gelap/pekat utk kontras di atas latar PUTIH), teksnya jadi
   nyaris tak kebaca (gelap-di-atas-gelap). Sudah diverifikasi dgn kalkulasi
   rasio kontras WCAG (lihat HANDOFF §10.59), bukan kira-kira. */
[data-theme="dark"] {
    --c-bg:            #0B141A;
    --c-surface:       #111B21;
    --c-surface-2:     #202C33;
    --c-surface-3:     #2A3942;
    --c-border:        #222D34;
    --c-border-strong: #2F3B44;

    --c-ink:      #E9EDEF;
    --c-ink-soft: #8696A0;
    --c-ink-mute: #64707A;
    --c-ink-inv:  #FFFFFF;   /* TAK dibalik gelap — lihat catatan di :root:
                                dipasangkan cuma dgn --c-signal (teal, tetap
                                cerah di dark mode), jadi teks putih di
                                atasnya tetap kebaca di kedua tema. */

    --c-signal-600:  #17A589;  /* teks (link, dsb) & bg hover tombol */
    --c-signal-700:  #2FDCB4;  /* teks emphasis (badge/label aktif) —
                                  lebih terang dari 600, KEBALIKAN urutan
                                  terang-nya di mode terang (di sana 700
                                  lebih GELAP) — konsisten scr makna: 700
                                  tetap "yang paling menonjol" di tiap tema. */
    --c-signal-soft: #0C3B30;
    --c-window-amber-soft: #33280F;
    --c-window-rose-soft:  #35191B;
    --c-danger-soft: #35191B;
    --c-info-soft:   #123347;

    --sh-xs: 0 1px 2px rgba(0, 0, 0, .3);
    --sh-sm: 0 1px 3px rgba(0, 0, 0, .35);
    --sh-md: 0 4px 12px rgba(0, 0, 0, .4);
    --sh-lg: 0 12px 32px rgba(0, 0, 0, .5);
}

/* ============================================================
   Refresh "ngepop" — palet chat, bubble, radius lebih ramah
   ============================================================ */
:root {
    /* Area chat ala WhatsApp: beige hangat asli WA + motif doodle halus */
    --c-chat-bg: #ECE5DD;
    --c-chat-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23000000' stroke-opacity='0.035' stroke-width='1.5'%3E%3Ccircle cx='10' cy='12' r='3'/%3E%3Cpath d='M30 8h8M34 4v8'/%3E%3Cpath d='M44 20c2 0 3 1 3 3'/%3E%3Ccircle cx='46' cy='40' r='2.5'/%3E%3Cpath d='M8 38h6M11 35v6'/%3E%3Cpath d='M22 46c1.5-1.5 4-1.5 5.5 0'/%3E%3Cpath d='M20 26c1.5 1.5 1.5 4 0 5.5'/%3E%3C/g%3E%3C/svg%3E");

    /* Bubble pesan — hijau asli WhatsApp */
    --c-bubble-in:      #FFFFFF;
    --c-bubble-out:     #DCF8C6;   /* hijau muda asli WA */
    --c-bubble-out-ink: #14301A;
    --c-bubble-shadow:  0 1px 1px rgba(11,20,26,.10);
    --r-bubble: 12px;

    /* Aksen "pop" untuk badge unread & tombol kirim — SAMA dgn --c-signal
       (bukan #25D366 hijau logo/marketing WA — dicoba, tapi kontras putih
       di atasnya cuma 1.98:1, lebih buruk dari nilai lama; teal UI asli WA
       (--c-signal) yang benar dipakai di badge/tombol sungguhan, terverifikasi
       3.03:1, konsisten dgn elemen ber-signal lainnya di seluruh app). */
    --c-pop-green:  var(--c-signal);
    --c-pop-green-600: var(--c-signal-600);
}

[data-theme="dark"] {
    --c-chat-bg: #0B141A;
    --c-bubble-in:  #202C33;
    --c-bubble-out: #005C4B;   /* hijau bubble keluar asli WA dark mode */
    --c-bubble-out-ink: #E9EDEF;
    --c-bubble-shadow: 0 1px 1px rgba(0,0,0,.3);
}