/* Dompet QU — tipografi sistem (Plus Jakarta Sans)
   Skala efisien: terbaca, tidak membengkak, rapi di UI & konten */

:root {
  --dq-font-sans: "Plus Jakarta Sans", system-ui, sans-serif;
  --dq-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Skala tipografi — UI-first, hemat ruang */
  --dq-text-2xs: 0.625rem;    /* 10 — badge / meta padat */
  --dq-text-xs: 0.6875rem;    /* 11 — eyebrow, caption */
  --dq-text-sm: 0.75rem;      /* 12 — helper, sub */
  --dq-text-base: 0.8125rem;  /* 13 — body UI default */
  --dq-text-md: 0.875rem;     /* 14 — input, nav, isi */
  --dq-text-lg: 0.9375rem;    /* 15 — judul kartu / KPI */
  --dq-text-xl: 1.0625rem;    /* 17 — judul halaman */
  --dq-text-2xl: clamp(1.125rem, 1.8vw, 1.35rem);
  --dq-text-3xl: clamp(1.25rem, 2.4vw, 1.65rem);
  --dq-text-4xl: clamp(1.5rem, 3.6vw, 2.25rem);
  --dq-text-display: clamp(1.85rem, 5.5vw, 3.25rem);

  --dq-leading-tight: 1.2;
  --dq-leading-snug: 1.35;
  --dq-leading-normal: 1.5;
  --dq-leading-relaxed: 1.6;

  --dq-tracking-tight: -0.02em;
  --dq-tracking-display: -0.03em;
  --dq-tracking-wide: 0.08em;

  --dq-weight-normal: 500;
  --dq-weight-semibold: 650;
  --dq-weight-bold: 750;
  --dq-weight-black: 800;
}

html {
  font-family: var(--dq-font-sans);
  font-size: 100%;
  line-height: var(--dq-leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-size-adjust: 0.52;
}

/* Portal app/admin/auth: sedikit lebih padat dari landing pemasaran */
html[data-portal="admin"],
html[data-portal="user"],
html[data-portal="auth"] {
  font-size: 93.75%; /* ~15px root → rem lebih efisien */
}

body {
  font-family: var(--dq-font-sans);
  font-size: var(--dq-text-md);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: var(--dq-leading-normal);
  color: #0f172a;
}

h1, h2, h3, h4, h5, h6,
.dq-display,
.lp-display {
  font-family: var(--dq-font-sans);
  font-weight: var(--dq-weight-black);
  letter-spacing: var(--dq-tracking-tight);
  line-height: var(--dq-leading-tight);
  text-wrap: balance;
}

h1 { font-size: var(--dq-text-2xl); }
h2 { font-size: var(--dq-text-xl); }
h3 { font-size: var(--dq-text-lg); }
h4 { font-size: var(--dq-text-md); }
h5, h6 { font-size: var(--dq-text-base); }

p, li, label, input, textarea, select, button {
  font-family: inherit;
}

p {
  font-size: inherit;
  line-height: var(--dq-leading-normal);
}

small, .dq-caption {
  font-size: var(--dq-text-sm);
  line-height: var(--dq-leading-snug);
}

code, kbd, pre, .dq-mono {
  font-family: var(--dq-font-mono);
  font-size: 0.9em;
  letter-spacing: 0;
}

/* Utilitas tipografi */
.dq-text-2xs { font-size: var(--dq-text-2xs); }
.dq-text-xs { font-size: var(--dq-text-xs); }
.dq-text-sm { font-size: var(--dq-text-sm); }
.dq-text-base { font-size: var(--dq-text-base); }
.dq-text-md { font-size: var(--dq-text-md); }
.dq-text-lg { font-size: var(--dq-text-lg); }
.dq-text-xl { font-size: var(--dq-text-xl); }

.dq-muted {
  color: #64748b;
  font-size: var(--dq-text-sm);
  font-weight: 500;
  line-height: var(--dq-leading-snug);
}

/* Landing: root penuh agar hero tetap punya ruang ekspresif, tapi skala tetap dikendalikan token */
html[data-portal="landing"] {
  font-size: 100%;
}

html[data-portal="landing"] body {
  font-size: var(--dq-text-md);
}