/*
 * Ajak.my — shared design tokens
 * Single source of truth for brand color / font / radius across
 * index.php, daftar.php, and portal/app.php. Plain CSS custom
 * properties so it works identically under compiled Tailwind
 * (root pages) and Tailwind CDN JIT (portal) with no build step.
 */

:root {
  --ajak-ink: #101820;
  --ajak-muted: #5f6b76;
  --ajak-line: #d9dee3;
  --ajak-surface: #f7f8f6;
  --ajak-panel: #ffffff;
  --ajak-brand: #128c5a;
  --ajak-brand-dark: #0d6f47;
  --ajak-navy: #14213d;
  --ajak-whatsapp: #25D366;
  --ajak-radius-rounded: 18px;
  --ajak-radius-box: 10px;
  --ajak-radius-pill: 999px;
}

/* ── Marketing-site component classes (moved here from index.php) ── */
.ajak-btn-primary { background:var(--ajak-brand); color:#fff; border:1px solid var(--ajak-brand); border-radius:var(--ajak-radius-pill); box-shadow:0 1px 2px rgba(16,24,32,.08); }
.ajak-btn-primary:hover { background:var(--ajak-brand-dark); border-color:var(--ajak-brand-dark); }
.ajak-btn-dark { background:var(--ajak-ink); color:#fff; border:1px solid var(--ajak-ink); border-radius:var(--ajak-radius-pill); box-shadow:0 1px 2px rgba(16,24,32,.12); }
.ajak-btn-dark:hover { background:#05080c; border-color:#05080c; }
.ajak-btn-secondary { background:#fff; color:#1f2937; border:1px solid var(--ajak-line); border-radius:var(--ajak-radius-pill); }
.ajak-btn-secondary:hover { border-color:#9aa4af; color:#111827; }
.ajak-card { background:#fff; border:1px solid var(--ajak-line); border-radius:var(--ajak-radius-rounded); box-shadow:0 1px 2px rgba(16,24,32,.04); }
.ajak-card-strong { background:#fff; border:1px solid #cdd5dd; border-radius:var(--ajak-radius-rounded); box-shadow:0 16px 40px rgba(16,24,32,.08); }

/* ── Portal aliases — same class names portal/app.php already uses,
   redefined against the shared tokens so no markup rename is needed ── */
.card { background:#fff; border-radius:var(--ajak-radius-rounded); border:1px solid #e3e7ef; padding:24px; }
.btn-primary { background:var(--ajak-brand); border-radius:var(--ajak-radius-pill); }
.btn-primary:hover { background:var(--ajak-brand-dark); }
.btn-secondary { border-radius:var(--ajak-radius-pill); }
.btn-danger { border-radius:var(--ajak-radius-pill); }
.field { border-radius:var(--ajak-radius-box); }
.field:focus { border-color:var(--ajak-brand); box-shadow:0 0 0 3px rgba(18,140,90,.1); }