/* ============================================================
   Naturally Pilates — design tokens & base styles
   Calm boutique studio. Palette derived from the brand logo
   (periwinkle #9EB0FF → pink #EE93F1) + royal indigo actions.
   ============================================================ */

:root {
  /* Canvas & ink */
  --canvas:      #faf8fc;
  --canvas-warm: #f4eff6;
  --surface:     #ffffff;
  --ink:         #221f3a;
  --ink-soft:    #514d6b;
  --ink-mute:    #8a8699;
  --hair:        rgba(34, 31, 58, 0.09);
  --hair-strong: rgba(34, 31, 58, 0.16);

  /* Brand */
  --blue:    #4c57d8;   /* primary action — royal indigo */
  --blue-d:  #3a44b8;
  --peri:    #9eb0ff;   /* periwinkle */
  --peri-soft:#dfe4ff;
  --pink:    #ee93f1;   /* logo pink */
  --pink-ink:#c84fcb;   /* readable pink on light */
  --pink-soft:#fbe3fb;
  --grad:    linear-gradient(116deg, #9eb0ff 0%, #c9a4f4 48%, #ee93f1 100%);
  --grad-soft: linear-gradient(116deg, #eef0ff 0%, #f6ecfb 55%, #fdeafd 100%);

  /* Accent (tweakable) */
  --accent:    var(--blue);
  --accent-ink:#ffffff;

  /* Type */
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-sans: "Hanken Grotesk", -apple-system, system-ui, sans-serif;

  /* Geometry */
  --r-sm: 12px;
  --r:    18px;
  --r-lg: 26px;
  --r-pill: 999px;

  /* Elevation */
  --sh-1: 0 1px 2px rgba(34,31,58,.05), 0 4px 14px rgba(34,31,58,.05);
  --sh-2: 0 2px 6px rgba(34,31,58,.06), 0 18px 44px rgba(58,55,110,.10);
  --sh-3: 0 10px 30px rgba(58,55,110,.14), 0 30px 70px rgba(58,55,110,.14);

  --maxw: 1180px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background: var(--canvas);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--peri-soft); }

h1,h2,h3,h4,h5 { margin: 0; font-weight: 600; line-height: 1.08; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }

/* ---------- layout helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.section { padding: 92px 0; }
@media (max-width: 720px){ .section { padding: 60px 0; } .wrap { padding: 0 20px; } }

/* ---------- display type ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.02;
}
.eyebrow {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pink-ink);
}
.lede { font-size: 19px; color: var(--ink-soft); line-height: 1.6; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: none; border-radius: var(--r-pill);
  padding: 15px 26px; font-size: 15.5px; font-weight: 600; letter-spacing: .005em;
  transition: transform .16s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 8px 20px rgba(76,87,216,.28); }
.btn-primary:hover { background: var(--blue-d); box-shadow: 0 12px 26px rgba(76,87,216,.34); }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--hair-strong); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn-soft { background: var(--canvas-warm); color: var(--ink); }
.btn-soft:hover { background: #ece5f0; }
.btn-lg { padding: 18px 32px; font-size: 16.5px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- pill / chip ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 6px 13px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 600; letter-spacing: .01em;
  background: var(--canvas-warm); color: var(--ink-soft);
}
.chip-line { background: transparent; box-shadow: inset 0 0 0 1.3px var(--hair-strong); }

/* ---------- card ---------- */
.card {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}

/* ---------- generic fade-in on active ---------- */
/* End-state is the base style (always visible); we only animate a gentle
   transform IN, so a frozen/failed animation can never hide content. */
@media (prefers-reduced-motion: no-preference){
  .rise { animation: rise .6s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes rise { from { transform: translateY(14px); } to { transform: none; } }
}

/* ---------- image slot styling ---------- */
image-slot {
  --is-bg: #efeaf3;
  background: var(--canvas-warm);
  color: var(--ink-mute);
  font-family: var(--font-sans);
}

/* scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--hair-strong) transparent; }