/* ==========================================================================
   BKW — tema Mint (docs/bkw.md §11). Semua warna lewat token di bawah; komponen tidak memakai warna mentah.
   Mode: atribut data-bs-theme di <html> (diatur assets/js/theme-awal.js & theme.js).
   ========================================================================== */

@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/plus-jakarta-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/plus-jakarta-sans-500.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/plus-jakarta-sans-600.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/plus-jakarta-sans-700.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/plus-jakarta-sans-800.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/jetbrains-mono-500.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/jetbrains-mono-600.woff2') format('woff2'); }

:root, [data-bs-theme="light"] {
    --bkw-primary:        #2F9C86;
    --bkw-primary-hover:  #24806D;
    --bkw-primary-soft:   #CDEFE5;
    --bkw-primary-subtle: #E6F6F0;
    --bkw-primary-ink:    #155446;
    --bkw-on-primary:     #FFFFFF;
    --bkw-accent:         #E58F5F;
    --bkw-accent-soft:    #FCE3D3;
    --bkw-accent-ink:     #8A4421;
    --bkw-bg:             #F4F8F6;
    --bkw-surface:        #FFFFFF;
    --bkw-surface-2:      #EAF3EF;
    --bkw-border:         #D9E6E0;
    --bkw-text:           #1D2B27;
    --bkw-text-secondary: #62756F;
    --bkw-text-muted:     #8A9B95;
    --bkw-ok:             #2E9E6A;
    --bkw-ok-soft:        #D6F2E3;
    --bkw-warn:           #B57A0C;
    --bkw-warn-soft:      #FBEBC7;
    --bkw-bad:            #C94A60;
    --bkw-bad-soft:       #F9D9DF;
    --bkw-shadow:         0 1px 2px rgba(29, 43, 39, .06), 0 1px 3px rgba(29, 43, 39, .08);
    --bkw-shadow-lg:      0 12px 28px rgba(29, 43, 39, .12);
    --bkw-radius:         14px;

    --bs-primary: var(--bkw-primary);
    --bs-primary-rgb: 47, 156, 134;
    --bs-success: var(--bkw-ok);
    --bs-danger: var(--bkw-bad);
    --bs-warning: var(--bkw-warn);
    --bs-body-bg: var(--bkw-bg);
    --bs-body-color: var(--bkw-text);
    --bs-secondary-color: var(--bkw-text-secondary);
    --bs-tertiary-bg: var(--bkw-surface-2);
    --bs-border-color: var(--bkw-border);
    --bs-link-color: var(--bkw-primary);
    --bs-link-hover-color: var(--bkw-primary-hover);
    --bs-link-color-rgb: 47, 156, 134;
    --bs-link-hover-color-rgb: 36, 128, 109;
    --bs-font-sans-serif: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --bs-font-monospace: 'JetBrains Mono', ui-monospace, Consolas, monospace;
    --bs-border-radius: 10px;
    --bs-border-radius-lg: var(--bkw-radius);
}

[data-bs-theme="dark"] {
    --bkw-primary:        #6FD3BC;
    --bkw-primary-hover:  #8FE0CD;
    --bkw-primary-soft:   #1E3F37;
    --bkw-primary-subtle: #18302A;
    --bkw-primary-ink:    #BDF0E3;
    --bkw-on-primary:     #0C2620;
    --bkw-accent:         #F5B994;
    --bkw-accent-soft:    #43302A;
    --bkw-accent-ink:     #FFD9C2;
    --bkw-bg:             #111917;
    --bkw-surface:        #18221F;
    --bkw-surface-2:      #1F2C28;
    --bkw-border:         #2B3A35;
    --bkw-text:           #E4EFEB;
    --bkw-text-secondary: #93A8A1;
    --bkw-text-muted:     #6E827C;
    --bkw-ok:             #6BD3A0;
    --bkw-ok-soft:        #173A2A;
    --bkw-warn:           #F1C05A;
    --bkw-warn-soft:      #3D3115;
    --bkw-bad:            #F08C9C;
    --bkw-bad-soft:       #45222A;
    --bkw-shadow:         0 1px 2px rgba(0, 0, 0, .3), 0 1px 3px rgba(0, 0, 0, .25);
    --bkw-shadow-lg:      0 12px 28px rgba(0, 0, 0, .45);

    --bs-primary: var(--bkw-primary);
    --bs-primary-rgb: 111, 211, 188;
    --bs-success: var(--bkw-ok);
    --bs-danger: var(--bkw-bad);
    --bs-warning: var(--bkw-warn);
    --bs-body-bg: var(--bkw-bg);
    --bs-body-color: var(--bkw-text);
    --bs-secondary-color: var(--bkw-text-secondary);
    --bs-tertiary-bg: var(--bkw-surface-2);
    --bs-border-color: var(--bkw-border);
    --bs-link-color: var(--bkw-primary);
    --bs-link-hover-color: var(--bkw-primary-hover);
    --bs-link-color-rgb: 111, 211, 188;
    --bs-link-hover-color-rgb: 143, 224, 205;
    color-scheme: dark;
}

