/* ============================================================
   Design Tokens — SOP & Compliance Management System
   Corporate / modern / clean. Lihat brief §2-3 utk sumbernya.
   ============================================================ */
:root {
  /* --- Brand --- */
  --color-primary: #0F2540;        /* dark navy */
  --color-primary-hover: #16335A;
  --color-primary-active: #0A1B30;
  --color-primary-soft: #E8EDF3;   /* navy tint, dipakai bg item sidebar aktif dsb */
  --color-secondary: #2563EB;      /* blue */
  --color-secondary-hover: #1D4ED8;
  --color-secondary-soft: #EAF1FE;

  /* --- Surfaces --- */
  --color-bg: #F5F6F8;             /* off-white / very light gray, page background */
  --color-surface: #FFFFFF;        /* card / panel */
  --color-surface-alt: #FAFBFC;    /* table header, subtle alt rows */
  --color-border: #E5E8EC;
  --color-border-strong: #D6DBE1;

  /* --- Text --- */
  --color-text: #171B21;           /* near-black */
  --color-text-secondary: #565E6B;
  --color-text-muted: #8A93A1;
  --color-text-on-primary: #FFFFFF;
  --color-text-on-secondary: #FFFFFF;

  /* --- Status (brief §2 — cuma buat status/progress/alert/KPI, bukan dekorasi) --- */
  --color-success: #15803D;
  --color-success-bg: #E7F6EC;
  --color-success-border: #BEE4CB;

  --color-warning: #B45309;
  --color-warning-bg: #FDF3E3;
  --color-warning-border: #F3DBAE;

  --color-danger: #B91C1C;
  --color-danger-bg: #FBEBEB;
  --color-danger-border: #F0C6C6;

  --color-info: #1D4ED8;
  --color-info-bg: #EAF1FE;
  --color-info-border: #C7DBFC;

  --color-neutral: #565E6B;
  --color-neutral-bg: #EEF0F3;
  --color-neutral-border: #DCE0E5;

  /* --- Typography --- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  --text-page-title: 700 24px/1.3 var(--font-sans);
  --text-section-title: 600 16px/1.4 var(--font-sans);
  --text-card-title: 600 14.5px/1.4 var(--font-sans);
  --text-body: 400 14px/1.55 var(--font-sans);
  --text-body-medium: 500 14px/1.5 var(--font-sans);
  --text-caption: 500 12.5px/1.4 var(--font-sans);
  --text-metadata: 600 11px/1.3 var(--font-sans);

  /* --- Spacing scale --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* --- Radius --- */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 999px;

  /* --- Shadow (sangat ringan, brief §38) --- */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12);

  /* --- Layout --- */
  --sidebar-width: 260px;
  --sidebar-width-collapsed: 72px;
  --header-height: 60px;
  --transition-fast: 150ms ease;
  --transition-base: 220ms ease;
}