/*!
 * DESIGN TOKENS — Nimbus Design System (gaya Atlassian)
 * ------------------------------------------------------------------
 * File ini adalah SUMBER KEBENARAN TUNGGAL untuk semua nilai visual
 * dasar: warna, radius, shadow, spacing, dan tipografi.
 *
 * ATURAN PAKAI:
 * 1. Aplikasi manapun yang memakai design system ini WAJIB meng-include
 *    file ini SEBELUM base.css / layout.css / components.css.
 * 2. Jangan pernah hardcode hex warna atau angka px langsung di
 *    komponen baru — selalu pakai var(--nama-token) di bawah ini.
 * 3. Kalau butuh warna/ukuran baru yang belum ada, tambahkan token
 *    baru di sini dulu (lalu naikkan versi file ini), jangan menambal
 *    di file komponen masing-masing aplikasi.
 * 4. Tema (mis. dark mode / brand lain) dibuat dengan meng-override
 *    variabel-variabel ini di selector lain, misalnya:
 *      [data-theme="dark"] { --color-bg: #1D2125; ... }
 *    Komponen tidak perlu diubah sama sekali.
 * ------------------------------------------------------------------
 * Versi token: 1.0.0
 */

:root{
  /* ============ WARNA NETRAL & PERMUKAAN ============ */
  --color-bg: #F7F8F9;
  --color-surface: #FFFFFF;
  --color-surface-sunken: #F1F2F4;
  --color-border: #DCDFE4;
  --color-border-bold: #B3B9C4;

  /* ============ WARNA TEKS ============ */
  --text-900: #1D2125;
  --text-700: #44546F;
  --text-500: #626F86;
  --text-subtle: #7A869A;
  --text-inverse: #FFFFFF;

  /* ============ WARNA MEREK (BRAND / BIRU) ============ */
  --brand-bold: #0C66E4;
  --brand-bolder: #0055CC;
  --brand-subtle: #E9F2FF;
  --brand-subtle-border: #CCE0FF;

  /* ============ WARNA STATUS ============ */
  --success-bold: #1F845A;
  --success-subtle: #DCFFF1;
  --success-text: #216E4E;

  --danger-bold: #C9372C;
  --danger-subtle: #FFECEB;
  --danger-text: #AE2E24;

  --warning-bold: #E2B203;
  --warning-subtle: #FFF7D6;
  --warning-text: #7F5F01;

  --discovery-bold: #8270DB;
  --discovery-subtle: #F3F0FF;

  /* ============ RADIUS ============ */
  --radius-s: 3px;
  --radius-m: 6px;
  --radius-l: 8px;
  --radius-full: 999px;

  /* ============ SHADOW ============ */
  --shadow-raised: 0 1px 1px rgba(9,30,66,0.25), 0 0 1px rgba(9,30,66,0.31);
  --shadow-overlay: 0 8px 12px rgba(9,30,66,0.15), 0 0 1px rgba(9,30,66,0.31);

  /* ============ SPACING SCALE (basis 4px) ============ */
  /* Pakai skala ini untuk padding/margin/gap komponen baru,
     supaya jarak antar elemen konsisten di semua aplikasi. */
  --space-025: 2px;
  --space-050: 4px;
  --space-075: 6px;
  --space-100: 8px;
  --space-150: 12px;
  --space-200: 16px;
  --space-250: 20px;
  --space-300: 24px;
  --space-400: 32px;
  --space-500: 40px;

  /* ============ TIPOGRAFI ============ */
  --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --font-size-h1: 29px;
  --font-size-h2: 24px;
  --font-size-h3: 20px;
  --font-size-h4: 16px;
  --font-size-body: 14px;
  --font-size-small: 12px;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-base: 1.42857;

  /* ============ LAYOUT ============ */
  --sidebar-w: 260px;
  --header-h: 56px;

  /* ============ Z-INDEX SCALE ============ */
  --z-header: 40;
  --z-sidebar: 30;
  --z-sidebar-overlay: 25;
  --z-dropdown: 50;
  --z-modal: 100;
}

/*
 * BREAKPOINT REFERENSI (dipakai manual di media query, CSS belum
 * bisa membaca custom property di dalam @media):
 *   --breakpoint-sm: 560px
 *   --breakpoint-md: 900px
 * Gunakan angka ini persis di setiap file yang menulis @media,
 * supaya semua aplikasi patah pada titik yang sama.
 */