/* ============================================================
   zeal · Design-system tokens & utilities
   Generated from the "zeal Design System" Claude Design project
   (tokens/colors.css, typography.css, spacing.css, base.css) and
   adapted for the WordPress block theme.

   The 6 palette anchors live in theme.json and are referenced here
   via their --wp--preset--color--* variables, so the editor palette
   stays the single source of truth. Ramp steps and semantics that
   theme.json doesn't carry are defined directly below.
   ============================================================ */

:root {
  /* ---- Plum (heritage primary) -------------------------------- */
  --plum-900: var(--wp--preset--color--plum-ink, #2f2935);   /* ink */
  --plum-800: #3f3747;
  --plum-700: var(--wp--preset--color--plum-strong, #534761);
  --plum-600: #685a76;
  --plum-500: var(--wp--preset--color--primary, #7c6a86);    /* brand */
  --plum-400: #9384a0;
  --plum-300: #b3a6bb;
  --plum-200: #d2c9d7;
  --plum-100: var(--wp--preset--color--plum-tint, #ece7ef);
  --plum-050: #f6f3f8;

  /* ---- Warm grey (text + lines) ------------------------------- */
  --grey-900: #2b2b2b;
  --grey-700: #4a4a4a;
  --grey-600: var(--wp--preset--color--contrast, #6e6e6e);   /* body */
  --grey-400: #9a9a9a;
  --grey-300: #c4c4c4;
  --grey-200: #e2e2e2;
  --grey-100: #efefef;
  --grey-050: #f7f7f7;
  --white:    var(--wp--preset--color--base, #ffffff);

  /* ---- System pastels (surfaces) ------------------------------ */
  --sky-base:    var(--wp--preset--color--secondary, #c8dff1);
  --sky-strong:  var(--wp--preset--color--sky-strong, #91bfe3);
  --sky-soft:    #e6f1f9;
  --sage-base:   var(--wp--preset--color--tertiary, #d5e8e4);
  --sage-strong: var(--wp--preset--color--sage-strong, #abd1c9);
  --sage-soft:   #eef6f4;
  --sand-base:   var(--wp--preset--color--quaternary, #f7eee7);
  --sand-strong: var(--wp--preset--color--sand-strong, #efddcf);
  --sand-soft:   #fbf6f1;

  /* ---- Semantic status ---------------------------------------- */
  --positive: var(--wp--preset--color--positive, #5b8c7b);
  --caution:  var(--wp--preset--color--caution, #c79a4e);
  --critical: var(--wp--preset--color--critical, #b4584f);
  --info:     var(--wp--preset--color--info, #5c83a8);

  /* ---- Semantic aliases (reference these in markup) ------------ */
  --brand:          var(--plum-500);
  --brand-ink:      var(--plum-900);
  --brand-strong:   var(--plum-700);
  --brand-hover:    var(--plum-600);
  --brand-tint:     var(--plum-100);
  --brand-on:       var(--white);

  --text-strong:    var(--plum-900);
  --text-body:      var(--grey-600);
  --text-muted:     var(--grey-400);
  --text-on-brand:  var(--white);
  --text-on-dark:   var(--white);
  --text-link:      var(--plum-600);

  --surface-page:   var(--white);
  --surface-card:   var(--white);
  --surface-sunken: var(--grey-050);
  --surface-plum:   var(--plum-500);
  --surface-sky:    var(--sky-base);
  --surface-sage:   var(--sage-base);
  --surface-sand:   var(--sand-base);

  --border-subtle:  var(--grey-200);
  --border-default: var(--grey-300);
  --border-strong:  var(--plum-300);

  --highlight-bg:   var(--plum-500);
  --highlight-text: #f3f3f3;
  --scrim-plum:     rgba(124, 106, 134, 0.8);
  --scrim-dark:     rgba(47, 41, 53, 0.55);

  /* ---- Type families ------------------------------------------ */
  --font-serif:   var(--wp--preset--font-family--lora, Lora, "Times New Roman", Times, serif);
  --font-body:    var(--font-serif);
  --font-display: var(--font-serif);
  --font-mono:    ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* ---- Weights ------------------------------------------------ */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---- Fluid type scale (clamp: min @360 -> max @1280) -------- */
  --text-overline: 0.75rem;
  --text-xs:   0.8125rem;
  --text-sm:   0.9375rem;
  --text-base: 1.0625rem;
  --text-md:   1.1875rem;
  --text-lg:   clamp(1.25rem, calc(1.1rem + 0.7vw), 1.5rem);
  --text-xl:   clamp(1.5rem, calc(1.25rem + 1.2vw), 2rem);
  --text-2xl:  clamp(1.9rem, calc(1.5rem + 1.9vw), 2.75rem);
  --text-3xl:  clamp(2.4rem, calc(1.8rem + 2.9vw), 3.75rem);
  --text-4xl:  clamp(3rem, calc(2rem + 4.6vw), 5rem);

  /* ---- Line height + tracking --------------------------------- */
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;
  --tracking-overline: 0.16em;
  --tracking-tight: -0.015em;
  --tracking-normal: 0;

  /* ---- Space scale (4px base) --------------------------------- */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;   /* signature section gap */
  --space-10: 8rem;

  /* ---- Layout ------------------------------------------------- */
  --container-wide:    var(--wp--style--global--wide-size, 1280px);
  --container-content: var(--wp--style--global--content-size, 620px);
  --gutter:            clamp(1.25rem, 1rem + 3vw, 3rem);

  /* ---- Radii -------------------------------------------------- */
  --radius-none: 0;
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* ---- Borders ------------------------------------------------ */
  --border-hairline: 1px;
  --border-thick: 2px;

  /* ---- Elevation (cool plum-tinted) --------------------------- */
  --shadow-xs: 0 1px 2px rgba(47, 41, 53, 0.06);
  --shadow-sm: 0 2px 6px rgba(47, 41, 53, 0.07);
  --shadow-md: 0 8px 24px rgba(47, 41, 53, 0.09);
  --shadow-lg: 0 18px 48px rgba(47, 41, 53, 0.13);

  /* ---- Motion ------------------------------------------------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 140ms;
  --duration-normal: 240ms;
  --duration-slow: 600ms;
}

/* ============================================================
   Editorial typography utilities
   ============================================================ */

/* Tracked all-caps overline, lifted from the logo badge.
   Add the `has-rule` class for the short leading rule. */
.zeal-overline {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--text-overline);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 0.5em;
}
.zeal-overline.has-rule::before {
  content: "";
  display: block;
  width: 34px;
  border-top: var(--border-thick) solid currentColor;
  opacity: 0.55;
  margin: 0 0 0.85em;
}
.zeal-overline.is-plum { color: var(--plum-500); }
.zeal-overline.is-on-dark { color: rgba(255, 255, 255, 0.85); }

.zeal-display {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}

.zeal-lead {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
}

.zeal-prose {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
  text-wrap: pretty;
}
.zeal-prose em { font-style: italic; }

/* ============================================================
   Cards & pattern helpers (used by /patterns)
   ============================================================ */

/* Elevated editorial card — hairline border, quiet plum shadow,
   square-ish corners. Pair with a has-*-background-color pastel. */
.zeal-card {
  border: var(--border-hairline) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.zeal-card.has-secondary-background-color,
.zeal-card.has-tertiary-background-color,
.zeal-card.has-quaternary-background-color {
  border-color: rgba(47, 41, 53, 0.08);
}

/* The three-pastel "connected system" triptych accents */
.zeal-system .zeal-overline.is-sky  { color: var(--sky-strong); }
.zeal-system .zeal-overline.is-sage { color: var(--sage-strong); }
.zeal-system .zeal-overline.is-sand { color: var(--sand-strong); }

/* Collaborator / institution logo wall — quiet grey wordmark tiles */
.zeal-logowall {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.zeal-logo-tile {
  flex: 1 1 180px;
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 18px;
  border: var(--border-hairline) solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  color: var(--grey-400);
}
.zeal-logo-tile p { margin: 0; }

/* ============================================================
   Nature-cover hero (design-system SiteHero)
   Full-bleed cover using the page's featured image, sliding under
   the fixed plum bar, with a plum scrim and content pinned low-left.
   ============================================================ */
.zeal-hero--bleed.wp-block-cover {
  /* Pull up under the fixed header bar so the image is full-bleed.
     Only the page-top hero (front page) gets this; the reusable
     pattern dropped mid-content must not slide over what precedes it.
     Vars come from style.css (front end); undefined in the editor,
     where the declaration is simply ignored — no negative margin. */
  margin-top: calc(-1 * var(--zeal-header-height));
}
.zeal-hero .wp-block-cover__inner-container {
  width: 100%;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding-left: clamp(20px, 4vw, 48px);
  padding-right: clamp(20px, 4vw, 48px);
  padding-bottom: clamp(48px, 7vw, 96px);
}
.zeal-hero .wp-block-post-title,
.zeal-hero h1 {
  color: #fff;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  max-width: 16ch;
  margin: 0.35em 0 0;
  text-wrap: balance;
}
.zeal-hero .zeal-hero__lead {
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--text-lg);
  line-height: 1.6;
  max-width: 46ch;
  margin: 20px 0 28px;
}
@media (max-width: 1000px) {
  .zeal-hero--bleed.wp-block-cover {
    margin-top: calc(-1 * var(--zeal-header-height-mobile));
  }
}

/* Collaborator / institution logo wall — quiet grey wordmark tiles */
.zeal-logowall {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.zeal-logo-tile {
  flex: 1 1 180px;
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 18px;
  border: var(--border-hairline) solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  color: var(--grey-400);
}
.zeal-logo-tile p { margin: 0; }

/* Editorial plum text-highlight (parity with .\_text_highlighted) */
.zeal-mark mark,
mark.zeal-mark {
  background: var(--highlight-bg);
  color: var(--highlight-text);
  padding: 0.05em 0.2em;
}