/*
 * Zohar Yoga — palette + type, tuned to the live site (zohar.yoga): a calm, cool
 * canvas with a muted dusty teal-blue accent and a clean sans with light-weight
 * headings. Loaded only on zohar (payload isolation), so it retunes the shared
 * token knobs directly at :root.
 *
 * Dark is zohar's default scheme (Site#default_color_scheme); the toggle still
 * offers a light variant, which recomputes from these same knobs. Because the
 * base light/dark blocks reference these hues via var(), overriding the knobs
 * here retints *both* modes at once.
 */

:root {
  --brand-h: 230;   /* dusty teal-blue — the accent for links, buttons, focus (was sage green) */
  --brand-c: 0.05;  /* muted, calm (base is 0.09) */
  --neutral-h: 235; /* cool charcoal/gray, not the warm cream of the base */
  --clay-h: 230;    /* teal-blue too, so category tags and the brand read as one accent */
  --clay-c: 0.05;   /* muted */

  --header-height: 4.25rem; /* slim sticky masthead; the home hero sits behind it */
  --post-card-ratio: 4 / 3; /* most featured images are portrait posters */
  --page-measure: 40rem;    /* zohar's pages are articles, read like posts */
}

@media (min-width: 48rem) {
  :root { --post-text-size: 1.125rem; --page-text-size: 1.125rem; }
}

@layer base {
  /* Light-weight headings, near-white on the dark canvas — the site's signature.
     (Live zohar.yoga renders headings at weight 400.) */
  h1, h2, h3, h4 { font-weight: 400; }
}

@layer components {
  /* Footer nav links parted by a soft middot rather than a hard rule — inherits the
     footer's muted tone. Even spacing on both sides of the dot (gap before, margin after). */
  .site-footer__nav .menu--footer { gap: var(--inline-space); }
  .site-footer__nav .menu--footer > .menu__item:not(:first-child)::before {
    content: "·";
    margin-inline-end: var(--inline-space);
    opacity: 0.6;
  }
}