/* ==========================================================================
   AFRIKAN ACCENT ADVENTURES — DESIGN SYSTEM
   Tokens, resets, typography, buttons, utilities. Source of truth:
   design/DESIGN-SYSTEM.md + design/*.html mockups. Prefix: aaa-
   ========================================================================== */

:root{
  /* Brand colour (client's preferred blue, built into a premium system) */
  --aaa-blue:#1781FE;
  --aaa-blue-deep:#0B5BD3;
  --aaa-blue-ink:#0A3D8F;
  --aaa-navy:#07203F;
  --aaa-navy-2:#0E2C52;
  --aaa-sky:#E8F1FE;
  --aaa-gold:#F4A93C;
  --aaa-gold-deep:#D2861A;
  --aaa-ink:#0B1B2E;
  --aaa-ink-soft:#46586E;
  --aaa-paper:#FFFFFF;
  --aaa-mist:#F2F7FD;
  --aaa-sand:#FBF6EC;
  --aaa-line:rgba(11,27,46,.11);
  --aaa-green:#2f9e6a;

  --aaa-shadow:0 24px 60px -22px rgba(7,32,63,.42);
  --aaa-shadow-sm:0 10px 28px -14px rgba(7,32,63,.35);
  --aaa-radius:16px;
  --aaa-maxw:1280px;

  --aaa-serif:'Fraunces',Georgia,serif;
  --aaa-sans:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--aaa-sans);color:var(--aaa-ink);background:var(--aaa-paper);font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

/* ── TYPOGRAPHY ── */
h1,h2,h3,h4{font-family:var(--aaa-serif);font-weight:700;line-height:1.12;letter-spacing:-.015em;color:var(--aaa-ink);margin:0 0 .4em}
.aaa-accent{font-style:italic;color:var(--aaa-blue)}
.aaa-lead{font-size:1.22rem;color:var(--aaa-ink-soft);line-height:1.6}

/* ── ETROW / KICKER ── */
.aaa-eyebrow{font-size:.82rem;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--aaa-blue);display:inline-block}
.aaa-eyebrow--gold{color:var(--aaa-gold)}

/* ── BUTTONS ── */
.aaa-btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;font-family:var(--aaa-sans);font-weight:700;font-size:1.02rem;letter-spacing:.01em;padding:1.05em 2.1em;border-radius:50px;border:2px solid transparent;transition:.25s ease;cursor:pointer;white-space:nowrap;text-decoration:none}
.aaa-btn--primary{background:var(--aaa-blue);color:#fff;box-shadow:0 14px 30px -12px rgba(23,129,254,.75)}
.aaa-btn--primary:hover{background:var(--aaa-blue-deep);transform:translateY(-2px);color:#fff}
.aaa-btn--gold{background:var(--aaa-gold);color:var(--aaa-navy)}
.aaa-btn--gold:hover{background:#ffba55;transform:translateY(-2px)}
.aaa-btn--ghost{border-color:rgba(255,255,255,.6);color:#fff}
.aaa-btn--ghost:hover{background:#fff;color:var(--aaa-navy)}
.aaa-btn--navy{background:var(--aaa-navy);color:#fff}
.aaa-btn--navy:hover{background:var(--aaa-navy-2);transform:translateY(-2px)}
.aaa-btn--outline{border-color:var(--aaa-blue);color:var(--aaa-blue);background:transparent}
.aaa-btn--outline:hover{background:var(--aaa-blue);color:#fff}
.aaa-btn--wa{background:#25d366;color:#fff}
.aaa-btn--lg{font-size:1.1rem;padding:1.15em 2.4em}

/* ── LAYOUT UTILITIES ── */
.aaa-container{max-width:var(--aaa-maxw);margin:0 auto;padding:0 30px}
.aaa-section{padding:96px 0}
.aaa-center{text-align:center}
.aaa-sec-head{max-width:680px;margin:0 auto 48px}
.aaa-sec-head.aaa-center{text-align:center}
.aaa-sec-head h2{font-size:clamp(2.2rem,4vw,3.3rem);margin-top:12px}

/* ── SCROLL REVEAL (paired with animations.js) ── */
.aaa-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.aaa-reveal.is-in{opacity:1;transform:none}

/* ── CARD ── */
.aaa-card{background:var(--aaa-paper);border:1px solid var(--aaa-line);border-radius:var(--aaa-radius);overflow:hidden;transition:.3s}
.aaa-card:hover{transform:translateY(-7px);box-shadow:var(--aaa-shadow)}
.aaa-card img{transition:.6s}
.aaa-card:hover img{transform:scale(1.08)}

@media(max-width:768px){
  .aaa-section{padding:64px 0}
  .aaa-container{padding:0 20px}
}