/* ARAYA Nikah design tokens — extracted from founder design "Araya Homepage v2" (2026-07-11).
   The ONLY place colors/fonts/spacing are defined. */
:root {
  --an-maroon: #5e1b26;        /* primary brand */
  --an-maroon-deep: #421218;
  --an-maroon-ink: #2e0d12;
  --an-gold: #c6a15b;          /* accent */
  --an-gold-strong: #b08347;
  --an-gold-bright: #d9b876;
  --an-sand: #e8d5b8;
  --an-cream: #faf6f1;         /* page surface */
  --an-cream-card: #fffdfb;
  --an-cream-tint: #f3eae0;
  --an-ink: #2a2024;           /* body text */
  --an-ink-soft: #4a3a3e;
  --an-ink-muted: #6e5a5e;
  --an-taupe: #8a6a54;
  --an-font-display: 'Marcellus', 'Noto Serif Thai', serif;
  --an-font-body: 'Anuphan', sans-serif;
  --an-maxw: 1200px;
  --an-radius-card: 20px;
  --an-radius-pill: 999px;

  /* ── ONE type scale (display headings) — every heading role references these, no ad-hoc clamps ── */
  --an-h1: clamp(34px, 5.2vw, 56px);   /* hero / page title */
  --an-h2: clamp(26px, 3.4vw, 40px);   /* section title */
  --an-h3: clamp(21px, 2.6vw, 27px);   /* card / sub title */
  --an-h4: clamp(19px, 2vw, 22px);
  --an-card-title: 24px;               /* ALL card titles (paths/services/certs/salamxp/inner) */
  --an-kicker: 12.5px;                 /* uppercase gold label */

  /* ── button scale (one system for CTAs) ── */
  --an-btn-pad: 14px 26px;
  --an-btn-font: 15.5px;

  /* ── motion / focus ── */
  --an-transition: .2s ease;
  --an-focus: 2px solid var(--an-gold-strong);
}

/* keyboard focus ring — same across every interactive element (was missing entirely) */
.an-page a:focus-visible, .an-page button:focus-visible, .an-page [tabindex]:focus-visible {
  outline: var(--an-focus); outline-offset: 3px; border-radius: 4px;
}