/* ============================================
   YoobeeCloud — shared styles
   Warm cream base, soft pastel cards, charcoal text.
   One stylesheet powers every page.
   ============================================ */

:root{
  /* base surfaces */
  --bg:#F5F0EB;
  --bg2:#EFEAE3;
  --card:#FEFDFB;

  /* text */
  --txt:#1a1a18;
  --txt2:#8a8780;
  --txt3:#B4B0A7;
  --bdr:#E4DED6;

  /* pastel families: bg / text / mid-tone */
  --pink:#FAD9DD;   --pinkt:#8B2F45;  --pinkm:#F0A0AD;
  --mint:#C9F0DF;   --mintt:#136649;  --mintm:#6FD4A8;
  --lav:#E2DAFA;    --lavt:#473790;   --lavm:#A48BE8;
  --peach:#FADFC8;  --peacht:#8B4418; --peachm:#F0AE78;
  --yellow:#FAEFC6; --yellowt:#8A6D0E;--yellowm:#E8C95C;

  /* cloud brand colours */
  --aws:#FF9900;
  --azure:#0078D4;
  --gcp:#4285F4;

  /* depth */
  --shadow:0 1px 2px rgba(60,50,40,.04),0 8px 24px rgba(60,50,40,.06);
  --shadow-sm:0 1px 2px rgba(60,50,40,.05),0 4px 12px rgba(60,50,40,.05);
  --shadow-lift:0 2px 4px rgba(60,50,40,.06),0 16px 40px rgba(60,50,40,.1);

  --radius:18px;
  --radius-sm:12px;
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg);
  color:var(--txt);
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ---------- NAV ---------- */
.nav{
  background:rgba(254,253,251,.85);
  backdrop-filter:blur(12px);
  display:flex;align-items:center;
  padding:0 28px;height:58px;
  border-bottom:0.5px solid var(--bdr);
  position:sticky;top:0;z-index:50;
}
.logo{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:600;color:var(--txt)}
.logo-mark{
  width:31px;height:31px;background:var(--txt);border-radius:10px;
  display:flex;align-items:center;justify-content:center;color:var(--bg);font-size:14px;
}
.nav-links{display:flex;gap:1px;margin:0 auto;background:var(--bg2);padding:3px;border-radius:22px}
.nl{font-size:12px;color:var(--txt2);padding:7px 14px;border-radius:18px;cursor:pointer;transition:all .15s}
.nl:hover{color:var(--txt)}
.nl.on{color:var(--txt);font-weight:500;background:var(--card);box-shadow:var(--shadow-sm)}
.nav-r{display:flex;gap:8px;align-items:center}
.btn-out{
  display:flex;align-items:center;gap:6px;font-size:12px;color:var(--txt);
  padding:8px 16px;border-radius:20px;border:0.5px solid var(--bdr);
  background:var(--card);cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .15s;
}
.btn-out:hover{transform:translateY(-1px)}
.btn-sol{
  display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--bg);
  background:var(--txt);padding:8px 16px;border-radius:20px;border:none;cursor:pointer;
  box-shadow:0 2px 8px rgba(26,26,24,.2);transition:transform .15s;
}
.btn-sol:hover{transform:translateY(-1px)}

/* ---------- FOOTER ---------- */
.footer{
  background:var(--bg2);border-top:0.5px solid var(--bdr);
  padding:16px 28px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
}
.footer-l{display:flex;flex-direction:column;gap:3px}
.footer-txt{font-size:12px;color:var(--txt3)}
.footer-links{display:flex;gap:20px}
.footer-links a{font-size:12px;color:var(--txt2);cursor:pointer}
.footer-links a:hover{color:var(--txt)}

/* byline + copyright — same line on desktop, wraps on narrow screens */
.footer-credit{font-size:11.5px;color:var(--txt3)}
.footer-credit a{
  color:var(--txt2);font-weight:500;
  border-bottom:0.5px solid var(--bdr);padding-bottom:1px;transition:color .15s,border-color .15s;
}
.footer-credit a:hover{color:var(--pinkt);border-color:var(--pinkm)}

/* compact variant for the app-shell pages (chat, dashboard) that have
   a full-height sidebar instead of a page footer */
.sb-credit{
  margin-top:auto;padding:12px 16px;border-top:0.5px solid var(--bdr);
  font-size:10.5px;color:var(--txt3);line-height:1.55;
}
.sb-credit a{color:var(--txt2);font-weight:500;transition:color .15s}
.sb-credit a:hover{color:var(--pinkt)}

/* ---------- shared pills/badges ---------- */
.pulse{width:6px;height:6px;border-radius:50%;background:currentColor;animation:pulse 1.5s infinite;flex-shrink:0;display:inline-block}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.85)}}

/* ---------- responsive ---------- */
@media(max-width:720px){
  .nav-links{display:none}
  .nav{padding:0 16px}
}

/* ---------- PAGE PURPOSE STRIP ----------
   One line under the nav on every page: what this page is, and what it
   contributes to the wider system. Same component everywhere so the
   whole site reads as one product rather than six separate demos. */
.purpose{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:9px 28px;background:var(--bg2);
  border-bottom:0.5px solid var(--bdr);
  font-size:11.5px;line-height:1.5;color:var(--txt2);
}
.purpose-tag{
  display:inline-flex;align-items:center;gap:5px;flex-shrink:0;
  font-size:10px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;
  padding:3px 9px;border-radius:20px;
  background:var(--card);border:0.5px solid var(--bdr);color:var(--txt);
  box-shadow:var(--shadow-sm);
}
.purpose-tag i{font-size:12px}
.purpose b{color:var(--txt);font-weight:500}
.purpose code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;
  background:var(--card);border:0.5px solid var(--bdr);border-radius:5px;padding:1px 5px;color:var(--txt);
}
/* colour-codes the strip by which cloud the page actually touches */
.purpose.aws .purpose-tag{background:var(--peach);border-color:var(--peachm);color:var(--peacht)}
.purpose.multi .purpose-tag{background:var(--mint);border-color:var(--mintm);color:var(--mintt)}
.purpose.static .purpose-tag{background:var(--yellow);border-color:var(--yellowm);color:var(--yellowt)}
@media(max-width:720px){ .purpose{padding:9px 16px;font-size:11px} }