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

   Arah: netral hangat, padat, elegan. Hitam = aksi utama. Warna lain punya makna tetap:
   biru = Komentar, ungu = Mention, oranye = perlu tindakan, hijau = selesai, merah = mendesak/gagal.
   Grafik selalu warna solid; gradasi hanya untuk permukaan (kartu, panel, tombol) dengan delta 1–2%.
   ========================================================================== */

/* 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 {
    /* --- Warna inti -------------------------------------------------------- */
    --black:    #141413;   /* aksi utama, menu aktif, angka penting */
    --black-2:  #2C2B28;   /* hover tombol hitam */
    --blue:     #4399D3;   /* Komentar — dari logo Sociomile */
    --purple:   #884394;   /* Mention — dari logo Sociomile */
    --green:    #3F8456;
    --amber:    #C99A3B;
    --red:      #B8483F;

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

    --ink:   #1B1B19;      /* teks utama */
    --ink-2: #55554F;      /* teks pendukung, kontras 7:1 */
    --ink-3: #6B6B64;      /* keterangan, waktu — kontras ≥ 4,5:1 di semua latar */
    --ink-4: #A3A39B;      /* placeholder, ikon redup */

    /* --- Status: teks / latar / garis (semua kontras teks ≥ 4,5:1) ----------- */
    --st-hot:     #A23A31;  --st-hot-bg:     #FBEFED;  --st-hot-ln:     #F1D9D5;   /* mendesak, gagal */
    --st-warm:    #8A5A12;  --st-warm-bg:    #FBF4E4;  --st-warm-ln:    #F0E2C1;   /* belum dibalas, perlu tindakan */
    --st-cool:    #2D6A40;  --st-cool-bg:    #EDF5EF;  --st-cool-ln:    #D5E8DA;   /* selesai, aktif */
    --st-info:    #245F8D;  --st-info-bg:    #EDF4FA;  --st-info-ln:    #D3E4F1;   /* Komentar, diproses */
    --st-mention: #7B3C87;  --st-mention-bg: #F6EFF7;  --st-mention-ln: #E8D6EB;   /* Mention, menunggu */
    --st-cold:    #63635C;  --st-cold-bg:    #F3F3EF;  --st-cold-ln:    #E4E3DC;   /* ditutup, netral */

    /* --- Grafik: SOLID ------------------------------------------------------- */
    --ch-1: var(--black);
    --ch-2: var(--blue);
    --ch-3: var(--purple);
    --ch-4: var(--amber);
    --ch-5: #A9A69B;
    --ch-6: var(--green);
    --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-ink: linear-gradient(180deg, #2E2D2A 0%, #141413 100%);
    --page-wash:
        radial-gradient(900px 480px at 8% -10%, rgba(67, 153, 211, .07), transparent 64%),
        radial-gradient(780px 430px at 98% 0%, rgba(136, 67, 148, .05), transparent 60%);

    /* --- Bayangan: ring 1px untuk tepi tegas, blur besar untuk lembut ----------- */
    --ring: 0 0 0 1px rgba(27, 27, 25, .07);
    --sh-1: var(--ring), 0 1px 1.5px rgba(27, 27, 25, .05);
    --sh-2: var(--ring), 0 1px 2px rgba(27, 27, 25, .05), 0 4px 10px -3px rgba(27, 27, 25, .07);
    --sh-3: var(--ring), 0 2px 4px rgba(27, 27, 25, .06), 0 12px 28px -6px rgba(27, 27, 25, .16);
    --sh-ink: 0 1px 2px rgba(20, 20, 19, .28), 0 3px 8px -2px rgba(20, 20, 19, .24);
    --focus-ring: 0 0 0 3px rgba(27, 27, 25, .12);

    /* --- Bentuk & huruf ------------------------------------------------------ */
    --r-sm: 7px;
    --r:    9px;
    --r-lg: 13px;
    --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: 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;

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