/* ============================================================theme.css — global design tokens, reset & shared primitivesPalette goal: calm (soft linen, sage, sky) + powerful (deepaubergine/indigo, warm gold). Used across every section.============================================================ */
/* Brand logo image (Yogaverse mandala) shown in every top nav. */
.yv-logo-img {
display: block;
width: 46px;
height: 46px;
border-radius: 13px;
object-fit: cover;
object-position: center;
image-rendering: -webkit-optimize-contrast;
box-shadow: 0 5px 16px rgba(61, 153, 112, 0.45);
}
.nav__brand .yv-logo-img { width: 60px; height: 60px; border-radius: 16px; }
.fs-topnav__brand .yv-logo-img { width: 50px; height: 50px; border-radius: 14px; }
:root {
/* --- Grounded but not heavy forest --- */
--ink-900: #1e4d32; /* readable dark green */
--ink-800: #265e3c;
--ink-700: #357a50;
/* --- Predominantly white surfaces --- */
--cream: #f9fdfb; /* barely-green white */
--sand: #edf7f1; /* very soft mint */
--paper: #ffffff;
/* --- Green accents (used sparingly) --- */
--sage: #4eb87a; /* fresh leafy */
--sage-dk: #2f8055;
--gold: #d4a017; /* warm honey */
--coral: #e07b5f; /* energy */
--violet: #3aab74; /* medium green accent */
--sky: #7dd4ae; /* soft mint */
/* --- Text --- */
--text: #1c3a28;
--text-soft: #507060;
--text-inv: #f2fdf6;
--text-inv-soft: #b8e0cc;
/* --- Utility --- */
--radius: 20px;
--radius-sm: 12px;
--shadow: 0 18px 50px -20px rgba(30, 77, 50, 0.22);
--shadow-sm: 0 8px 24px -12px rgba(30, 77, 50, 0.16);
--ring: 0 0 0 3px rgba(58, 171, 116, 0.35);
--maxw: 1180px;
--yv-site-bg: #f9fdfb;
/* Near-white sage gradient — hero looks light, sections stay white */
--grad-power: linear-gradient(150deg, #f5fdf9 0%, #e4f5ec 35%, #f8fdfb 100%);
--grad-accent: linear-gradient(120deg, #3aab74, #7dd4ae 55%, #4eb87a);
}
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
font-synthesis-weight: none;
}


body {
margin: 0;
font-family: var(--font-body, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif);
color: var(--text);
background: var(--yv-site-bg);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
h1, h2, h3 {
font-family: var(--font-heading);
font-weight: 600;
line-height: 1.1;
margin: 0;
letter-spacing: 0;
}
button, input, select, textarea { font-family: var(--font-ui, var(--font-body, inherit)); }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
/* --- Shared section headings --- */
.section__eyebrow {
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 0.72rem;
font-weight: 700;
color: var(--sage-dk);
margin-bottom: 0.6rem;
}
.section__title {
font-size: clamp(1.8rem, 4vw, 2.9rem);
color: var(--ink-900);
}
.section__lead {
margin-top: 0.9rem;
max-width: 60ch;
color: var(--text-soft);
font-size: 1.05rem;
}
/* --- Buttons --- */
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.85rem 1.4rem;
border-radius: 999px;
font-weight: 600;
font-size: 0.98rem;
cursor: pointer;
border: 1px solid transparent;
transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn--primary {
background: var(--grad-accent);
color: #fff;
box-shadow: 0 14px 30px -12px rgba(61, 153, 112, 0.65);


}
.btn--ghost {
background: transparent;
color: var(--sage-dk);
border-color: rgba(47, 128, 85, 0.45);
backdrop-filter: blur(6px);
}
.btn--ghost:hover { background: rgba(47, 128, 85, 0.08); }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}