/*
 * GENERATED. Do not hand-edit: run `python3 .tools/design/build-tokens.py`.
 *
 * Derived from the Claude design system's `colors_and_type.css`. The deltas applied and the
 * reasoning behind each are in that script's docblock and in assets/design/SOURCE.md.
 */

/*
 * The element styles from the design system, scoped to `.ezy-design`.
 *
 * THE SCOPE IS THE WHOLE POINT. In source these are bare `body`, `h1`-`h4`, `p` and `a`
 * selectors. Loaded site-wide they would restyle every one of the 140 Divi pages, whose
 * typography is set in 113 Theme Builder templates. The frames put `ezy-design` on the
 * wrapper of a coded page and a landing page, and nothing else on the site carries it.
 */

.ezy-design {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-body);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ezy-design h1, .ezy-design .h1 {
  font-family: var(--font-sans);
  font-weight: var(--weight-heavy);  /* 800 */
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--color-text-heading);
  margin: 0;
  text-wrap: balance;
}

.ezy-design h2, .ezy-design .h2 {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);  /* 700 */
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-heading);
  margin: 0;
  text-wrap: balance;
}

.ezy-design h3, .ezy-design .h3 {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);  /* 700 */
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-heading);
  margin: 0;
}

.ezy-design h4, .ezy-design .h4 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);  /* 600 */
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--color-text-heading);
  margin: 0;
}

.ezy-design .eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-secondary);
}

.ezy-design p, .ezy-design .body {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-body);
  text-wrap: pretty;
}

.ezy-design .body-lead {
  font-size: var(--text-lg);
  font-weight: var(--weight-light);  /* 350 */
  line-height: var(--leading-relaxed);
  color: var(--color-text-body);
}

.ezy-design .caption, .ezy-design small {
  font-family: var(--font-sans);
  font-weight: var(--weight-light);  /* 350 */
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

.ezy-design .label {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);  /* 500 */
  font-size: var(--text-sm);
  letter-spacing: 0.01em;
  color: var(--color-text-heading);
}

.ezy-design a {
  color: var(--color-secondary);
  text-decoration: none;
  font-weight: var(--weight-medium);
  transition: color var(--duration-fast) var(--ease-standard);
}
.ezy-design a:hover { color: var(--color-secondary-hover); text-decoration: underline; text-underline-offset: 2px; }

.ezy-design code, .ezy-design kbd, .ezy-design samp, .ezy-design pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/*
 * THE .row CONTAINER. ADDED here, not read from source: CODEGEN.md specifies this rule verbatim and
 * calls it a contract, but `colors_and_type.css` does not ship it, so without this every design
 * file would redeclare the same four lines and one of them would eventually get the cap wrong.
 *
 * SCOPED, while the class name in the markup stays exactly `row`. CODEGEN requires the bare name
 * because the composer targets it; a global `.row` on a WordPress site with 40-odd plugins is a
 * collision waiting to happen, and scoping costs nothing that the contract asks for.
 *
 * The cap is 1520px at every breakpoint, forever. Above 1600px the fluid padding is what grows.
 */
.ezy-design .row {
  max-width: var(--row-max-width);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 40px);
}