/* ============================================================
   Pine III — monochromatic pine theme
   ------------------------------------------------------------
   Palette: Dark Spruce / Ebony / Champagne Mist / Chocolate
   See assets/theme-schemes-reference.md for other explored themes.
   ============================================================ */

:root {
  --paper:       oklch(0.305 0.055 145);   /* Dark Spruce — page floor */
  --paper-2:     oklch(0.410 0.050 140);   /* Ebony — card surface */
  --paper-3:     oklch(0.495 0.055 138);   /* raised ebony */
  --ink:         oklch(0.935 0.030 88);    /* Champagne Mist */
  --ink-soft:    oklch(0.810 0.034 90);
  --ink-muted:   oklch(0.650 0.038 95);
  --rule:        oklch(0.450 0.050 140);
  --rule-soft:   oklch(0.380 0.048 142);

  --green:       oklch(0.760 0.135 140);
  --green-deep:  oklch(0.620 0.115 140);
  --green-ink:   oklch(0.850 0.150 138);
  --green-tint:  oklch(0.370 0.065 135);

  --orange:      oklch(0.665 0.155 48);    /* Chocolate */
  --orange-deep: oklch(0.555 0.140 46);
  --orange-tint: oklch(0.885 0.060 78);

  --slate:       oklch(0.250 0.028 125);   /* Charcoal Brown — deepest shadow */
  --slate-2:     oklch(0.305 0.045 140);
}

/* --- Surface hierarchy: lift cards off the forest floor --------------- */

.event,
.ba-tile {
  background: var(--paper-2);
  border-color: color-mix(in oklab, var(--paper-3), transparent 50%);
  box-shadow: 0 12px 32px -18px oklch(0 0 0 / 0.55);
}
.event:hover,
.ba-tile:hover {
  border-color: color-mix(in oklab, var(--orange), transparent 35%);
}
.ba-tile--photo-quote .ba-tile__photo--split {
  background: color-mix(in oklab, var(--paper-3), transparent 40%);
}
.event__date {
  border-right-color: color-mix(in oklab, var(--ink), transparent 78%);
}

/* --- Cohort week cards: stay inside the pine palette ------------------ */
/* The .section--cohort scope below bumps --paper-2 to near-white so the
   section's own child styles (which expect a light paper color) still work.
   Reach past that scope with raw forest greens for the week surfaces. */

.section--cohort .week {
  background: oklch(0.395 0.065 142);
  border-color: oklch(0.475 0.065 140);
  color: oklch(0.955 0.022 90);
}
.section--cohort .week:hover {
  background: oklch(0.445 0.070 142);
  border-color: color-mix(in oklab, oklch(0.665 0.155 48), transparent 35%);
}
.section--cohort .week__num {
  color: color-mix(in oklab, var(--orange-tint), transparent 25%);
}
.section--cohort .week__num em {
  color: var(--orange-tint);
}

/* --- Tool ecosystem: recess section, lift chips ----------------------- */

.section--ecosystem {
  background: var(--slate);
}
.eco__ring--mid {
  border-color: color-mix(in oklab, var(--green), transparent 55%);
}
.eco__ring--outer {
  border-color: color-mix(in oklab, var(--orange), transparent 55%);
}
.eco-chip {
  background: var(--paper-2);
  border-color: color-mix(in oklab, var(--paper-3), transparent 55%);
  color: var(--ink);
}
.eco-chip:hover {
  border-color: color-mix(in oklab, var(--orange), transparent 35%);
}
.eco-chip--dev {
  color: var(--orange);
  border-color: color-mix(in oklab, var(--orange), transparent 55%);
}
.eco-chip--acct {
  color: var(--green);
  border-color: color-mix(in oklab, var(--green), transparent 55%);
}

/* --- Nav CTA: default relied on ink=dark, which flips in this theme --- */

.pill--dark {
  background: var(--orange);
  color: var(--paper);
  border-color: var(--orange);
}
.pill--dark:hover {
  background: var(--orange-deep);
  border-color: var(--orange-deep);
}

/* --- Dark "island" sections: flip paper/ink back inside them ---------- */
/* These sections were designed as dark bands on a light page and use
   var(--paper) as their text color. Redefine locally so their existing
   child styles still work. */

.section--cohort,
.section--dark,
.section--cta {
  --paper:     oklch(0.955 0.022 90);
  --paper-2:   oklch(0.910 0.030 80);
  --ink:       oklch(0.210 0.028 50);
  --ink-soft:  oklch(0.390 0.030 55);
  --ink-muted: oklch(0.560 0.024 60);
}

/* --- Billing cycle toggle on the Individual plan card --------------- */

.plan__billing {
  display: inline-flex;
  align-items: stretch;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--ink), transparent 90%);
  border: 1px solid color-mix(in oklab, var(--ink), transparent 82%);
  align-self: flex-start;
}
.plan__billing-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: color-mix(in oklab, var(--ink), transparent 30%);
  font-family: var(--ff-label);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  padding: 7px 16px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 180ms ease, color 180ms ease;
}
.plan__billing-btn:hover { color: var(--ink); }
.plan__billing-btn.is-active {
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 1px 0 oklch(0 0 0 / 0.2), 0 4px 12px oklch(0 0 0 / 0.25);
}
.plan__billing-btn:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}
.plan__billing-save {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--orange), transparent 72%);
  color: var(--orange-tint);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.plan__billing-btn.is-active .plan__billing-save {
  background: var(--orange);
  color: var(--paper);
}

/* --- Hero video: drop the play button below Chad's mouth and force a
      light caption color so it reads on the photo. */

.hero__video-play { top: 64%; }
.hero__video-play:hover { transform: translate(-50%, -50%) scale(1.03); }
.hero__video-cap {
  color: oklch(0.955 0.022 90);
  text-shadow: 0 1px 2px oklch(0 0 0 / 0.5);
}