/* ==========================================================================
   Glass Pro Suite — Design tokens
   Semua warna, radius, bayangan, jarak, dan tipografi didefinisikan di sini.
   Modul lain (base/components/pages) HANYA memakai variabel ini.

   Palet mengikuti gaya referensi "misso": latar langit cerah, kartu putih
   membulat, aksi utama hitam pekat, aksen kuning/hijau/merah/biru vivid,
   judul besar memakai serif.
   ========================================================================== */
:root {
  /* ---- Tipografi ---- */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 22px;
  --text-3xl: 28px;
  --text-4xl: 34px;
  --leading-tight: 1.2;
  --leading-normal: 1.5;

  /* ---- Warna dasar ---- */
  --color-bg: #EAF3FC;
  --color-surface: #FFFFFF;
  --color-surface-2: #F7F8FA;
  --color-surface-3: #F0F1F4;
  --color-text: #14161B;
  --color-text-2: #3A3F4A;
  --color-muted: #6B7280;
  --color-muted-2: #9CA3AF;
  --color-border: #E8EAEF;
  --color-border-strong: #D6D9E0;

  /* ---- Warna utama (ink hitam, seperti tombol di referensi) ---- */
  --color-primary: #14161B;
  --color-primary-hover: #262A33;
  --color-primary-active: #000000;
  --color-primary-soft: #F1F2F5;
  --color-primary-soft-2: #E5E7EC;
  --color-primary-text: #14161B;
  --color-primary-contrast: #FFFFFF;
  --color-primary-ring: rgba(20, 22, 27, 0.18);

  /* ---- Aksen (badge & kartu berwarna) ---- */
  --color-accent-yellow: #FFC93D;
  --color-accent-yellow-soft: #FFF1C9;
  --color-accent-yellow-text: #7A5600;
  --color-accent-sky: #CDE7FB;
  --color-accent-sky-strong: #A9D6F7;

  /* ---- Panel gelap ---- */
  --color-navy: #14161B;
  --color-navy-2: #23262E;
  --color-navy-3: #2F333D;
  --color-navy-text: #FFFFFF;
  --color-navy-muted: #A5A9B4;
  --color-navy-border: rgba(255, 255, 255, 0.10);

  /* ---- Warna status ---- */
  --color-success: #2FCB6E;
  --color-success-soft: #D9F7E5;
  --color-success-text: #12864A;
  --color-warning: #FFC93D;
  --color-warning-soft: #FFF1C9;
  --color-warning-text: #8A6100;
  --color-danger: #FF3B30;
  --color-danger-soft: #FFE2E0;
  --color-danger-text: #C4241B;
  --color-danger-hover: #E42B20;
  --color-info: #1E7FFF;
  --color-info-soft: #DEECFF;
  --color-info-text: #0B57C9;
  --color-neutral: #6B7280;
  --color-neutral-soft: #F1F2F5;
  --color-neutral-text: #4B5563;

  /* ---- Gradien ---- */
  --gradient-primary: linear-gradient(135deg, #2B2F39 0%, #14161B 100%);
  --gradient-primary-deep: linear-gradient(160deg, #343945 0%, #1A1D24 55%, #0B0C10 100%);
  --gradient-navy: linear-gradient(160deg, #23262E 0%, #14161B 100%);
  --glass-bg: rgba(255, 255, 255, 0.14);
  --glass-bg-hover: rgba(255, 255, 255, 0.22);
  --glass-border: rgba(255, 255, 255, 0.24);

  /* ---- Radius ---- */
  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-2xl: 26px;
  --radius-pill: 999px;

  /* ---- Bayangan (lembut & lebar seperti kartu mengambang di referensi) ---- */
  --shadow-xs: 0 1px 2px rgba(20, 22, 27, 0.05);
  --shadow-sm: 0 2px 8px rgba(20, 40, 70, 0.07);
  --shadow-md: 0 6px 18px rgba(20, 40, 70, 0.09);
  --shadow-card: 0 10px 30px rgba(20, 40, 70, 0.10);
  --shadow-lg: 0 18px 44px rgba(20, 40, 70, 0.16);
  --shadow-xl: 0 28px 64px rgba(20, 40, 70, 0.22);
  --shadow-primary: 0 8px 20px rgba(20, 22, 27, 0.26);
  --shadow-focus: 0 0 0 3px var(--color-primary-ring);

  /* ---- Jarak ---- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;

  /* ---- Layout ---- */
  --topbar-h: 82px; /* 14px jarak atas + pil 58px + 10px bawah — dipakai offset panel lengket */
  --container-max: 1440px;
  --container-pad: 32px;
  --card-pad: 24px;

  /* ---- Gerakan ---- */
  --transition: 150ms ease;
  --transition-slow: 250ms ease;

  /* ---- Layer ---- */
  --z-dropdown: 40;
  --z-topbar: 50;
  --z-modal: 100;
  --z-toast: 200;

  color-scheme: light;
}

@media (max-width: 1279px) {
  :root { --container-pad: 24px; }
}
@media (max-width: 767px) {
  :root { --container-pad: 16px; --card-pad: 16px; --text-3xl: 24px; --text-4xl: 28px; }
}