@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Caveat:wght@400;600;700&display=swap');

:root {
  --jade-teal: #3D9E8C;
  --jade-teal-strong: #348878;
  --coral: #E07B6A;
  --amber: #F0B429;
  --deep-navy: #1C2744;
  --off-white: #F5F5F2;
  --white: #FFFFFF;
  --text-dark: #2D3748;
  --text-light: #6B7280;
  --border-light: #E5E7EB;
  --surface-strong: #FFFFFF;
  --surface-soft: #FBFBF8;
  --primary-gradient: linear-gradient(135deg, #3D9E8C, #4CB8A6);
  --accent-gradient: linear-gradient(135deg, #E07B6A, #F0B429);
  --shadow-sm: 0 2px 8px rgba(28, 39, 68, .08);
  --shadow-md: 0 8px 20px rgba(28, 39, 68, .12);
  --shadow-lg: 0 15px 35px rgba(28, 39, 68, .18);
}

html,
body {
  background: var(--off-white) !important;
  color: var(--text-dark) !important;
  font-family: 'Poppins', sans-serif !important;
}

body {
  min-height: 100vh;
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-garamond,
.font-display-lg,
.font-display-lg-mobile,
.font-headline-md,
.font-headline-sm,
.font-label-caps,
.font-body-md,
.font-body-lg,
.font-sans-body {
  font-family: 'Poppins', sans-serif !important;
}

.script,
.font-script {
  font-family: 'Caveat', cursive !important;
  color: var(--amber) !important;
}

.material-symbols-outlined {
  color: var(--jade-teal) !important;
}

.logo-mark .material-symbols-outlined,
.step-circle .material-symbols-outlined,
.btn .material-symbols-outlined {
  color: var(--white) !important;
}

a {
  color: var(--jade-teal) !important;
}

a:hover {
  color: var(--jade-teal-strong) !important;
}

:focus-visible {
  outline: 2px solid var(--amber) !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}

/* Tailwind semantic colors, including opacity and variant forms. */
[class*="bg-wisdom-gold"] { background-color: var(--jade-teal) !important; }
[class*="text-wisdom-gold"] { color: var(--jade-teal) !important; }
[class*="border-wisdom-gold"] { border-color: var(--jade-teal) !important; }
[class*="hover:bg-wisdom-gold"]:hover { background-color: var(--jade-teal) !important; }
[class*="hover:text-wisdom-gold"]:hover { color: var(--jade-teal) !important; }
[class*="hover:border-wisdom-gold"]:hover { border-color: var(--jade-teal) !important; }
button[class*="bg-wisdom-gold"],
a[class*="bg-wisdom-gold"] {
  color: var(--white) !important;
}
button[class*="bg-wisdom-gold"] .material-symbols-outlined,
a[class*="bg-wisdom-gold"] .material-symbols-outlined {
  color: var(--white) !important;
}
[class*="bg-primary"] { background-color: var(--coral) !important; }
[class*="text-primary"] { color: var(--coral) !important; }
[class*="border-primary"] { border-color: var(--coral) !important; }
[class*="hover:bg-primary"]:hover { background-color: var(--coral) !important; }
[class*="hover:text-primary"]:hover { color: var(--coral) !important; }
[class*="hover:border-primary"]:hover { border-color: var(--coral) !important; }
[class*="bg-secondary"] { background-color: var(--amber) !important; }
[class*="text-secondary"] { color: var(--amber) !important; }
[class*="border-secondary"] { border-color: var(--amber) !important; }
[class*="hover:bg-secondary"]:hover { background-color: var(--amber) !important; }
[class*="hover:text-secondary"]:hover { color: var(--amber) !important; }
[class*="hover:border-secondary"]:hover { border-color: var(--amber) !important; }
[class*="bg-healing-blush"] { background-color: var(--off-white) !important; }
[class*="text-healing-blush"] { color: var(--off-white) !important; }
[class*="border-healing-blush"] { border-color: var(--off-white) !important; }
[class*="bg-soft-linen"] { background-color: var(--off-white) !important; }
[class*="text-soft-linen"] { color: var(--off-white) !important; }
[class*="border-soft-linen"] { border-color: var(--off-white) !important; }
[class*="bg-charcoal-ink"] { background-color: var(--deep-navy) !important; }
[class*="text-charcoal-ink"] { color: var(--deep-navy) !important; }
[class*="border-charcoal-ink"] { border-color: var(--deep-navy) !important; }
[class*="bg-surface"] { background-color: var(--off-white) !important; }
[class*="text-surface"] { color: var(--text-dark) !important; }
[class*="border-surface"] { border-color: var(--border-light) !important; }
[class*="bg-background"] { background-color: var(--off-white) !important; }
[class*="text-on-background"] { color: var(--deep-navy) !important; }
[class*="text-on-surface"] { color: var(--deep-navy) !important; }
[class*="text-on-surface-variant"] { color: var(--text-light) !important; }
[class*="border-on-surface-variant"] { border-color: var(--border-light) !important; }
[class*="bg-surface-container-lowest"],
[class*="bg-surface-container-low"],
[class*="bg-surface-container"],
[class*="bg-surface-container-high"],
[class*="bg-surface-container-highest"],
[class*="bg-surface-bright"],
[class*="bg-surface-dim"] {
  background-color: var(--surface-strong) !important;
}
[class*="border-outline"],
[class*="border-outline-variant"] {
  border-color: var(--border-light) !important;
}
[class*="text-outline"],
[class*="text-outline-variant"] {
  color: var(--text-light) !important;
}
[class*="bg-on-primary"] { background-color: var(--white) !important; }
[class*="text-on-primary"] { color: var(--white) !important; }
[class*="bg-on-secondary"] { background-color: var(--white) !important; }
[class*="text-on-secondary"] { color: var(--white) !important; }
[class*="text-on-secondary-container"],
[class*="text-on-secondary-fixed"],
[class*="text-on-secondary-fixed-variant"],
[class*="text-on-tertiary-container"],
[class*="text-on-tertiary-fixed"],
[class*="text-on-tertiary-fixed-variant"] {
  color: var(--deep-navy) !important;
}
[class*="bg-primary-container"],
[class*="bg-primary-fixed"],
[class*="bg-primary-fixed-dim"] {
  background-color: rgba(224, 123, 106, .12) !important;
}
[class*="bg-secondary-container"],
[class*="bg-secondary-fixed"],
[class*="bg-secondary-fixed-dim"] {
  background-color: rgba(240, 180, 41, .14) !important;
}

/* Common component patterns */
#main-nav,
nav#main-nav {
  background: rgba(245, 245, 242, .95) !important;
  backdrop-filter: blur(20px);
  border-color: rgba(61, 158, 140, .12) !important;
}

.nav-link {
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 1.5px;
  bottom: -3px;
  left: 0;
  background-color: var(--jade-teal);
  transition: width .3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

.shimmer-btn,
.join-btn,
.btn-primary,
.whatsapp-btn {
  position: relative;
  overflow: hidden;
}

.shimmer-btn::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(to bottom right, rgba(255,255,255,0) 0%, rgba(255,255,255,.2) 50%, rgba(255,255,255,0) 100%);
  transform: rotate(45deg);
  transition: all .5s;
  opacity: 0;
}

.shimmer-btn:hover::after {
  left: 100%;
  top: 100%;
  opacity: 1;
  transition: all .8s;
}

.card,
.page-card,
.stat-card,
.edit-form,
.item-card,
.modal,
.faq-item,
.join-card,
.resource-card,
.testimonial-card {
  background: var(--surface-strong) !important;
  border: 1px solid rgba(61, 158, 140, .08) !important;
  border-radius: 1rem !important;
  box-shadow: var(--shadow-sm) !important;
}

.testimonial-card {
  background: var(--deep-navy) !important;
  color: var(--white) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

.testimonial-card .material-symbols-outlined {
  color: var(--amber) !important;
}

.testimonial-card .font-bold,
.testimonial-card .text-xs,
.testimonial-card p {
  color: var(--white) !important;
}

.card:hover,
.page-card:hover,
.resource-card:hover,
.join-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md) !important;
}

.section-heading,
.eyebrow {
  color: var(--coral) !important;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: .8rem;
  font-weight: 700;
}

.icon,
.icon-box,
.page-card-icon,
.edit-form-icon,
.stat-icon {
  color: var(--jade-teal) !important;
}

.icon-box,
.page-card-icon,
.edit-form-icon,
.stat-icon {
  background: rgba(61, 158, 140, .1) !important;
}

.btn-secondary {
  background: transparent !important;
  border: 2px solid var(--coral) !important;
  color: var(--coral) !important;
}

.btn-secondary:hover {
  background: var(--coral) !important;
  color: var(--white) !important;
}

.btn,
button,
input[type="submit"] {
  font-family: 'Poppins', sans-serif !important;
}

.btn {
  background: var(--jade-teal) !important;
  color: var(--white) !important;
}

.btn:hover {
  background: var(--jade-teal-strong) !important;
}

.btn-primary,
.join-btn,
.whatsapp-btn {
  background: var(--jade-teal) !important;
  color: var(--white) !important;
}

.btn-primary:hover,
.join-btn:hover,
.whatsapp-btn:hover {
  background: var(--jade-teal-strong) !important;
}

.whatsapp-btn {
  font-weight: 700 !important;
  border-radius: 9999px !important;
}

footer,
.dark-section,
.footer-dark {
  background: var(--deep-navy) !important;
  color: var(--white) !important;
}

footer a,
.dark-section a,
.footer-dark a {
  color: rgba(255,255,255,.82) !important;
}

footer a:hover,
.dark-section a:hover,
.footer-dark a:hover {
  color: var(--amber) !important;
}

.badge-gold {
  background: var(--jade-teal) !important;
  color: var(--white) !important;
}

.badge-blush {
  background: rgba(61, 158, 140, .12) !important;
  color: var(--jade-teal) !important;
}

.category-active {
  color: var(--jade-teal) !important;
  border-bottom: 2px solid var(--jade-teal) !important;
}

.alert-success {
  background: rgba(61, 158, 140, .12) !important;
  color: var(--jade-teal-strong) !important;
  border: 1px solid rgba(61, 158, 140, .2) !important;
}

.alert-error {
  background: rgba(224, 123, 106, .14) !important;
  color: #A33B2F !important;
  border: 1px solid rgba(224, 123, 106, .22) !important;
}

.info-box {
  background: rgba(61, 158, 140, .08) !important;
  border-color: rgba(61, 158, 140, .18) !important;
  color: var(--text-dark) !important;
}

.btn-outline {
  background: transparent !important;
  color: var(--coral) !important;
  border-color: rgba(224, 123, 106, .4) !important;
}

.btn-outline:hover {
  background: rgba(224, 123, 106, .1) !important;
  border-color: var(--coral) !important;
}

.btn-danger {
  background: rgba(224, 123, 106, .14) !important;
  color: #A33B2F !important;
  border-color: rgba(224, 123, 106, .22) !important;
}

.btn-ghost {
  color: var(--text-light) !important;
}

.btn-ghost:hover {
  color: var(--coral) !important;
}

.nav-item:hover,
.page-card:hover,
.item-card:hover,
.faq-item.open .faq-question {
  background: rgba(61, 158, 140, .06) !important;
}

.topbar,
.sidebar,
.sidebar-footer,
.page-body,
.view-site-btn,
.breadcrumb {
  color: var(--text-dark) !important;
}

.sidebar,
.topbar,
.sidebar-footer,
.item-card-header,
.btn-row {
  background: var(--surface-strong) !important;
}

.sidebar {
  border-right: 1px solid rgba(61, 158, 140, .12) !important;
}

.sidebar-brand {
  border-bottom: 1px solid rgba(61, 158, 140, .1) !important;
}

.brand-mark {
  background: linear-gradient(135deg, var(--jade-teal), var(--amber)) !important;
}

.brand-name,
.topbar-title,
.page-card-title,
.item-card-title,
.edit-form-title,
.stat-number {
  color: var(--deep-navy) !important;
}

.nav-section,
.brand-sub,
.stat-label,
.page-card-desc,
.edit-form-desc,
.breadcrumb,
.char-hint,
.logout-btn {
  color: var(--text-light) !important;
}

.nav-item {
  color: var(--text-dark) !important;
}

.nav-item:hover {
  background: rgba(61, 158, 140, .08) !important;
  color: var(--deep-navy) !important;
}

.nav-item.active {
  background: linear-gradient(90deg, rgba(61, 158, 140, .12), transparent) !important;
  color: var(--jade-teal) !important;
  border-left: 3px solid var(--jade-teal) !important;
}

.topbar {
  border-bottom: 1px solid rgba(61, 158, 140, .12) !important;
}

.page-card,
.stat-card,
.edit-form,
.item-card,
.modal {
  border-color: rgba(61, 158, 140, .08) !important;
}

.page-card:hover {
  border-color: var(--jade-teal) !important;
  box-shadow: 0 4px 20px rgba(61, 158, 140, .12) !important;
}

.page-card-icon,
.edit-form-icon,
.stat-icon {
  color: var(--jade-teal) !important;
}

.page-card-icon,
.edit-form-icon {
  background: rgba(61, 158, 140, .1) !important;
}

.item-card-header {
  border-bottom: 1px solid rgba(61, 158, 140, .08) !important;
}

.btn-row {
  border-top: 1px solid rgba(61, 158, 140, .1) !important;
  background: var(--surface-soft) !important;
}

.btn {
  border-radius: .75rem !important;
}

.btn-primary {
  background: var(--jade-teal) !important;
  color: var(--white) !important;
}

.btn-primary:hover {
  background: var(--jade-teal-strong) !important;
}

.btn-outline {
  background: transparent !important;
  color: var(--coral) !important;
  border: 1.5px solid rgba(224, 123, 106, .4) !important;
}

.btn-outline:hover {
  background: rgba(224, 123, 106, .1) !important;
  border-color: var(--coral) !important;
}

.btn-danger {
  background: rgba(224, 123, 106, .14) !important;
  color: #A33B2F !important;
  border: 1.5px solid rgba(224, 123, 106, .22) !important;
}

.btn-danger:hover {
  background: rgba(224, 123, 106, .22) !important;
}

.edit-form-header {
  border-bottom: 1px solid rgba(61, 158, 140, .1) !important;
}

.edit-form-body,
.page-body {
  background: transparent !important;
}

.view-site-btn {
  background: rgba(61, 158, 140, .1) !important;
  border: 1px solid rgba(61, 158, 140, .2) !important;
}

.view-site-btn:hover {
  background: rgba(61, 158, 140, .16) !important;
}

.card,
.logo-mark,
.notice,
.badge-available,
.badge-coming_soon,
.badge-hidden,
.status-not-set,
.copy-btn,
.env-btn,
.step-circle,
.badge-neutral,
.product-thumb-ph {
  background: var(--surface-strong) !important;
}

.tab-header {
  border-bottom: 1px solid rgba(61, 158, 140, .12) !important;
}

.tab-header button {
  color: var(--text-light) !important;
}

.tab-header button.active {
  color: var(--jade-teal) !important;
  border-color: var(--jade-teal) !important;
}

.product-row,
.modal,
.product-row-header {
  border-color: rgba(61, 158, 140, .1) !important;
}

.product-row-header {
  background: var(--surface-soft) !important;
}

.product-title {
  color: var(--deep-navy) !important;
}

.product-thumb-ph {
  background: rgba(61, 158, 140, .1) !important;
  color: var(--jade-teal) !important;
}

.modal-header {
  border-bottom: 1px solid rgba(61, 158, 140, .1) !important;
  background: var(--surface-strong) !important;
}

.url-display {
  background: var(--surface-soft) !important;
  border-color: rgba(61, 158, 140, .16) !important;
  color: var(--text-dark) !important;
}

.logo-mark {
  background: linear-gradient(135deg, var(--jade-teal), var(--coral)) !important;
  color: var(--white) !important;
}

.logo-mark span,
.btn,
.btn-primary,
.btn-outline,
.btn-danger,
.copy-btn,
.env-btn,
.step-circle {
  color: var(--deep-navy) !important;
}

.logo-mark span {
  color: var(--white) !important;
}

.subtitle,
.sub,
.footer-note,
.notice,
.status-not-set,
.badge-neutral,
.product-meta,
.page-card-desc,
.edit-form-desc {
  color: var(--text-light) !important;
}

label {
  color: var(--deep-navy) !important;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
textarea,
select {
  background: var(--surface-strong) !important;
  border-color: var(--border-light) !important;
  color: var(--text-dark) !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--jade-teal) !important;
  box-shadow: 0 0 0 3px rgba(61, 158, 140, .15) !important;
}

.notice {
  border: 1px solid rgba(61, 158, 140, .18) !important;
}

.error {
  background: rgba(224, 123, 106, .14) !important;
  color: #A33B2F !important;
}

.copy-btn,
.env-btn {
  border: 1px solid rgba(61, 158, 140, .18) !important;
}

.copy-btn:hover,
.env-btn:hover {
  background: rgba(61, 158, 140, .08) !important;
}

.step-circle {
  background: var(--jade-teal) !important;
  color: var(--white) !important;
}

.log-area {
  background: var(--deep-navy) !important;
  color: #D9F0D9 !important;
}

.badge-available {
  background: rgba(61, 158, 140, .12) !important;
  color: var(--jade-teal-strong) !important;
}

.badge-coming_soon {
  background: rgba(240, 180, 41, .16) !important;
  color: #9A6F00 !important;
}

.badge-hidden,
.status-not-set,
.badge-neutral {
  background: rgba(228, 226, 225, .6) !important;
  color: var(--text-light) !important;
}

.breadcrumb a {
  color: var(--jade-teal) !important;
}

.breadcrumb .sep {
  color: var(--text-light) !important;
}

/* Support common Tailwind opacity variants used on the site */
[class*="text-on-surface-variant/"],
[class*="text-on-surface/"] {
  color: var(--text-light) !important;
}

[class*="border-wisdom-gold/"],
[class*="border-primary/"],
[class*="border-secondary/"] {
  border-color: rgba(61, 158, 140, .16) !important;
}

[class*="bg-wisdom-gold/"],
[class*="bg-primary/"],
[class*="bg-secondary/"] {
  background-color: rgba(61, 158, 140, .12) !important;
}

.reveal,
.reveal-on-scroll,
.scroll-reveal,
.stagger-item {
  opacity: 1 !important;
  transform: none !important;
}