/* ============================================================
   BASE — tokens, reset, typography, utilities
   Nyasuba Golden Pillars · black & gold brand system
============================================================ */

/* ---------- Font: one family, two weights ---------- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700&display=swap');

/* ---------- Design tokens ---------- */
:root {
  /* palette */
  --ink:        #0f0d09;   /* page background */
  --surface:    #1a1712;   /* cards, table rows */
  --surface-2:  #241f16;   /* hover / alt rows */
  --gold:       #d4a53f;   /* headings, accents, primary actions */
  --gold-deep:  #a87f1f;   /* borders, hover states */
  --cream:      #f4eee1;   /* body text */
  --muted:      #a99e8b;   /* captions, fine print */

  /* type */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --step-0: 1rem;        /* body */
  --step-1: 1.25rem;     /* lead / h3 */
  --step-2: 1.6rem;      /* h2 */
  --step-3: 2.1rem;      /* h1 mobile */
  --step-4: 3rem;        /* h1 desktop */

  /* spacing & shape */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.75rem;
  --space-4: 3rem;
  --space-5: 5rem;
  --radius: 10px;
  --radius-sm: 6px;

  /* layout */
  --container: 70rem;       /* page/content max width */
  --content-narrow: 34rem;  /* steps, bank details */
  --header-offset: 5rem;    /* anchor scroll clearance */
  --header-h: 4.75rem;      /* fixed header height, used to offset content */

  /* small type */
  --text-sm: 0.9rem;
  --text-xs: 0.85rem;

  /* aliases used across page stylesheets (were previously undefined) */
  --text-base: 1rem;
  --text-muted: var(--muted);
  --gold-light: #e6c87a;

  /* effects */
  --shadow-lift: 0 6px 18px rgb(0 0 0 / 0.35);
  --scrim-strong: rgb(15 13 9 / 0.72);  /* hero gradient mid */
  --scrim-soft: rgb(15 13 9 / 0.25);    /* hero gradient top */

  /* motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 180ms;
  --t-slow: 600ms;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

input, button, textarea, select { font: inherit; }

button { cursor: pointer; }

/* ---------- Typography ---------- */
h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--gold);
  line-height: 1.15;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 5vw + 1rem, 3rem); font-weight: 700; }
h2 { font-size: clamp(1.35rem, 3.5vw + 0.5rem, 1.6rem); font-weight: 700; }
h3 { font-size: clamp(1.1rem, 2.5vw + 0.5rem, 1.25rem); font-weight: 500; margin-block: var(--space-3) var(--space-2); }


p { margin-block-end: var(--space-2); max-width: 65ch; }

a {
  color: var(--gold);
  text-decoration-color: var(--gold-deep);
  text-underline-offset: 3px;
  transition: color var(--t-fast) var(--ease);
}
a:hover { color: var(--cream); }

strong { color: var(--gold); font-weight: 600; }

address { font-style: normal; line-height: 2; }

::selection { background: var(--gold); color: var(--ink); }

/* ---------- Signature: gold rule that draws under each h2 ---------- */
h2 { padding-block-end: var(--space-1); position: relative; margin-block-end: var(--space-3); }
h2::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 2px; width: 3.5rem;
  background: linear-gradient(90deg, var(--gold), transparent);
  transform-origin: left;
}
.visible h2::after { animation: draw var(--t-slow) var(--ease) both; }

@keyframes draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ---------- Scroll-reveal foundation (JS adds html.js + .visible) ---------- */
html.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
html.js .reveal.visible { opacity: 1; transform: none; }

/* ---------- Focus & accessibility ---------- */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Mobile foundation ---------- */
/* Long URLs, M-Pesa numbers and email addresses must never force sideways scroll. */
body { overflow-x: hidden; }
p, li, dd, dt, td, th, address, figcaption { overflow-wrap: break-word; }

@media (max-width: 40rem) {
  :root {
    /* slightly tighter rhythm on phones so sections don't feel like chasms */
    --space-4: 2.25rem;
    --space-5: 3.5rem;
  }

  /* comfortable thumb targets on touch screens */
  .btn, .nav-toggle, .btn-copy {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ---------- Reduced motion: respect it completely ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html.js .reveal { opacity: 1; transform: none; }
}