/* ============================================================
 * ANYÉ Design Tokens — global CSS
 * Source: code/website-builder/design/ANYE_Design_Tokens_v1.md
 * Locked palette (cool near-white, swapped from cream 2026-04-20).
 * Locked fonts: Fraunces (display) + Plus Jakarta Sans (body).
 * Last updated: 2026-04-23
 * ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,600&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
  /* --- Color (locked WCAG AA/AAA) --- */
  --color-bg: #F6F7F9;                 /* page bg, 16.24:1 vs text */
  --color-text: #1A1A1A;               /* body text, AAA */
  --color-text-muted: #5A5A5A;         /* metadata, 6.44:1 AA */
  --color-accent-narrative: #B33A3A;   /* links + WhatsApp CTA, 5.47:1 AA */
  --color-accent-data: #1E3A5F;        /* charts + methodology, 10.73:1 AAA */
  --color-rule: #DDE1E7;               /* hairlines */
  --color-bg-methodology: #E8ECF2;     /* methodology bg, 14.68:1 text */

  /* --- Type families --- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* --- Type scale (1.25 modular, 18px base) --- */
  --type-display-1: 3.5rem;     /* hero H1 only */
  --type-display-2: 2.75rem;    /* article H1 */
  --type-h2: 2rem;
  --type-h3: 1.5rem;
  --type-h4: 1.25rem;
  --type-lead: 1.25rem;         /* dek + intro */
  --type-body: 1.125rem;        /* article default */
  --type-small: 1rem;           /* UI, metadata */
  --type-micro: 0.875rem;       /* chips, badges */
  --type-pull: 1.75rem;         /* pull-quotes */

  /* --- Spacing (8pt grid) --- */
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-6: 24px; --space-8: 32px;  --space-12: 48px; --space-16: 64px;
  --space-24: 96px; --space-32: 128px;

  /* --- Motion budget (≤150ms) --- */
  --motion-fast: 100ms;
  --motion-standard: 150ms;
  --motion-soft: 250ms;

  /* --- Radius --- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;

  /* --- Measure --- */
  --measure-body: 680px;        /* article column */
  --measure-hero: 920px;        /* hero copy */
  --measure-max: 1200px;        /* container */
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01";
}

a {
  color: var(--color-accent-narrative);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness var(--motion-fast) ease-out;
}
a:hover { text-decoration-thickness: 2px; }

/* Headings — display family by default, body family for H4 (per type scale) */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
h4 {
  font-family: var(--font-body);
  font-weight: 600;
  line-height: 1.35;
}

/* Bahasa long-word safety net */
h1, h2, h3, h4 {
  word-break: break-word;
}

.container {
  max-width: var(--measure-max);
  margin: 0 auto;
  padding: 0 var(--space-8);
}

@media (max-width: 640px) {
  .container { padding: 0 var(--space-4); }
}