/*
 * Design token — sumber: docs/design artboard "Design token" (hal. 7) & "Komponen & state" (hal. 6).
 * Satu-satunya file yang boleh berisi nilai warna mentah. File lain memakai var(--…).
 * Biru = satu-satunya aksen. Hijau/kuning/merah hanya untuk status.
 */
:root {
  /* ---------- Netral ---------- */
  --color-bg: #F6F7F9;
  --color-surface: #FFFFFF;
  --color-border: #E4E7EC;
  --color-border-control: #D0D5DD;
  --color-text: #101828;
  --color-text-secondary: #475467;
  --color-text-tertiary: #667085;
  --color-text-disabled: #98A2B3;          /* dari catatan tab "Disabled: #98A2B3" */
  --color-table-head: #F9FAFB;
  --color-bg-disabled: #F2F4F7;            /* turunan: latar kontrol disabled / hover ghost */
  --color-on-primary: #FFFFFF;
  --color-tooltip: #101828;                /* "latar #101828" */
  --color-overlay: rgba(16, 24, 40, 0.4);  /* backdrop modal 40% */
  --color-skeleton: #EAECF0;               /* turunan: batang skeleton */

  /* ---------- Aksen (biru) ---------- */
  --color-primary: #2563EB;
  --color-primary-hover: #1D4ED8;
  --color-primary-active: #1E40AF;
  --color-primary-tint: #EFF4FF;           /* tint / menu aktif */
  --color-primary-tint-border: #C7D7FE;

  /* ---------- Status (khusus status, bukan dekorasi) ---------- */
  --color-success-text: #027A48;
  --color-success-bg: #ECFDF3;
  --color-success-border: #ABEFC6;
  --color-success-dot: #12B76A;

  --color-warning-text: #B54708;
  --color-warning-bg: #FFFAEB;
  --color-warning-border: #FEDF89;
  --color-warning-dot: #F79009;

  --color-error-text: #B42318;
  --color-error-bg: #FEF3F2;
  --color-error-border: #FECDCA;
  --color-error-dot: #F04438;
  --color-row-failed: #FEF6F5;             /* baris gagal di tabel */

  --color-danger: #D92D20;                 /* tombol Danger */
  --color-danger-hover: #B42318;
  --color-danger-active: #912018;          /* turunan */

  /* ---------- Fokus ---------- */
  --focus-ring: 0 0 0 4px rgba(37, 99, 235, 0.24);   /* selalu biru 4 px */

  /* ---------- Tipografi (Inter) ---------- */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  --text-page-title: 600 24px/32px var(--font-sans);
  --text-header-title: 600 18px/28px var(--font-sans);
  --text-card-title: 600 16px/24px var(--font-sans);
  --text-stat: 600 30px/38px var(--font-sans);
  --text-body: 400 14px/20px var(--font-sans);
  --text-body-medium: 500 14px/20px var(--font-sans);
  --text-caption: 500 12px/16px var(--font-sans);      /* table-head / caption */
  --text-code: 600 34px/40px var(--font-mono);

  /* ---------- Spacing (kelipatan 4) ---------- */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;   /* jarak antar bagian, padding kartu */
  --space-32: 32px;   /* padding halaman */
  --space-48: 48px;

  /* ---------- Radius ---------- */
  --radius-sm: 6px;
  --radius-control: 8px;
  --radius-card: 12px;    /* kartu, modal */
  --radius-pill: 999px;   /* badge */

  /* ---------- Shadow ---------- */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);                                         /* kartu */
  --shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.10), 0 2px 4px -2px rgba(16, 24, 40, 0.06); /* toast */
  --shadow-lg: 0 20px 24px -4px rgba(16, 24, 40, 0.10), 0 8px 8px -4px rgba(16, 24, 40, 0.04); /* modal */

  /* ---------- Ukuran komponen & layout ---------- */
  --control-height: 40px;
  --control-height-lg: 44px;   /* halaman login */
  --control-height-sm: 32px;
  --sidebar-width: 240px;
  --sidebar-width-collapsed: 72px;
  --header-height: 64px;
  --toast-width: 360px;

  /* ---------- Layer ---------- */
  --z-sticky: 10;
  --z-sidebar: 20;
  --z-tooltip: 60;

  /* ---------- Ikon di CSS (data URI) ---------- */
  --icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --icon-chevron-down-disabled: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2398A2B3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}