/* Generated from frontend/styles/_core.css by crm/tools/sync-erp-tokens.mjs. */
:root {
      --bg: #0e0e12;
      --bg2: #13131a;
      --card: #17171f;
      --card2: #20202e;
      --border: rgba(255, 255, 255, 0.09);
      --border2: rgba(255, 255, 255, 0.13);
      --accent: #e8293a;
      --accent2: #ff5566;
      --accent-dim: rgba(232, 41, 58, 0.13);
      --accent-glow: rgba(232, 41, 58, 0.28);
      --text: #f0f0f5;
      --text2: #8b8b9e;
      --text3: #6b6b82;
      --font: 'Plus Jakarta Sans', sans-serif;
      --mono: 'JetBrains Mono', monospace;
      --r: 12px;
      --r2: 18px;
      --r-sm: 8px;
      --control-h: 40px;

      /* Semantic colors — design system */
      --success:        #22c55e;
      --success-dim:    rgba(34, 197, 94, .13);
      --success-bright: #34d399;   /* green terang — progress bar, angka positif */
      --danger-soft:    #f87171;   /* soft red — sisa, overdue */
      --info: #4fa3e0;
      --info-dim: rgba(79, 163, 224, .13);
      --warning: #fb923c;
      --warning-dim: rgba(251, 146, 60, .15);
      --danger: #e8293a;
      --danger-dim: rgba(232, 41, 58, .13);

      /* Status palette — SATU sumber warna status order.
         Dibaca CSS & JS (kanban/list/modal) via getComputedStyle.
         Theme-agnostic: nilai sama di light & dark (samakan perilaku lama).
         Hex eksplisit WAJIB — JS menempel alpha `${color}NN`, jadi harus hex 6-digit. */
      --st-nego:    #eab308;
      --st-blue:    #4fa3e0;
      --st-purple:  #a78bfa;
      --st-amber:   #f59e0b;
      --st-orange:  #fb923c;
      --st-green:   #34d399;
      --st-green2:  #22c55e;
      --st-teal:    #14b8a6;
      --st-emerald: #10b981;
      --st-sky:     #38bdf8;
      --st-red:     #f87171;

      /* Badge palette — hue token; bg/border diturunkan via color-mix di .ba–.bj.
         Nilai light ada di body.light. Menghapus duplikasi body.light per-badge. */
      --bdg-mint:   #47ffd4;
      --bdg-gray:   #a0a0c8;
      --bdg-amber:  #ffc847;
      --bdg-red:    #ff7080;
      --bdg-purple: #c070ff;
      --bdg-blue:   #60a0ff;

      /* Z-index scale — layering global app. Nilai = PERSIS seperti sebelumnya (nol perubahan
         stacking), cuma dinamai & dipusatkan. Dipakai juga di beberapa z-index inline JS
         (via style="z-index:var(--z-*)", valid CSS di atribut inline). One-off / subsystem
         lokal (pdf-designer 9100/9300/9000, mc-dd-in-modal 21050, mscr 40, canvas handle
         internal pdf-visual-designer 5-25) sengaja tetap literal — bukan vocabulary global. */
      --z-sidebar:  10;
      --z-topbar:   20;
      --z-dropdown: 200;
      --z-popover:  300;
      --z-loader:   400;
      --z-login:    500;
      --z-overlay:  999;
      --z-float:    9999;
      --z-menu:     21100;
      --z-picker:   30000;
      --z-top:      99999;

      /* Motion — durasi dinamai persis sesuai nilai asli dalam ms (angka di nama token).
         Menyatukan EJAAN (leading-zero vs tanpa) untuk nilai yang SAMA — bukan menyamakan
         nilai yang beda (150 dan 160 sengaja tetap token terpisah, tak bisa diverifikasi
         visual tanpa app live). Durasi langka/single-use sengaja dibiarkan literal. */
      --dur-100: .1s;
      --dur-120: .12s;
      --dur-140: .14s;
      --dur-150: .15s;
      --dur-160: .16s;
      --dur-200: .2s;
      --dur-280: .28s;
      --dur-300: .3s;
      --ease-standard: cubic-bezier(.4, 0, .2, 1);
      --ease-pop: cubic-bezier(.2,.9,.2,1);

      /* Spacing — dinamai persis sesuai nilai px asli, dari deklarasi gap, padding
         (nilai tunggal), dan margin-top/bottom. BUKAN skala sp-1..sp-12 di atas (itu
         index tier, belum dipakai) — nama ini nilai literal supaya jelas & tak tabrakan
         makna. Mencakup semua nilai margin-vertikal (per permintaan eksplisit untuk
         merapikan white-space), termasuk yang cuma dipakai 1x (mis. 22px/32px) — TIDAK
         di-snap ke nilai lain, exact-value preservation seperti slice sebelumnya. */
      --space-1: 1px;
      --space-2: 2px;
      --space-3: 3px;
      --space-4: 4px;
      --space-5: 5px;
      --space-6: 6px;
      --space-7: 7px;
      --space-8: 8px;
      --space-9: 9px;
      --space-10: 10px;
      --space-11: 11px;
      --space-12: 12px;
      --space-13: 13px;
      --space-14: 14px;
      --space-16: 16px;
      --space-18: 18px;
      --space-20: 20px;
      --space-22: 22px;
      --space-24: 24px;
      --space-32: 32px;

      /* Tipografi — dinamai persis sesuai nilai px asli (naming "-5" untuk desimal .5,
         cth --fs-10-5 = 10.5px). Cuma nilai dengan reuse tinggi (>=8x) yang ditoken;
         nilai langka (hero number, KPI besar, dll) sengaja tetap literal. Exact-value
         preservation — TIDAK menyatukan 10px dgn 10.5px meski cuma beda setengah pixel,
         karena itu keputusan hierarki visual, bukan hal teknis yang aman diputuskan sendiri. */
      --fs-9: 9px;
      --fs-9-5: 9.5px;
      --fs-10: 10px;
      --fs-10-5: 10.5px;
      --fs-11: 11px;
      --fs-11-5: 11.5px;
      --fs-12: 12px;
      --fs-12-5: 12.5px;
      --fs-13: 13px;
      --fs-14: 14px;

      /* Chart palette — dataviz skill standard (ApexCharts, MIT). 8-hue categorical,
         fixed order (CVD-safety mechanism, never cycled/reordered). Validated via
         scripts/validate_palette.js against Lacos's ACTUAL card surface (#17171f
         dark / #ffffff light) — both modes PASS (dark: worst adjacent CVD ΔE 10.3,
         floor band, ships with direct labels/legend per skill rule; light: 3 slots
         sub-3:1, relief via visible labels/table view). Values = reference palette
         hues (skill's pre-validated instance), NOT reinvented — same hue family
         already clears Lacos's surfaces so no re-derivation needed.
         Status/ink/surface roles REUSE existing tokens (zero new colors):
         good=--success warning=--warning serious=--danger-soft critical=--danger
         ink=--text/--text2/--text3  grid=--border  axis=--border2  surface=--card
         COLLISION RULE: never mix status-colored and categorical-colored series
         in one chart — when a series means good/bad it wears status tokens, when
         it's just "series N" it wears --chart-*, never both. */
      --chart-1: #3987e5; /* blue */
      --chart-2: #199e70; /* aqua */
      --chart-3: #c98500; /* yellow */
      --chart-4: #008300; /* green */
      --chart-5: #9085e9; /* violet */
      --chart-6: #e66767; /* red */
      --chart-7: #d55181; /* magenta */
      --chart-8: #d95926; /* orange */
      /* Sequential — one hue (blue), light→dark, for magnitude (heatmap-style). */
      --chart-seq-100: #cde2fb;
      --chart-seq-150: #b7d3f6;
      --chart-seq-200: #9ec5f4;
      --chart-seq-250: #86b6ef;
      --chart-seq-300: #6da7ec;
      --chart-seq-350: #5598e7;
      --chart-seq-400: #3987e5;
      --chart-seq-450: #2a78d6;
      --chart-seq-500: #256abf;
      --chart-seq-550: #1c5cab;
      --chart-seq-600: #184f95;
      --chart-seq-650: #104281;
      --chart-seq-700: #0d366b;
      /* Diverging — blue (--chart-1) vs red (--chart-6), neutral midpoint below. */
      --chart-div-neutral: #383835;

      /* Accent gradient */
      --accent-grad: linear-gradient(135deg, #e8293a, #ff5566);

      /* Elevation */
      --shadow-sm: 0 1px 4px rgba(0,0,0,.25);
      --shadow-md: 0 4px 14px rgba(0,0,0,.4);
      --shadow-lg: 0 12px 40px rgba(0,0,0,.55);
    }
body.light {
      --bg: #f2f2f7;
      --bg2: #e8e8ef;
      --card: #ffffff;
      --card2: #f0f0f8;
      --border: rgba(0, 0, 0, 0.07);
      --border2: rgba(0, 0, 0, 0.12);
      --accent: #e8293a;
      --accent2: #c41e2e;
      --accent-dim: rgba(232, 41, 58, 0.09);
      --accent-glow: rgba(232, 41, 58, 0.18);
      --text: #1a1a2e;
      --text2: #5a5a78;
      --text3: #9898b2;
      --success: #16a34a;
      --success-dim: rgba(22, 163, 74, 0.11);
      --bdg-mint:   #0d9488;
      --bdg-gray:   #475569;
      --bdg-amber:  #a16207;
      --bdg-red:    #c41e2e;
      --bdg-purple: #7c3aed;
      --bdg-blue:   #2563eb;
      /* Chart categorical — light-mode step (dataviz skill), validated vs --card #ffffff */
      --chart-1: #2a78d6;
      --chart-2: #1baf7a;
      --chart-3: #eda100;
      --chart-4: #008300;
      --chart-5: #4a3aa7;
      --chart-6: #e34948;
      --chart-7: #e87ba4;
      --chart-8: #eb6834;
      --chart-div-neutral: #f0efec;
    }