/* ==========================================================================
   Unlonely — Headspace-inspired design system
   Layered over the base build. Warmth, roundness, friendly geometric type.
   Copy is untouched; only look & feel.
   ========================================================================== */
@import "/fonts/poppins.css";

:root{
  --brand:#ff6e00;          /* keep the warm signature orange */
  --brand-deep:#e85f00;
  --ink:#241c15;            /* warm near-black for headings   */
  --ink-soft:#6f6154;       /* warm taupe body                */
  --cream:#fff9f0;          /* page canvas                    */
  --sand:#f5ead9;
  --sky:#8ecee3;            /* Headspace pastel accents       */
  --butter:#ffd88a;
  --coral:#ff9d7e;
  --sage:#b6d6ad;
  --lav:#c9c2ef;
}

/* ---- Typography: friendly geometric display, clean body ---------------- */
h1,h2,h3,h4,.font-display{
  font-family:'Poppins','Inter',sans-serif !important;
  letter-spacing:-0.021em;
  color:var(--ink);
}
h1{ font-weight:700 !important; letter-spacing:-0.032em; }
h2{ font-weight:700 !important; letter-spacing:-0.028em; }
h3{ font-weight:600 !important; }
header nav a,
a.rounded-lg, button, [type="submit"]{
  font-family:'Poppins','Inter',sans-serif;
  font-weight:600;
}
/* dark sections keep light headings */
.bg-gray-800 h1,.bg-gray-800 h2,.bg-gray-800 h3,
.bg-gray-900 h1,.bg-gray-900 h2,.bg-gray-900 h3,
.text-white h1,.text-white h2,.text-white h3{ color:#fff; }

/* ---- Brand logo (hydration-proof: swap the vector wordmark via CSS) ----- */
a[aria-label="Home"] > svg{ display:none !important; }
a[aria-label="Home"]{ display:inline-flex; align-items:center; gap:11px; text-decoration:none; }
a[aria-label="Home"]::before{
  content:""; width:42px; height:42px; flex:none; border-radius:12px;
  background:url(/_next/static/media/unlonely-logo.png) center/cover no-repeat;
  box-shadow:0 4px 12px -3px rgba(210,120,40,.5), 0 1px 0 rgba(255,255,255,.6) inset;
}
a[aria-label="Home"]::after{
  content:"Unlonely";
  font-family:'Poppins',sans-serif; font-weight:700; font-size:1.55rem;
  letter-spacing:-0.03em; color:var(--ink); line-height:1;
}
/* footer brand mark -> rounded app-icon */
footer img[alt="Unlonely"]{
  border-radius:12px !important;
  box-shadow:0 4px 12px -3px rgba(210,120,40,.45);
}

/* ---- Rounder, pillowy shapes ------------------------------------------- */
.rounded-md{ border-radius:11px !important; }
.rounded-lg{ border-radius:15px !important; }
.rounded-xl{ border-radius:20px !important; }
.rounded-2xl{ border-radius:28px !important; }
.rounded-3xl{ border-radius:34px !important; }
/* CTAs & interactive links become friendly pills */
a.rounded-lg, button.rounded-lg, [type="submit"].rounded-lg{ border-radius:9999px !important; }
a[aria-label="Download on the App Store"]{ border-radius:16px !important; }

/* ---- Warm, soft, orange-tinted shadows --------------------------------- */
.shadow-sm{ box-shadow:0 2px 8px -3px rgba(120,75,30,.20) !important; }
.shadow,
.shadow-md{ box-shadow:0 12px 28px -14px rgba(120,75,30,.28) !important; }
.shadow-lg{ box-shadow:0 20px 44px -18px rgba(120,75,30,.30) !important; }
.shadow-xl{ box-shadow:0 30px 64px -22px rgba(120,75,30,.32) !important; }
.shadow-2xl{ box-shadow:0 40px 80px -28px rgba(120,75,30,.34) !important; }

/* ---- Page canvas + soft organic pastel blobs in the hero --------------- */
body{ background-color:var(--cream); }

main > div:first-of-type{ position:relative; }
main > div:first-of-type::before{
  content:""; position:absolute; pointer-events:none; z-index:0;
  width:600px; height:600px; right:-140px; top:-120px; border-radius:50%;
  background:radial-gradient(circle at 32% 30%, rgba(255,216,138,.60), rgba(255,216,138,0) 68%);
  filter:blur(6px);
}
main > div:first-of-type::after{
  content:""; position:absolute; pointer-events:none; z-index:0;
  width:560px; height:560px; left:-180px; bottom:-120px; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(142,206,227,.50), rgba(142,206,227,0) 70%);
  filter:blur(6px);
}
/* keep hero content above the blobs */
main > div:first-of-type > *{ position:relative; z-index:1; }

/* ---- Trust badges: warmer, softer ------------------------------------- */
.bg-brand-50,.from-brand-100,.to-brand-50{ }

/* smooth everything a touch */
a,button{ transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease; }
a[aria-label="Download on the App Store"]:hover,
a.rounded-lg:hover,button.rounded-lg:hover{ transform:translateY(-1px); }