/**
 * Design tokens.
 *
 * Taken from the `:root` block of the Claude Design wireframe bundle, unchanged. If a value
 * disagrees with the wireframe, the wireframe is right and this file is wrong.
 *
 * The old design-tokens.css scoped every selector to `:root[data-mode="..."]` and then set
 * the attribute with an inline <script>, which the host's WAF strips and which WordPress
 * discarded anyway because the handle it was attached to named a stylesheet, not a script.
 * The attribute is now printed by AppearanceService through the `language_attributes`
 * filter, before <html> closes, with no script at all.
 */

:root {
  /* Brand */
  --nem-purple: #8D22C3;
  --nem-dpurple: #261A48;
  --nem-orange: #FF551D;
  --nem-orange-2: #E96F46;
  --nem-cream: #FAF9F6;
  --nem-ink: #15192C;

  /* Structure */
  --nem-line: #cfc9be;
  --nem-line-2: #e3ddd2;
  --nem-panel: #ffffff;
  --nem-muted: #8b8578;
  --nem-skeleton: #e7e2d8;

  /* Scanner result states. Colour is read at arm's length, before the words. */
  --nem-admit: #3f8f5f;
  --nem-warn: #c98a1a;
  --nem-refuse: #c8392b;

  /* Type */
  --nem-display: Dosis, system-ui, sans-serif;
  --nem-body: Poppins, system-ui, -apple-system, sans-serif;

  /* Rhythm */
  --nem-radius: 12px;
  --nem-radius-pill: 24px;
  --nem-gap: 16px;
  --nem-shadow: 0 10px 34px rgba(38, 26, 72, 0.10);

  /* ---- page measure ----
   *
   * The gutter used to be a hard-coded 70px inside `.nem-wrap`, which on a 1190px laptop
   * is 12% of the window spent on nothing. Both numbers are here so the gutter can be
   * changed in one place instead of five, and so the hero bands can bleed past it by
   * exactly the amount it takes up.
   */
  --nem-wrap-max: 1280px;
  --nem-wrap-pad-x: 24px;
  --nem-wrap-pad-y: 48px;

  /* ---- header clearance ----
   *
   * The theme's header is transparent and sits over the top of the page. Every plugin screen
   * pushes its first line of content down by this much so the two do not collide - but the
   * *colour* still runs to the top. A screen that opens on a band adds this to the band's own
   * padding rather than to the wrap's, so the purple reaches under the header and only the
   * words move. Change the header and change this number; nothing else.
   */
  --nem-header-offset: 70px;

  /* ---- filter / pagination pills ----
   *
   * The chip's own rule states every one of these, because the theme's `button` styles
   * (uppercase, 15px, 14px 28px of padding) beat a bare `.nem-chip`. Change the size of
   * every pill on the catalog by changing these three values and nothing else.
   */
  --nem-chip-size: 12px;
  --nem-chip-pad-y: 6px;
  --nem-chip-pad-x: 13px;
}

/**
 * `Inherit theme` means what it says: no plugin fonts, no plugin colours. The mount still
 * renders; it just borrows whatever the theme provides.
 */
:root[data-mode="inherit"] .neo-evt-mount {
  --nem-purple: currentColor;
  /* The display/body tokens are NOT flipped to `inherit` here: they feed dozens of
     `font:` shorthands, and `font: 700 32px/1 inherit` is invalid CSS that drops the whole
     declaration (and its sizing). Font inheritance for this mode is applied as a separate
     font-family override at the foot of this file, which leaves the shorthands intact. */
}

/**
 * Custom branding overrides land here, written by AppearanceService from the admin settings.
 * Defaults are the NeoYug palette rather than the generic violet the first build shipped.
 */
:root[data-mode="custom"] .neo-evt-mount {
  --nem-purple: var(--nem-brand-primary, #8D22C3);
  --nem-dpurple: var(--nem-brand-primary-dark, #261A48);
  --nem-orange: var(--nem-brand-accent, #FF551D);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --nem-anim: none;
  }
}

/**
 * Typography.
 *
 * Event screens inherit the site's GLOBAL font family so the catalog (Programs / Sadhanas,
 * neoyug-program-landing) and the events page read as one continuous surface. The three
 * pill rails — Programs / Sadhanas / Events — must not swap fonts as you move between the
 * pages; the catalog already renders in the global theme font (its `.nyc-*` rules all use
 * `font-family: inherit`), so events follows suit. The override is applied AFTER the
 * design's `font:` shorthands and only touches font-family, so every size / weight /
 * line-height the wireframe specifies survives while the family follows whatever the theme
 * sets globally.
 *
 * --nem-display / --nem-body (Dosis / Poppins) are intentionally NOT flipped to `inherit`:
 * they feed dozens of `font:` shorthands and `font: 700 32px/1 inherit` is invalid CSS that
 * drops the whole declaration (and its sizing). They stay as valid families for the
 * shorthands; the rule below wins for family only. This runs in EVERY appearance mode, so
 * events always tracks the global type regardless of the neoyug / custom / inherit colour
 * setting — the appearance mode now controls colour, not typeface.
 */
.neo-evt-mount,
.neo-evt-mount * { font-family: inherit !important; }
