/* ==========================================================================
   Aurora — Design Token
   Satu-satunya tempat warna, radius, bayangan, dan tipografi didefinisikan.
   Jangan pernah menulis nilai heksadesimal langsung di berkas CSS lain.
   Lihat docs/UI_V2_DESIGN.md §5.1
   ========================================================================== */

@font-face {
    font-family: 'InterVar';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-var-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
                   U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* --- Netral: permukaan & teks --- */
    --bg:            #f4f6fa;
    --surface:       #ffffff;
    --surface-2:     #f8fafc;
    --surface-3:     #eef2f7;
    --border:        #e3e8ef;
    --border-strong: #cbd5e1;
    --text:          #0f172a;
    --text-muted:    #64748b;
    --text-faint:    #8492a8;

    /* --- Aksen --- */
    --accent:        #2f6fed;
    --accent-hover:  #2560d8;
    --accent-soft:   #e8f0fe;
    --accent-text:   #1d4ed8;

    --identity:      #7c5cf0;
    --identity-soft: #efeaff;
    --identity-text: #6537e0;

    --ok:            #16a34a;
    --ok-soft:       #e7f6ec;
    --ok-text:       #157538;

    --warn:          #f59e0b;
    --warn-soft:     #fef3e2;
    --warn-text:     #b45309;

    --danger:        #dc2626;
    --danger-soft:   #fdeaea;
    --danger-text:   #b91c1c;

    --info:          #0891b2;
    --info-soft:     #e0f4f8;
    --info-text:     #0e7490;

    /* --- Isian tombol.
       Dipisah dari --accent/--ok/--danger karena aksen di mode gelap sengaja
       dibuat terang agar tautan terbaca di atas permukaan gelap — dan warna
       terang itu TIDAK cukup kontras dengan teks putih di dalam tombol.
       Kontras tombol bersifat internal (isi vs teksnya sendiri), jadi isian
       tetap gelap di kedua mode. Diverifikasi docs/UI_V2_CONTRAST.py. --- */
    --btn-accent-bg: #2f6fed;  --btn-accent-fg: #ffffff;
    --btn-ok-bg:     #15803d;  --btn-ok-fg:     #ffffff;
    --btn-danger-bg: #dc2626;  --btn-danger-fg: #ffffff;
    --btn-info-bg:   #0e7490;  --btn-info-fg:   #ffffff;
    --btn-identity-bg: #6d28d9; --btn-identity-fg: #ffffff;
    --btn-warn-bg:   #f59e0b;  --btn-warn-fg:   #3a2a06;

    /* --- Deret warna grafik (dapat dibedakan penderita buta warna;
           label selalu menyertakan nilai, tidak mengandalkan warna saja) --- */
    --chart-1: #2f6fed;
    --chart-2: #7c5cf0;
    --chart-3: #16a34a;
    --chart-4: #f59e0b;
    --chart-5: #dc2626;
    --chart-6: #0891b2;
    --chart-7: #db2777;
    --chart-8: #65a30d;

    /* --- Bentuk & kedalaman --- */
    --radius:     14px;
    --radius-sm:  10px;
    --radius-xs:  7px;
    --radius-pill: 999px;
    --shadow:     0 1px 2px rgb(15 23 42 / .06), 0 8px 24px -12px rgb(15 23 42 / .12);
    --shadow-sm:  0 1px 2px rgb(15 23 42 / .07);
    --shadow-lg:  0 4px 12px rgb(15 23 42 / .10), 0 24px 48px -20px rgb(15 23 42 / .22);

    /* --- Tipografi --- */
    --font: 'InterVar', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

    /* --- Kerapatan.
       Inter punya x-height lebih besar dari Helvetica, jadi pada ukuran px
       yang sama terasa lebih bonsor. Empat token di bawah adalah satu-satunya
       tempat untuk menyetel kerapatan seluruh panel — ubah di sini saja. --- */
    --text-base:   13.5px;   /* ukuran teks dasar */
    --leading:     1.5;      /* tinggi baris dasar */
    --pad-card:    14px;     /* padding isi kartu/box */
    --control-h:   36px;     /* tinggi input & tombol */

    /* --- Tata letak --- */
    --sidebar-w:  264px;
    --sidebar-w-collapsed: 72px;
    --topbar-h:   56px;
    --gutter:     16px;

    /* --- Lain-lain --- */
    --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
    --transition: 160ms cubic-bezier(.4, 0, .2, 1);
    color-scheme: light;
}

