@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  /* Fonts */
  --font-title: 'Outfit', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;

  /* Client Theme (Light/Hybrid) Tokens */
  --c-bg: #ffffff;
  --c-bg-soft: #f8fafc;
  --c-bg-card: #ffffff;
  --c-primary: #0f172a; /* Deep Navy */
  --c-primary-rgb: 15, 23, 42;
  --c-accent: #2563eb; /* Royal Blue */
  --c-accent-hover: #1d4ed8;
  --c-accent-light: #eff6ff;
  --c-text: #334155; /* Slate Text */
  --c-text-muted: #64748b;
  --c-border: #e2e8f0;
  --c-card-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.08);
  --c-card-shadow-hover: 0 20px 40px -15px rgba(37, 99, 235, 0.12);

  /* Admin Theme (Dark Premium) Tokens */
  --a-bg: #030712; /* Deep Black */
  --a-bg-sidebar: #070b13; /* Elegant Deep Dark Navy */
  --a-bg-card: #0b1329; /* Navy Slate Card */
  --a-bg-input: #111a36;
  --a-primary: #3b82f6; /* Brilliant Blue */
  --a-accent: #60a5fa;
  --a-accent-glow: rgba(59, 130, 246, 0.15);
  --a-text: #f3f4f6; /* Off White */
  --a-text-muted: #9ca3af;
  --a-border: #1e293b;
  --a-card-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
  --a-card-shadow-glow: 0 0 25px rgba(59, 130, 246, 0.12);

  /* Status Colors */
  --color-pending: #f59e0b;      /* Pending - Orange */
  --color-dp: #3b82f6;           /* Menunggu DP - Blue */
  --color-process: #10b981;      /* Diproses - Green */
  --color-revision: #ef4444;     /* Revisi - Red */
  --color-done: #8b5cf6;         /* Selesai - Purple */
  
  --color-unpaid: #ef4444;       /* Belum Lunas - Red */
  --color-paid: #10b981;         /* Lunas - Green */
  --color-dp-paid: #3b82f6;      /* DP Dibayar - Blue */

  /* Common Transitions & Border Radius */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;
  --container-width: 1200px;
}

/* Base resets & utilities */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-title);
  font-weight: 700;
}

a {
  text-decoration: none;
  color: inherit;
}

/* Status Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Status Order */
.badge-pending { background: rgba(245, 158, 11, 0.12); color: var(--color-pending); border: 1px solid rgba(245, 158, 11, 0.2); }
.badge-menunggu-dp { background: rgba(59, 130, 246, 0.12); color: var(--color-dp); border: 1px solid rgba(59, 130, 246, 0.2); }
.badge-diproses { background: rgba(16, 185, 129, 0.12); color: var(--color-process); border: 1px solid rgba(16, 185, 129, 0.2); }
.badge-revisi { background: rgba(239, 68, 68, 0.12); color: var(--color-revision); border: 1px solid rgba(239, 68, 68, 0.2); }
.badge-selesai { background: rgba(139, 92, 246, 0.12); color: var(--color-done); border: 1px solid rgba(139, 92, 246, 0.2); }

/* Status Pembayaran */
.badge-belum-lunas { background: rgba(239, 68, 68, 0.12); color: var(--color-unpaid); border: 1px solid rgba(239, 68, 68, 0.2); }
.badge-dp-dibayar { background: rgba(59, 130, 246, 0.12); color: var(--color-dp-paid); border: 1px solid rgba(59, 130, 246, 0.2); }
.badge-lunas { background: rgba(16, 185, 129, 0.12); color: var(--color-paid); border: 1px solid rgba(16, 185, 129, 0.2); }