:root {
  /* Warna Brand */
  --color-brand-utama: #0d5e3a;
  --color-brand-sekunder: #1a8f5e;
  --color-brand-cerah: #8bd3a7;
  
  /* Warna Aksen */
  --color-aksen-prestasi: #f6b62d;
  --color-aksen-tekno: #005fcc;
  
  /* Warna Netral */
  --color-netral-100: #ffffff;
  --color-netral-200: #f5f7f4;
  --color-netral-400: #cfd5cf;
  --color-netral-600: #6a756a;
  --color-netral-900: #1a1f1a;
  
  /* Warna Status */
  --color-status-sukses: #1f8c59;
  --color-status-peringatan: #d9822b;
  --color-status-bahaya: #bb2d2d;
  
  /* Sistem Spasi */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  
  /* Breakpoint (untuk referensi JS) */
  --viewport-xs: 0;
  --viewport-sm: 480px;
  --viewport-md: 768px;
  --viewport-lg: 1024px;
  --viewport-xl: 1440px;
  
  /* Layout */
  --max-content-width: 1280px;
  --header-height: 64px;
  --touch-target-min: 44px;
  --grid-gutter: 24px;
  --border-radius: 16px;
  --border-radius-sm: 8px;
  
  /* Transisi */
  --transition-default: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-medium: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
}