/* --------------------------------------------------------------------------
   Mode gelap.
   Dua pintu masuk: mengikuti preferensi OS, dan pilihan eksplisit pengguna.
   Aksen dinaikkan luminansinya agar kontras tetap >= 4.5:1 di atas --surface.
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg:            #0b1220;
        --surface:       #111a2b;
        --surface-2:     #16203a;
        --surface-3:     #1c2942;
        --border:        #1f2b45;
        --border-strong: #35435f;
        --text:          #e6edf7;
        --text-muted:    #94a3b8;
        --text-faint:    #64748b;

        --accent:        #5b8ff9;
        --accent-hover:  #7aa5fb;
        --accent-soft:   #16274a;
        --accent-text:   #8fb4fc;

        --identity:      #a78bfa;
        --identity-soft: #241c47;
        --identity-text: #c4b5fd;

        --ok:            #34d399;
        --ok-soft:       #10301f;
        --ok-text:       #6ee7b7;

        --warn:          #fbbf24;
        --warn-soft:     #34250a;
        --warn-text:     #fcd34d;

        --danger:        #f87171;
        --danger-soft:   #3a1414;
        --danger-text:   #fca5a5;

        --info:          #22d3ee;
        --info-soft:     #0c2e38;
        --info-text:     #67e8f9;

        --btn-accent-bg: #2f6fed;  --btn-accent-fg: #ffffff;
        --btn-ok-bg:     #15803d;  --btn-ok-fg:     #ffffff;
        --btn-danger-bg: #b91c1c;  --btn-danger-fg: #ffffff;
        --btn-info-bg:   #0e7490;  --btn-info-fg:   #ffffff;
        --btn-identity-bg: #6d28d9; --btn-identity-fg: #ffffff;
        --btn-warn-bg:   #fbbf24;  --btn-warn-fg:   #3a2a06;

        --chart-1: #5b8ff9;
        --chart-2: #a78bfa;
        --chart-3: #34d399;
        --chart-4: #fbbf24;
        --chart-5: #f87171;
        --chart-6: #22d3ee;
        --chart-7: #f472b6;
        --chart-8: #a3e635;

        --shadow:    0 1px 2px rgb(0 0 0 / .4), 0 8px 24px -12px rgb(0 0 0 / .6);
        --shadow-sm: 0 1px 2px rgb(0 0 0 / .4);
        --shadow-lg: 0 4px 12px rgb(0 0 0 / .5), 0 24px 48px -20px rgb(0 0 0 / .8);
        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --bg:            #0b1220;
    --surface:       #111a2b;
    --surface-2:     #16203a;
    --surface-3:     #1c2942;
    --border:        #1f2b45;
    --border-strong: #35435f;
    --text:          #e6edf7;
    --text-muted:    #94a3b8;
    --text-faint:    #64748b;

    --accent:        #5b8ff9;
    --accent-hover:  #7aa5fb;
    --accent-soft:   #16274a;
    --accent-text:   #8fb4fc;

    --identity:      #a78bfa;
    --identity-soft: #241c47;
    --identity-text: #c4b5fd;

    --ok:            #34d399;
    --ok-soft:       #10301f;
    --ok-text:       #6ee7b7;

    --warn:          #fbbf24;
    --warn-soft:     #34250a;
    --warn-text:     #fcd34d;

    --danger:        #f87171;
    --danger-soft:   #3a1414;
    --danger-text:   #fca5a5;

    --info:          #22d3ee;
    --info-soft:     #0c2e38;
    --info-text:     #67e8f9;

    --btn-accent-bg: #2f6fed;  --btn-accent-fg: #ffffff;
    --btn-ok-bg:     #15803d;  --btn-ok-fg:     #ffffff;
    --btn-danger-bg: #b91c1c;  --btn-danger-fg: #ffffff;
    --btn-info-bg:   #0e7490;  --btn-info-fg:   #ffffff;
    --btn-identity-bg: #6d28d9; --btn-identity-fg: #ffffff;
    --btn-warn-bg:   #fbbf24;  --btn-warn-fg:   #3a2a06;

    --chart-1: #5b8ff9;
    --chart-2: #a78bfa;
    --chart-3: #34d399;
    --chart-4: #fbbf24;
    --chart-5: #f87171;
    --chart-6: #22d3ee;
    --chart-7: #f472b6;
    --chart-8: #a3e635;

    --shadow:    0 1px 2px rgb(0 0 0 / .4), 0 8px 24px -12px rgb(0 0 0 / .6);
    --shadow-sm: 0 1px 2px rgb(0 0 0 / .4);
    --shadow-lg: 0 4px 12px rgb(0 0 0 / .5), 0 24px 48px -20px rgb(0 0 0 / .8);
    color-scheme: dark;
}