/* ============================================================
   TOKEN BASE — core/css/tokens.base.css
   ------------------------------------------------------------
   Base token WAJIB di-load SEBELUM tokens.css skin.
   Skin hanya meng-override token yang berbeda karakternya.
   Token struktural (spacing, z-index, motion, font-size) hidup di sini.

   Aturan:
   - core.css & components.css TIDAK BOLEH hardcode warna/ukuran.
     Semua nilai visual dibaca dari token di sini.
   - Dark mode dioverride di blok [data-theme="dark"].
   ============================================================ */

:root {
  /* ---------- Brand ---------- */
  --c-primary:          #4b5563;
  --c-primary-hover:    #374151;
  --c-primary-active:   #1f2937;
  --c-primary-soft:     #f3f4f6;   /* bg tint utk badge/alert */
  --c-on-primary:       #ffffff;

  --c-secondary:        #6b7280;
  --c-secondary-hover:  #4b5563;
  --c-secondary-soft:   #f3f4f6;
  --c-on-secondary:     #ffffff;

  /* ---------- Semantic ---------- */
  --c-success:          #16a34a;
  --c-success-soft:     #dcfce7;
  --c-warning:          #d97706;
  --c-warning-soft:     #fef3c7;
  --c-danger:           #dc2626;
  --c-danger-soft:      #fee2e2;
  --c-info:             #0284c7;
  --c-info-soft:        #e0f2fe;
  --c-on-status:        #ffffff;

  /* ---------- Neutral scale ---------- */
  --c-n-50:  #f8fafc;
  --c-n-100: #f1f5f9;
  --c-n-200: #e2e8f0;
  --c-n-300: #cbd5e1;
  --c-n-400: #94a3b8;
  --c-n-500: #64748b;
  --c-n-600: #475569;
  --c-n-700: #334155;
  --c-n-800: #1e293b;
  --c-n-900: #0f172a;

  /* ---------- Surface & text (semantic, theme-aware) ---------- */
  --c-bg:            var(--c-n-100);  /* background aplikasi */
  --c-surface:       #ffffff;         /* card, panel */
  --c-surface-2:     var(--c-n-50);   /* nested / hover surface */
  --c-surface-3:     var(--c-n-100);  /* input bg, table stripe */
  --c-border:        var(--c-n-200);
  --c-border-strong: var(--c-n-300);
  --c-text:          var(--c-n-900);
  --c-text-muted:    var(--c-n-500);
  --c-text-subtle:   var(--c-n-400);
  --c-text-invert:   #ffffff;

  /* ---------- Sidebar & header (di-skin habis-habisan) ---------- */
  --c-sidebar-bg:          #ffffff;
  --c-sidebar-text:        var(--c-n-600);
  --c-sidebar-text-hover:  var(--c-n-900);
  --c-sidebar-active-bg:   var(--c-n-100);
  --c-sidebar-active-text: var(--c-primary);
  --c-sidebar-border:      var(--c-border);
  --c-sidebar-heading:     var(--c-n-400);
  --c-header-bg:           #ffffff;
  --c-header-text:         var(--c-n-700);
  --c-header-border:       var(--c-border);
  --c-brandbar-bg:         transparent;  /* Pertamina: top brand bar */
  --c-brandbar-h:          0px;

  /* ---------- Radius ---------- */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   18px;
  --r-pill: 999px;

  /* ---------- Shadow ---------- */
  --sh-xs: 0 1px 2px rgba(15, 23, 42, .05);
  --sh-sm: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
  --sh-md: 0 4px 12px rgba(15, 23, 42, .08);
  --sh-lg: 0 12px 28px rgba(15, 23, 42, .12);
  --sh-focus: 0 0 0 3px color-mix(in srgb, var(--c-primary) 25%, transparent);

  /* ---------- Spacing ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;

  /* ---------- Typography ---------- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", Consolas, monospace;
  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fs-xs:   11px;
  --fs-sm:   12.5px;
  --fs-base: 14px;
  --fs-md:   15px;
  --fs-lg:   17px;
  --fs-xl:   20px;
  --fs-2xl:  25px;
  --fs-3xl:  31px;
  --lh-tight: 1.25;
  --lh-base:  1.55;

  /* ---------- Layout ---------- */
  --sidebar-w:           264px;
  --sidebar-w-collapsed: 68px;
  --header-h:            60px;
  --content-max:         1440px;

  /* ---------- Z-index ---------- */
  --z-sidebar:  40;
  --z-header:   50;
  --z-dropdown: 60;
  --z-backdrop: 70;
  --z-modal:    80;
  --z-toast:    90;
  --z-tooltip:  95;

  /* ---------- Motion ---------- */
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 260ms;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* ============================================================
   DARK THEME — default fallback
   Skin boleh override lagi sesuai karakter masing-masing.
   ============================================================ */
[data-theme="dark"] {
  --c-bg:            #0b1120;
  --c-surface:       #131c2e;
  --c-surface-2:     #1a2436;
  --c-surface-3:     #212d42;
  --c-border:        #263349;
  --c-border-strong: #33425c;
  --c-text:          #e8edf5;
  --c-text-muted:    #9fb0c7;
  --c-text-subtle:   #74869e;

  --c-sidebar-bg:          #101828;
  --c-sidebar-text:        #9fb0c7;
  --c-sidebar-text-hover:  #ffffff;
  --c-sidebar-active-bg:   #1c2740;
  --c-sidebar-border:      #1f2a3f;
  --c-sidebar-heading:     #64758d;
  --c-header-bg:           #101828;
  --c-header-text:         #d7e0ec;
  --c-header-border:       #1f2a3f;

  --sh-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-sm: 0 1px 3px rgba(0, 0, 0, .45);
  --sh-md: 0 4px 14px rgba(0, 0, 0, .5);
  --sh-lg: 0 14px 32px rgba(0, 0, 0, .55);
}