/* ================================================================
   RFC MAIN.CSS — Tokens · Reset · Typography · Utilities
   ================================================================ */

/* ---------- DESIGN TOKENS ---------- */
:root {
  /* Brand palette — sampled from RFC logo */
  --p:    #4A1560;   /* purple dark  */
  --pm:   #7B2D8B;   /* purple mid   */
  --r:    #C0392B;   /* red          */
  --g:    #C9972A;   /* gold         */
  --cr:   #FAF7F2;   /* cream bg     */
  --ink:  #1A1008;   /* near-black   */
  --mu:   #6B5E52;   /* muted text   */
  --bd:   rgba(74,21,96,0.13); /* border */
  --wh:   #ffffff;

  /* Typography */
  --fd: 'Cormorant Garamond', serif;
  --fb: 'DM Sans', sans-serif;

  /* Layout */
  --nav-top-h:  44px;
  --nav-main-h: 84px;
  --nav-h:      calc(var(--nav-top-h) + var(--nav-main-h));
  --mw:         1200px;
  --sp:         80px 5vw;

  /* Radii */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-pill: 100px;

  /* Shadows */
  --sh-card:  0 4px 24px rgba(74,21,96,0.08);
  --sh-hover: 0 12px 40px rgba(74,21,96,0.14);
  --sh-nav:   0 2px 20px rgba(74,21,96,0.09);

  /* Motion */
  --ease: 0.22s ease;
}

/* ---------- RESET ---------- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family: var(--fb);
  background: var(--cr);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='none' stroke='%234A1560' stroke-width='2'%3E%3Cpath d='M70 0L140 70L70 140L0 70Z'/%3E%3Cpath d='M70 30L110 70L70 110L30 70Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:140px;
  background-repeat:repeat;
  background-attachment:fixed;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.7;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position:relative;
}
body::before {
  content:'';
  position:fixed;
  inset:0;
  background:var(--cr);
  opacity:.98;
  pointer-events:none;
  z-index:0;
}
main { flex:1; padding-top: var(--nav-h); position:relative; z-index:1; }
img  { max-width:100%; display:block; }
a    { color:inherit; text-decoration:none; }
button,input,select,textarea { font-family:var(--fb); font-size:inherit; }
ul,ol { list-style:none; }

/* ---------- TYPOGRAPHY ---------- */
h1,h2,h3,h4,h5 {
  font-family: var(--fd);
  font-weight: 600;
  line-height: 1.1;
  color: var(--p);
}
h1 { font-size: clamp(40px, 7vw, 76px); }
h2 { font-size: clamp(28px, 4.5vw, 48px); margin-bottom: 16px; }
h3 { font-size: clamp(18px, 2.5vw, 24px); }
h4 { font-size: 18px; }
h1 em, h2 em, h3 em { font-style:italic; color:var(--pm); }
p  { color:var(--mu); line-height:1.75; }

/* ---------- CONTAINER ---------- */
.wrap { max-width:var(--mw); margin:0 auto; padding:0 5vw; }

/* ---------- SECTIONS ---------- */
.sec       { padding: var(--sp); }
.sec-white { background: var(--wh); }
.sec-cream { background: var(--cr); }
.sec-purple { background: var(--p); }
.sec-ink    { background: var(--ink); }

/* ---------- KENTE DIVIDER ---------- */
.kente {
  height: 5px; width: 100%;
  background: repeating-linear-gradient(
    90deg,
    var(--p)  0,  var(--p)  20px,
    var(--r) 20px, var(--r) 40px,
    var(--g) 40px, var(--g) 60px,
    var(--pm) 60px, var(--pm) 80px
  );
  opacity: .65;
}

/* kente strip background (used in headers / hero) */
.kente-bg {
  background: repeating-linear-gradient(
    135deg,
    var(--p)  0,  var(--p)  8px,
    var(--pm) 8px, var(--pm) 16px,
    var(--r) 16px, var(--r) 24px,
    var(--g) 24px, var(--g) 32px
  );
}

/* ---------- SECTION LABEL ---------- */
.slabel {
  display: block;
  font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--g);
  font-weight: 500; margin-bottom: 10px;
}

/* ---------- PULSE DOT ---------- */
.dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%; background: var(--r);
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ---------- SKELETON ---------- */
.sk {
  background: linear-gradient(90deg,#e8e0d8 25%,#f0e8e0 50%,#e8e0d8 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--r-sm);
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ---------- TOAST ---------- */
.toast {
  position: fixed; bottom:24px; right:24px; z-index:9999;
  background: var(--ink); color:#fff;
  padding:13px 18px; border-radius:var(--r-md);
  font-size:13px; max-width:320px;
  border-left:3px solid var(--g);
  transform:translateY(100px); opacity:0;
  transition:all .3s ease; pointer-events:none;
}
.toast.show   { transform:translateY(0); opacity:1; pointer-events:auto; }
.toast.ok     { border-left-color:#2ecc71; }
.toast.err    { border-left-color:var(--r); }

/* ---------- PAGE ENTER ---------- */
.pg-enter { animation: pgin .35s ease forwards; }
@keyframes pgin { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }

/* ---------- STATES ---------- */
.state-empty,.state-error { text-align:center; padding:60px 20px; color:var(--mu); }
.state-empty .ico,.state-error .ico { font-size:44px; display:block; margin-bottom:14px; opacity:.4; }

/* ---------- UTILS ---------- */
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.text-gold   { color:var(--g); }
.text-purple { color:var(--p); }
.text-muted  { color:var(--mu); }
.text-white  { color:#fff; }
.text-center { text-align:center; }
.mt-8{margin-top:8px} .mt-16{margin-top:16px} .mt-24{margin-top:24px}
.mt-32{margin-top:32px} .mt-40{margin-top:40px} .mt-48{margin-top:48px}
.mb-8{margin-bottom:8px} .mb-16{margin-bottom:16px} .mb-24{margin-bottom:24px}
.mb-32{margin-bottom:32px} .gap-10{gap:10px} .gap-16{gap:16px}
.flex{display:flex} .flex-wrap{flex-wrap:wrap} .items-center{align-items:center}
.justify-center{justify-content:center}

/* ---------- RESPONSIVE ---------- */
@media(max-width:768px){
  :root{ --sp:60px 5vw; }
  h1{ font-size:clamp(32px,10vw,52px); }
}