/* ==========================================================================
   variables.css — Design Tokens (sumber kebenaran tunggal)
   Ubah nilai di sini untuk mengubah tampilan global seluruh halaman.
   Warna brand default = Biru Korporat (lihat themes.css untuk tema lain).
   ========================================================================== */

:root {
  /* --- Brand / Warna utama (dioverride oleh themes.css) --- */
  --c-primary: #0B4F9C;
  --c-primary-dark: #08386E;
  --c-primary-light: #3A78BF;
  --c-primary-50: #EAF2FB;
  --c-accent: #F2B705;
  --c-accent-dark: #CF9A00;
  --c-on-primary: #FFFFFF;

  /* --- Netral --- */
  --c-white: #FFFFFF;
  --c-bg: #F4F6FA; /* fallback; dioverride per tema di themes.css */
  --c-surface: #FFFFFF;
  --c-surface-alt: #F8FAFC;
  --c-heading: #16202E;
  --c-text: #2A3340;
  --c-text-muted: #5B6675;
  --c-border: #E2E7EE;

  /* --- Status --- */
  --c-success: #1B7A43;
  --c-danger: #C0392B;
  --c-info: #1769AA;

  /* --- Tipografi --- */
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-head: 'Sora', 'Plus Jakarta Sans', sans-serif;

  --fs-xs: 0.75rem;     /* 12 */
  --fs-sm: 0.875rem;    /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-lg: 1.125rem;    /* 18 */
  --fs-xl: 1.375rem;    /* 22 */
  --fs-2xl: 1.75rem;    /* 28 */
  --fs-3xl: 2.25rem;    /* 36 */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.2;
  --lh-base: 1.6;

  /* --- Spacing (skala 4px) --- */
  --space-1: 0.25rem;   /* 4  */
  --space-2: 0.5rem;    /* 8  */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 2.5rem;    /* 40 */
  --space-8: 3rem;      /* 48 */
  --space-10: 4rem;     /* 64 */

  /* --- Radius --- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* --- Shadow (smooth, berlapis untuk kesan semi-3D) --- */
  --shadow-sm: 0 1px 3px rgba(16, 30, 54, 0.08);
  --shadow-md: 0 6px 18px rgba(16, 30, 54, 0.10);
  --shadow-lg: 0 14px 40px rgba(16, 30, 54, 0.16);
  --shadow-soft: 0 2px 6px rgba(16, 30, 54, 0.05), 0 16px 32px -12px rgba(16, 30, 54, 0.18);
  --shadow-soft-hover: 0 4px 10px rgba(16, 30, 54, 0.07), 0 24px 48px -16px rgba(16, 30, 54, 0.26);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --shadow-press: inset 0 2px 6px rgba(16, 30, 54, 0.18);

  /* --- Gradient (otomatis ikut tema via --c-primary/--c-accent) --- */
  --gradient-primary: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-light) 100%);
  --gradient-primary-deep: linear-gradient(160deg, var(--c-primary-dark) 0%, var(--c-primary) 100%);
  --gradient-accent: linear-gradient(135deg, var(--c-accent) 0%, var(--c-accent-dark) 100%);
  --gradient-surface: linear-gradient(160deg, #ffffff 0%, var(--c-primary-50) 130%);
  --gradient-page: linear-gradient(180deg, var(--c-primary-50) 0%, var(--c-bg) 420px);

  /* --- Layout --- */
  --container: 1500px;
  --logo-h: 55px;
  --transition: 0.2s ease;
  --transition-bounce: 0.35s cubic-bezier(.34, 1.56, .64, 1);
  --z-header: 100;
  --z-dropdown: 200;

  /* --- Card Tag --- */
  --card-tag-font: white;
}