@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 (Roadmap V1) */
  --color-order-masuk: #06b6d4;             /* Order Masuk - Cyan */
  --color-menunggu-pembayaran: #f59e0b;     /* Menunggu Pembayaran - Orange */
  --color-pembayaran-verified: #10b981;     /* Pembayaran Diverifikasi - Green */
  --color-diproses: #3b82f6;                /* Diproses - Blue */
  --color-revisi: #ef4444;                  /* Revisi - Red */
  --color-selesai: #8b5cf6;                 /* Selesai - Purple */
  --color-arsip: #64748b;                   /* Arsip - Grey */
  
  --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 (V1 Roadmap) */
.badge-order-masuk { background: rgba(6, 182, 212, 0.12); color: var(--color-order-masuk); border: 1px solid rgba(6, 182, 212, 0.2); }
.badge-menunggu-pembayaran { background: rgba(245, 158, 11, 0.12); color: var(--color-menunggu-pembayaran); border: 1px solid rgba(245, 158, 11, 0.2); }
.badge-pembayaran-verified { background: rgba(16, 185, 129, 0.12); color: var(--color-pembayaran-verified); border: 1px solid rgba(16, 185, 129, 0.2); }
.badge-diproses { background: rgba(59, 130, 246, 0.12); color: var(--color-diproses); border: 1px solid rgba(59, 130, 246, 0.2); }
.badge-revisi { background: rgba(239, 68, 68, 0.12); color: var(--color-revisi); border: 1px solid rgba(239, 68, 68, 0.2); }
.badge-selesai { background: rgba(139, 92, 246, 0.12); color: var(--color-selesai); border: 1px solid rgba(139, 92, 246, 0.2); }
.badge-arsip { background: rgba(100, 116, 139, 0.12); color: var(--color-arsip); border: 1px solid rgba(100, 116, 139, 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); }