/* ============================================================
   Base reset & shared utility classes
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: var(--text-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, figure { margin: 0; }
button { font-family: inherit; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { background: var(--color-secondary-soft); }

/* Focus visibility (brief §32 accessibility) */
:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}
button:focus:not(:focus-visible) { outline: none; }

/* Scrollbar, ringan */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: var(--radius-full); }
::-webkit-scrollbar-track { background: transparent; }

/* --- Typography utility classes --- */
.text-page-title { font: var(--text-page-title); color: var(--color-text); letter-spacing: -0.01em; }
.text-section-title { font: var(--text-section-title); color: var(--color-text); }
.text-card-title { font: var(--text-card-title); color: var(--color-text); }
.text-body { font: var(--text-body); color: var(--color-text); }
.text-body-medium { font: var(--text-body-medium); color: var(--color-text); }
.text-caption { font: var(--text-caption); color: var(--color-text-secondary); }
.text-metadata {
  font: var(--text-metadata); color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.text-muted { color: var(--color-text-muted); }
.text-secondary { color: var(--color-text-secondary); }
.font-mono { font-family: var(--font-mono); }
.tabular-nums { font-variant-numeric: tabular-nums; }

/* --- Layout helpers --- */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); } .gap-6 { gap: var(--space-6); }

.grid { display: grid; gap: var(--space-4); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1200px) { .grid-cols-6 { grid-template-columns: repeat(3, 1fr); } .grid-cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .grid-cols-2, .grid-cols-3, .grid-cols-4, .grid-cols-6 { grid-template-columns: 1fr; } }

.scroll-x { overflow-x: auto; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}