/* UP ProDev — TOKEN TERPUSAT (Pasal 61 & 62 docs/UP_PRODEV_DESIGN_SYSTEM.md)
 *
 * SATU-SATUNYA berkas di UP ProDev yang boleh memuat nilai hex.
 * Halaman, komponen, dan berkas CSS lain WAJIB memakai var(--up-*).
 *
 * Alasannya dua, dan keduanya mengikat:
 *   1. CLAUDE.md melarang hex hardcode di halaman;
 *   2. Pasal 61 spesifikasi UP ProDev sendiri memerintahkan token terpusat.
 *
 * Kalau owner mengubah satu warna, ia berubah di SELURUH aplikasi dari sini —
 * itu inti "konsistensi lebih penting daripada kreativitas".
 *
 * Token di-scope ke .up-scope, BUKAN :root — supaya identitas visual UP ProDev
 * tidak pernah merembes ke halaman ERP lain yang punya sistem warnanya sendiri.
 */

.up-scope {
    /* ── dasar (Pasal 6) ───────────────────────────────────────────────── */
    --up-bg-app: #F8F7F5;          /* beige hangat sangat halus */
    --up-bg-card: #FFFFFF;
    --up-text-primary: #182338;    /* navy-gray; DILARANG #000000 */
    --up-text-secondary: #667085;
    --up-text-muted: #98A2B3;
    --up-border: #EAECF0;
    --up-border-strong: #DDE1E7;   /* hanya bila perlu */

    /* ── aksen (Pasal 7) ──────────────────────────────────────────────── */
    --up-primary: #E96B8F;         /* soft rose */
    --up-primary-light: #FCE8EE;
    --up-primary-hover: #D95A7E;
    --up-success: #27A879;
    --up-success-light: #E8F6F0;
    --up-warning: #F4A62A;
    --up-warning-light: #FFF3D9;
    --up-danger: #EB5757;
    --up-danger-light: #FDE7E7;
    --up-blue: #4C9CF0;
    --up-blue-light: #EAF4FE;
    --up-purple: #7B61E8;
    --up-purple-light: #F0ECFE;
    --up-pink: #E76891;            /* packaging */
    --up-pink-light: #FCE8EF;

    /* ── warna tahap pengembangan (Pasal 8) ───────────────────────────── */
    /* JANGAN diubah acak — dipakai identik di sidebar, KPI, flow, dan tabel. */
    --up-stage-ideation-bg: #F1F2F4;    --up-stage-ideation-ic: #667085;
    --up-stage-supplier-bg: #E7F6EF;    --up-stage-supplier-ic: #27A879;
    --up-stage-formula-bg: #E8F7EF;     --up-stage-formula-ic: #239B6D;
    --up-stage-packaging-bg: #FCE9EF;   --up-stage-packaging-ic: #D94F7B;
    --up-stage-design-bg: #EFEAFE;      --up-stage-design-ic: #7458DB;
    --up-stage-bpom-bg: #E8F3FE;        --up-stage-bpom-ic: #408FDB;
    --up-stage-po-bg: #FFF0E4;          --up-stage-po-ic: #C87836;
    --up-stage-production-bg: #F0F1F3;  --up-stage-production-ic: #667085;
    --up-stage-launch-bg: #F2F3F5;      --up-stage-launch-ic: #667085;

    /* ── badge status produk (Pasal 31) ───────────────────────────────── */
    --up-st-ontrack-bg: #E7F6EF;    --up-st-ontrack-tx: #187A55;
    --up-st-atrisk-bg: #FFF2D5;     --up-st-atrisk-tx: #A86A00;
    --up-st-delayed-bg: #FDE6E6;    --up-st-delayed-tx: #C83F3F;
    --up-st-completed-bg: #EAF2FE;  --up-st-completed-tx: #377CC8;
    --up-st-paused-bg: #F1F2F4;     --up-st-paused-tx: #667085;

    /* ── permukaan khusus shell (Pasal 10, 12, 16, 25) ────────────────── */
    --up-sidebar-border: #ECEDEF;
    --up-sidebar-item-tx: #344054;
    --up-sidebar-item-hover: #F8F5F5;
    --up-sidebar-item-active-bg: #FCEAEC;
    --up-sidebar-item-active-ic: #C94D6E;
    --up-sidebar-item-active-tx: #27364B;
    --up-search-bg: #FAFBFC;
    --up-search-border: #E6E8EC;
    --up-btn-primary-bg: #E76B8E;
    --up-btn-primary-hover: #D85C80;
    --up-table-head-bg: #FAFAFB;
    --up-table-row-line: #EEF0F2;
    --up-table-row-hover: #FBFBFC;
    --up-track: #EEF1F4;            /* track progress bar */
    --up-tab-bg: #F6F7F9;
    --up-tab-active-bg: #FCE8ED;
    --up-tab-active-tx: #7F3149;
    --up-thumb-bg: #F7F7F7;
    --up-hover-soft: #F3F4F6;
    --up-dropdown-border: #E5E7EB;
    --up-dropdown-hover: #F7F7F8;
    --up-today-line: #E95A71;
    --up-focus-border: #DB6E8F;
    --up-table-text: #27364B;

    /* ── radius (Pasal 39) ────────────────────────────────────────────── */
    --up-radius-sm: 6px;            /* kontrol kecil, badge */
    --up-radius-md: 8px;            /* tombol, input */
    --up-radius-nav: 9px;           /* item sidebar, dropdown */
    --up-radius-card: 12px;
    --up-radius-modal: 14px;
    --up-radius-pill: 999px;        /* HANYA progress bar & titik status */

    /* ── bayangan (Pasal 18, 41) ──────────────────────────────────────── */
    --up-shadow-card: 0 1px 2px rgba(16, 24, 40, 0.03);
    --up-shadow-dropdown: 0 8px 24px rgba(16, 24, 40, 0.08);
    --up-overlay: rgba(15, 23, 42, 0.30);
    --up-focus-ring: 0 0 0 3px rgba(219, 110, 143, 0.10);

    /* ── spacing 4px (Pasal 38) ───────────────────────────────────────── */
    /* Nilai 13/17/19/23 DILARANG kecuali dituntut tipografi. */
    --up-sp-1: 4px;   --up-sp-2: 8px;   --up-sp-3: 12px;  --up-sp-4: 16px;
    --up-sp-5: 20px;  --up-sp-6: 24px;  --up-sp-8: 32px;  --up-sp-12: 48px;

    /* ── tinggi baku komponen (Pasal 62) ──────────────────────────────── */
    --up-h-sidebar-item: 42px;
    --up-h-btn: 36px;
    --up-h-input: 38px;
    --up-h-input-lg: 42px;
    --up-h-search: 36px;
    --up-h-tab: 30px;
    --up-h-badge-status: 24px;
    --up-h-badge-cat: 22px;
    --up-h-table-head: 38px;
    --up-h-table-row: 50px;
    --up-h-kpi-icon: 42px;

    /* ── tata letak (Pasal 10, 14) ────────────────────────────────────── */
    --up-sidebar-w: 196px;
    --up-brand-h: 62px;
    --up-page-pad: 22px;

    /* ── tipografi (Pasal 4, 5) ───────────────────────────────────────── */
    --up-font: Inter, ui-sans-serif, system-ui, -apple-system,
               BlinkMacSystemFont, "Segoe UI", sans-serif;
    --up-fs-title: 30px;      --up-lh-title: 38px;
    --up-fs-subtitle: 14px;   --up-lh-subtitle: 21px;
    --up-fs-section: 16px;    --up-lh-section: 24px;
    --up-fs-kpi: 24px;        --up-lh-kpi: 30px;
    --up-fs-card-title: 13px;
    --up-fs-body: 13px;
    --up-fs-meta: 12px;
    --up-fs-small: 11px;
    --up-fs-micro: 10px;      /* HANYA badge Today di timeline (Pasal 34) */
    --up-fw-reg: 400;  --up-fw-med: 500;  --up-fw-semi: 600;  --up-fw-bold: 700;

    /* ── interaksi (Pasal 56) ─────────────────────────────────────────── */
    --up-transition: 150ms ease;

    /* ── ikon (Pasal 3) ───────────────────────────────────────────────── */
    --up-icon: 18px;
    --up-icon-sm: 16px;
    --up-stroke: 1.75;
}