body {
    font-family: var(--bs-font-sans-serif);
    background-color: var(--bkw-bg);
    color: var(--bkw-text);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .h1, .h2, .h3 { text-wrap: balance; letter-spacing: -.01em; }

.angka { font-family: var(--bs-font-monospace); font-variant-numeric: tabular-nums; }

/* Utilitas */
.bg-surface { background-color: var(--bkw-surface) !important; }
.text-secondary-bkw { color: var(--bkw-text-secondary) !important; }
.border-bkw { border-color: var(--bkw-border) !important; }
.text-primary { color: var(--bkw-primary) !important; }
.bg-primary-soft { background-color: var(--bkw-primary-soft) !important; color: var(--bkw-primary-ink) !important; }

/* Kartu */
.card {
    --bs-card-bg: var(--bkw-surface);
    --bs-card-border-color: var(--bkw-border);
    --bs-card-border-radius: var(--bkw-radius);
    --bs-card-inner-border-radius: calc(var(--bkw-radius) - 1px);
    --bs-card-cap-bg: transparent;
    box-shadow: var(--bkw-shadow);
}

/* Tombol */
.btn { --bs-btn-font-weight: 600; --bs-btn-border-radius: 10px; }
.btn-primary {
    --bs-btn-color: var(--bkw-on-primary);
    --bs-btn-bg: var(--bkw-primary);
    --bs-btn-border-color: var(--bkw-primary);
    --bs-btn-hover-color: var(--bkw-on-primary);
    --bs-btn-hover-bg: var(--bkw-primary-hover);
    --bs-btn-hover-border-color: var(--bkw-primary-hover);
    --bs-btn-active-color: var(--bkw-on-primary);
    --bs-btn-active-bg: var(--bkw-primary-hover);
    --bs-btn-active-border-color: var(--bkw-primary-hover);
    --bs-btn-disabled-color: var(--bkw-on-primary);
    --bs-btn-disabled-bg: var(--bkw-primary);
    --bs-btn-disabled-border-color: var(--bkw-primary);
}
.btn-outline-primary {
    --bs-btn-color: var(--bkw-primary);
    --bs-btn-border-color: var(--bkw-primary);
    --bs-btn-hover-color: var(--bkw-on-primary);
    --bs-btn-hover-bg: var(--bkw-primary);
    --bs-btn-hover-border-color: var(--bkw-primary);
    --bs-btn-active-color: var(--bkw-on-primary);
    --bs-btn-active-bg: var(--bkw-primary-hover);
    --bs-btn-active-border-color: var(--bkw-primary-hover);
}
.btn-soft {
    --bs-btn-color: var(--bkw-text);
    --bs-btn-bg: var(--bkw-surface-2);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--bkw-text);
    --bs-btn-hover-bg: var(--bkw-border);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: var(--bkw-border);
}

/* Formulir */
.form-control, .form-select { border-color: var(--bkw-border); background-color: var(--bkw-surface); }
.form-control:focus, .form-select:focus {
    border-color: var(--bkw-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .22);
}
.form-check-input:checked { background-color: var(--bkw-primary); border-color: var(--bkw-primary); }
.form-range::-webkit-slider-thumb { background-color: var(--bkw-primary); }
.form-range::-moz-range-thumb { background-color: var(--bkw-primary); }
.form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25); }
.form-check-input:focus { border-color: var(--bkw-primary); box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .22); }

/* Pill status (dipakai lintas halaman) */
.pill { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; font-weight: 700; padding: .15rem .6rem; border-radius: 99px; white-space: nowrap; }
.pill-primary { background: var(--bkw-primary-soft); color: var(--bkw-primary-ink); }
.pill-accent  { background: var(--bkw-accent-soft); color: var(--bkw-accent-ink); }
.pill-ok      { background: var(--bkw-ok-soft); color: var(--bkw-ok); }
.pill-warn    { background: var(--bkw-warn-soft); color: var(--bkw-warn); }
.pill-bad     { background: var(--bkw-bad-soft); color: var(--bkw-bad); }
.pill-muted   { background: var(--bkw-surface-2); color: var(--bkw-text-secondary); }

:focus-visible { outline: 2px solid var(--bkw-primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}