:root {
  /* Brand Colors */
  --color-primary:       #16a34a;
  --color-primary-light: #4ade80;
  --color-primary-dark:  #15803d;
  --color-primary-50:    #f0fdf4;
  --color-primary-100:   #dcfce7;

  /* Neutrals */
  --color-white:    #ffffff;
  --color-gray-50:  #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;

  /* Semantic */
  --color-danger:       #ef4444;
  --color-danger-light: #fee2e2;
  --color-warning:      #f59e0b;
  --color-info:         #3b82f6;
  --color-info-light:   #eff6ff;

  /* Category Colors */
  --color-sewa:         #16a34a;
  --color-sewa-light:   #f0fdf4;
  --color-jasa:         #3b82f6;
  --color-jasa-light:   #eff6ff;
  --color-produk:       #f59e0b;
  --color-produk-light: #fffbeb;

  /* Typography */
  --font-primary: 'Plus Jakarta Sans', 'Poppins', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* Radius */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.05);
  --shadow-green: 0 8px 24px rgba(22,163,74,.20);

  /* Transitions */
  --transition: all .2s ease;
  --transition-slow: all .35s ease;

  /* Layout */
  --container-max: 1280px;
  --navbar-height: 64px;
}