/* ============ VARIABLES (selaras dengan smartlapak.id) ============ */
:root {
  /* Background & surface */
  --bg: #FAFAF7;
  --bg-warm: #F7F1FF;             /* soft purple bg, sama seperti header smartlapak */
  --bg-soft: #F5F3ED;
  --surface: #ffffff;

  /* Text */
  --ink: #1F1640;                 /* dark purple/ink, sama seperti --text di smartlapak */
  --ink-soft: #4A4458;
  --ink-mute: #8A8595;

  /* Lines */
  --line: #E7E4DC;
  --line-strong: #D8D2C6;

  /* === Brand colors selaras Smartlapak === */
  --purple: #6B46C1;              /* primary purple smartlapak */
  --purple-deep: #553C9A;
  --purple-light: #A78BFA;
  --purple-bg: #F7F1FF;           /* purple sangat soft, untuk badge & header */
  --purple-bg-2: #EEE6FF;

  --gold: #F6AD55;                /* gold accent smartlapak */
  --gold-deep: #D88932;
  --gold-soft: rgba(246, 173, 85, .14);

  /* Alias supaya komponen lama yang pakai --accent tetap jalan */
  --accent: var(--purple);
  --accent-2: var(--gold);

  /* Gradient: purple → gold (gantikan pink → orange → purple) */
  --gradient: linear-gradient(135deg, #6B46C1 0%, #8B6BD8 45%, #F6AD55 100%);
  --gradient-soft: linear-gradient(135deg, rgba(107, 70, 193, .10) 0%, rgba(246, 173, 85, .10) 100%);

  /* WhatsApp tetap dipertahankan untuk sticky WA & ikon kontak */
  --wa: #25D366;
  --wa-dark: #1ebe5a;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(31, 22, 64, .04), 0 1px 3px rgba(31, 22, 64, .06);
  --shadow-md: 0 4px 6px rgba(31, 22, 64, .04), 0 10px 25px rgba(31, 22, 64, .08);
  --shadow-lg: 0 20px 40px rgba(31, 22, 64, .12), 0 8px 16px rgba(31, 22, 64, .06);
  --shadow-accent: 0 12px 40px rgba(107, 70, 193, .25);

  /* Radius */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-xl: 28px;

  /* Font */
  --display: "Bricolage Grotesque", "Plus Jakarta Sans", system-ui, sans-serif;
  --body: "Plus Jakarta Sans", system-ui, sans-serif;
}