/* ============================================================
   LEGACYAFRICA — SHARED THEME SYSTEM
   Same brand palette, light + dark variants. Dark is default.
   ============================================================ */

:root{
  --cream:#F4EFCF;
  --cream-2:#EEEACB;
  --sage:#E1E6C6;
  --forest:#2E4A2E;
  --forest-dark:#1B3320;
  --forest-glow:rgba(46,74,46,0.35);
  --gold:#A69461;
  --ink:#22221D;
  --muted:#767A65;
  --muted-2:#8B8F79;
  --card:#F2EEDA;
  --pill:#E6E8D2;
  --line:rgba(34,34,29,0.09);
  --line-strong:rgba(34,34,29,0.18);
  --radius:16px;
  --shadow-sm:0 2px 14px rgba(34,34,29,0.05);
  --shadow-lg:0 12px 28px rgba(34,34,29,0.09);
  --grain-opacity:0.035;
  --grain-blend:multiply;
  --ease:cubic-bezier(.4,0,.2,1);
  --header-bg:rgba(244,239,207,0.88);
  --filter-bg:rgba(244,239,207,0.92);
}

html[data-theme="dark"]{
  --cream:#0F1410;
  --cream-2:#161C15;
  --sage:#1B2419;
  --forest:#6FCB74;
  --forest-dark:#3E6B41;
  --forest-glow:rgba(111,203,116,0.28);
  --gold:#D8BE7E;
  --ink:#EFEBD8;
  --muted:#A6AC93;
  --muted-2:#82886F;
  --card:#171D15;
  --pill:#1E251B;
  --line:rgba(239,235,216,0.08);
  --line-strong:rgba(239,235,216,0.16);
  --shadow-sm:0 2px 14px rgba(0,0,0,0.28);
  --shadow-lg:0 18px 40px rgba(0,0,0,0.45);
  --grain-opacity:0.05;
  --grain-blend:overlay;
  --header-bg:rgba(15,20,16,0.82);
  --filter-bg:rgba(15,20,16,0.88);
}

/* ---------- smooth link between light & dark ---------- */
html{ color-scheme:light dark; }
body, header, footer, .card, .btn, .pill, section, .page-hero,
.nav-links a, .foot-links-col a, input, textarea, select,
.eyebrow, .cta-band, [class*="badge"], [class*="tag"]{
  transition:background-color .45s var(--ease), color .45s var(--ease),
             border-color .45s var(--ease), box-shadow .45s var(--ease);
}

body::before{ opacity:var(--grain-opacity) !important; mix-blend-mode:var(--grain-blend) !important; transition:opacity .45s var(--ease); }

/* ---------- page load fade ---------- */
/* opacity only — a transform here would create a new containing block
   and break every position:fixed modal/overlay on the site */
body{ animation:pageIn .5s var(--ease) both; }
@keyframes pageIn{
  from{ opacity:0; }
  to{ opacity:1; }
}

/* ---------- scroll reveal ---------- */
.la-reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  will-change:opacity, transform;
}
.la-reveal.la-in{ opacity:1; transform:translateY(0); }

/* ---------- nav polish ---------- */
.nav-links a{ position:relative; }
.nav-links a::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:-6px; height:2px;
  background:var(--forest); border-radius:2px;
  transition:right .3s var(--ease);
}
.nav-links a:hover::after, .nav-links a.active::after{ right:0; }
.logo{ transition:letter-spacing .3s var(--ease), color .3s var(--ease); display:inline-block; }
.logo:hover{ letter-spacing:0.01em; }

/* ---------- button polish ---------- */
.btn{ position:relative; overflow:hidden; }
.btn-primary{ box-shadow:0 4px 16px var(--forest-glow); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 26px var(--forest-glow); }
.btn-ghost:hover{ transform:translateY(-2px); }
.btn:active{ transform:scale(0.97) !important; }

/* ---------- card polish ---------- */
.card{ position:relative; overflow:hidden; }
.card::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(135deg, var(--forest-glow), transparent 60%);
  opacity:0; transition:opacity .35s var(--ease);
  pointer-events:none;
}
.card:hover::before{ opacity:0.5; }
.card:hover{ box-shadow:var(--shadow-lg), 0 0 0 1px var(--forest-glow); }

/* ---------- hero accents ---------- */
.page-hero.photo{ position:relative; }
.eyebrow{ animation:fadeSlide .6s var(--ease) both; }
h1{ animation:fadeSlide .6s var(--ease) .08s both; }
.page-sub{ animation:fadeSlide .6s var(--ease) .16s both; }
@keyframes fadeSlide{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ---------- back to top ---------- */
.back-to-top{ transition:transform .3s var(--ease), background-color .3s var(--ease); }
.back-to-top:hover{ transform:translateY(-4px); background:var(--sage); }

/* ---------- theme toggle switch ---------- */
.theme-toggle{
  width:40px; height:40px; border-radius:10px;
  border:1px solid var(--line-strong);
  background:var(--cream-2);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:1rem;
  color:var(--ink);
  transition:background-color .3s var(--ease), transform .2s var(--ease), border-color .3s var(--ease);
  flex-shrink:0;
  line-height:1;
}
.theme-toggle:hover{ background:var(--sage); transform:translateY(-2px); }
.theme-toggle:active{ transform:scale(0.93); }
.theme-toggle .icon{ display:inline-block; transition:transform .5s var(--ease), opacity .3s var(--ease); }
.theme-toggle .icon-moon{ display:none; }
html[data-theme="dark"] .theme-toggle .icon-sun{ display:none; }
html[data-theme="dark"] .theme-toggle .icon-moon{ display:inline-block; }
.theme-toggle:hover .icon{ transform:rotate(20deg); }

/* ---------- dropdown menu links (burger menu + builder resources + profile menu) ---------- */
#site-menu-dropdown a, #resources-dropdown a, #nav-avatar-menu a, #nav-avatar-menu button{
  transition:background .25s var(--ease), color .25s var(--ease), padding-left .25s var(--ease);
}
#site-menu-dropdown a:hover, #resources-dropdown a:hover, #nav-avatar-menu a:hover, #nav-avatar-menu button:hover{
  background:linear-gradient(90deg, var(--forest-glow), transparent 85%);
  color:var(--forest);
  padding-left:20px;
}

/* ---------- misc micro interactions ---------- */
.foot-social img{ transition:transform .25s var(--ease), filter .25s var(--ease); }
.foot-social img:hover{ transform:translateY(-3px) scale(1.06); filter:brightness(1.1); }

/* ---------- universal button reactivity ----------
   catches every <button> sitewide, even custom/inline-styled ones
   that don't use .btn — specific rules elsewhere still win per-property. */
button{
  cursor:pointer;
  transition:transform .2s var(--ease), filter .2s var(--ease),
             box-shadow .2s var(--ease), background-color .2s var(--ease),
             border-color .2s var(--ease), opacity .2s var(--ease);
}
button:hover:not(:disabled){ transform:translateY(-2px); filter:brightness(1.08); }
button:active:not(:disabled){ transform:translateY(0) scale(0.96); filter:brightness(1); }
button:disabled{ cursor:not-allowed; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--cream); }
::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:var(--muted-2); }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}