/*
  Project : BAJ Royal Farm
  Designed & Developed by: Babatunde Adedeji Adelaja
  Year    : 2026
  Version : 1.0.0
*/
/* ==========================================================================
   BAJ ROYAL FARM — Shared Luxury Design System  (baj-theme.css)
   Master visual standard derived from the royal green-and-gold landing page.
   Presentation only. Adds no behaviour, alters no markup, breaks no routes.
   Safe to link into every page:  <link rel="stylesheet" href="baj-theme.css">
   ========================================================================== */

/* ---- 1. Design tokens ---------------------------------------------------- */
:root{
  /* royal greens */
  --bj-green-900:#042417;
  --bj-green-800:#053524;
  --bj-green-700:#063d2a;
  --bj-green-600:#0a5238;
  --bj-green-500:#0c5237;
  /* golds */
  --bj-gold-300:#f3d79a;
  --bj-gold-400:#e0a94a;
  --bj-gold-500:#cf9a34;
  --bj-gold-600:#c8902f;
  /* creams / paper */
  --bj-cream:#f6f0e2;
  --bj-cream2:#ece3cf;
  --bj-paper:#fbf7ec;
  --bj-paper2:#fdfaf0;
  /* ink / muted */
  --bj-ink:#2b2118;
  --bj-soft:#5c6b62;
  --bj-mist:#cfe0d5;
  --bj-mist2:#9fc4b0;
  --bj-sage:#7fa692;
  /* surfaces */
  --bj-line:rgba(224,169,74,.18);
  --bj-line-warm:rgba(214,192,140,.6);
  --bj-maxw:1180px;
  --bj-gold-grad:linear-gradient(100deg,#f3d79a,#cf9a34);
  --bj-green-grad:linear-gradient(150deg,#0a5238,#063d2a);
  --bj-shadow:0 18px 50px -18px rgba(43,33,24,.35);
  --bj-shadow-soft:0 18px 44px -28px rgba(6,61,42,.4);
  --bj-shadow-gold:0 16px 40px -12px rgba(224,169,74,.6);
  --bj-radius:18px;
  --bj-radius-lg:22px;
}

/* ---- 2. Fonts (loaded from Google CDN; pages already preconnect) --------- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..900;1,9..144,400..700&family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* ---- 3. Keyframes -------------------------------------------------------- */
@keyframes bjSpinSlow{to{transform:rotate(360deg)}}
@keyframes bjSpinRev{to{transform:rotate(-360deg)}}
@keyframes bjGlowPulse{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:.9;transform:scale(1.04)}}
@keyframes bjFloatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes bjFloatCard{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes bjRevealUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes bjTwinkle{0%,100%{opacity:.15}50%{opacity:.85}}
@keyframes bjShimmer{0%{background-position:0% 50%}100%{background-position:200% 50%}}

/* ---- 4. Reusable component classes --------------------------------------
   These are OPT-IN classes (prefixed .bj-) so they never collide with or
   override a page's existing selectors. A page only changes if its markup
   uses these classes; linking the sheet alone is inert for legacy markup
   except for the gentle base polish in section 6 below.                    */

.bj-font-display{font-family:'Fraunces',Georgia,serif!important;font-weight:600;letter-spacing:-.01em}
.bj-font-body{font-family:'Poppins',system-ui,sans-serif!important}

.bj-eyebrow{display:inline-block;font:600 12px/1 'Poppins';letter-spacing:.28em;
  color:var(--bj-gold-600);text-transform:uppercase}
.bj-eyebrow--light{color:var(--bj-gold-400)}

.bj-shimmer-text{background:linear-gradient(100deg,#f3d79a,#e0a94a,#c8902f,#f3d79a);
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;
  color:transparent;animation:bjShimmer 6s linear infinite}

/* buttons */
.bj-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font:600 15.5px/1 'Poppins';padding:15px 30px;border-radius:13px;border:none;
  cursor:pointer;text-decoration:none;transition:transform .25s,box-shadow .25s,background .25s}
.bj-btn-gold{color:#3a2400;background:var(--bj-gold-grad);box-shadow:var(--bj-shadow-gold)}
.bj-btn-gold:hover{transform:translateY(-3px);box-shadow:0 22px 48px -14px rgba(224,169,74,.7)}
.bj-btn-green{color:var(--bj-gold-300);background:var(--bj-green-700);
  box-shadow:0 16px 40px -14px rgba(6,40,28,.6)}
.bj-btn-green:hover{transform:translateY(-3px)}
.bj-btn-ghost{color:var(--bj-gold-300);background:rgba(255,255,255,.05);
  border:1px solid rgba(224,169,74,.35)}
.bj-btn-ghost:hover{background:rgba(255,255,255,.1);transform:translateY(-3px)}

/* cards */
.bj-card{background:#fff;border:1px solid var(--bj-cream2);border-radius:var(--bj-radius-lg);
  padding:32px 28px;box-shadow:var(--bj-shadow-soft);
  transition:transform .3s,box-shadow .3s,border-color .3s}
.bj-card:hover{transform:translateY(-8px);box-shadow:0 30px 60px -24px rgba(6,61,42,.45);
  border-color:var(--bj-gold-400)}
.bj-card-ico{width:62px;height:62px;border-radius:17px;background:var(--bj-green-grad);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 24px -10px rgba(6,61,42,.5);color:var(--bj-gold-300)}
.bj-card h3{font:600 22px/1.2 'Fraunces',serif;color:var(--bj-green-700);margin-top:22px}
.bj-card p{font:400 14px/1.65 'Poppins';color:var(--bj-soft);margin-top:11px}

/* sections / surfaces */
.bj-surface-dark{background:var(--bj-green-900);color:var(--bj-cream)}
.bj-surface-paper{background:linear-gradient(180deg,#fbf7ec,#f6f0e2);color:var(--bj-ink)}
.bj-wrap{max-width:var(--bj-maxw);margin:0 auto;padding:0 24px}

/* reveal-on-load helper */
.bj-reveal{animation:bjRevealUp .8s ease both}
.bj-reveal-1{animation:bjRevealUp .9s ease both .1s}
.bj-reveal-2{animation:bjRevealUp 1s ease both .2s}

/* pedigree-ring emblem (signature element) */
.bj-rings{position:relative;width:300px;height:300px;display:flex;align-items:center;justify-content:center}
.bj-rings .r{position:absolute;border-radius:50%}
.bj-rings .r1{width:300px;height:300px;border:1px solid rgba(224,169,74,.18);
  animation:bjGlowPulse 6s ease-in-out infinite;box-shadow:0 0 80px rgba(224,169,74,.18)}
.bj-rings .r2{width:236px;height:236px;border:1px dashed rgba(224,169,74,.35);
  animation:bjSpinSlow 38s linear infinite}
.bj-rings .r3{width:176px;height:176px;border:1px solid rgba(224,169,74,.5);
  animation:bjSpinRev 26s linear infinite}
.bj-rings .glow{width:150px;height:150px;background:radial-gradient(circle,rgba(224,169,74,.22),transparent 70%);
  animation:bjGlowPulse 5s ease-in-out infinite 1s}
.bj-rings img{position:relative;height:150px;width:auto;animation:bjFloatY 6s ease-in-out infinite;
  filter:drop-shadow(0 10px 30px rgba(224,169,74,.45))}

/* ---- 5. Shared brand nav + footer (opt-in via .bj-nav / .bj-footer) ----- */
.bj-nav{position:sticky;top:0;z-index:100;display:flex;align-items:center;
  justify-content:space-between;padding:16px 48px;
  background:rgba(4,36,23,.85);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--bj-line)}
.bj-nav a{text-decoration:none}
.bj-nav .brand{display:flex;align-items:center;gap:12px}
.bj-nav .brand b{font:800 18px/1 'Fraunces',serif;color:var(--bj-gold-300)}
.bj-nav .brand small{display:block;font:italic 500 9px/1 'Fraunces',serif;
  color:var(--bj-sage);margin-top:4px;letter-spacing:.06em}
.bj-nav .links{display:flex;align-items:center;gap:28px}
.bj-nav .links a{font:500 14px/1 'Poppins';color:var(--bj-mist)}
.bj-nav .links a:hover{color:var(--bj-gold-300)}

.bj-footer{background:var(--bj-green-900);color:var(--bj-mist);
  padding:54px 48px 40px;border-top:1px solid var(--bj-line)}
.bj-footer a{color:var(--bj-mist);text-decoration:none}
.bj-footer a:hover{color:var(--bj-gold-300)}

/* ---- 6. Gentle global polish (applies site-wide, non-destructive) -------
   Only smooth scroll + luxury scrollbar + antialiasing. No layout impact.  */
html{scroll-behavior:smooth}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-thumb{background:rgba(224,169,74,.3);border-radius:10px}
::-webkit-scrollbar-track{background:var(--bj-green-900)}

/* ---- 7. Mobile responsiveness for shared components --------------------- */
@media(max-width:860px){
  .bj-nav{padding:14px 20px}
  .bj-nav .links{gap:16px}
  .bj-nav .links a:not(.bj-btn){display:none}
  .bj-footer{padding:40px 20px 32px}
  .bj-rings{width:230px;height:230px}
  .bj-rings .r1{width:230px;height:230px}
  .bj-rings .r2{width:180px;height:180px}
  .bj-rings .r3{width:130px;height:130px}
  .bj-rings img{height:112px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto!important}
}


/* ============================================================
   BAJ a11y — public (light) pages · WCAG-AA contrast hardening
   Presentation only. Scoped to light surfaces to avoid dark hero text.
   ============================================================ */
.bj-card p,.bj-card li,.bj-card .muted{color:#46544c}      /* darker muted ~6:1 on white */
input::placeholder,textarea::placeholder{color:#5a6962;opacity:1}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #b8870f;outline-offset:2px}

/* ============================================================
   REGRESSION GUARD — light-surface tables & cards keep dark text
   ------------------------------------------------------------
   Some pages carry a dark-theme retrofit that forces table/card
   text to ivory (color:#f3efe3 / var(--soft)) assuming a DARK page.
   On the light public pages those tables render on white/cream, so
   the text becomes invisible (e.g. the pricing "ratios" table).
   This shared rule re-asserts dark-on-light text for white tables,
   winning by source order — no per-page override.
   ============================================================ */
table.std{background:#fff!important}
table.std th{background:#063d2a!important;color:#f3d79a!important}
table.std td{color:#173d2a!important;border-color:#e7decd!important}
table.std td:last-child{color:#0a5238!important;font-weight:700}
table.std tr:nth-child(even) td{background:#faf7ef!important}

/* Pricing light surfaces — restore dark-on-light text (dark retrofit forced ivory) */
.tier{background:#fff!important;color:#173d2a!important}
.tier h3,.tier .name,.tier .rc-tier{color:#0a5238!important}
.tier li,.tier p,.tier .tagline,.tier .feat,.tier .sub{color:#3f4a44!important}
.tier .price,.price,.amt,[class*=price]{color:#0a5238!important}
.ratio-cards .rc{background:#fff!important;color:#173d2a!important}
.ratio-cards .rc-tier{color:#0a5238!important}
.ratio-cards .rc-n,.ratio-cards .rc-of,.ratio-cards .rc-note{color:#3f4a44!important}