/*
 * press2pixel — shared template design system.
 *
 * Loaded once globally (index.html), so every template, the off-screen export
 * stage, and the visual audit share identical spacing, typography, and surface
 * tokens. Templates set the tokens on their root via the render contract
 * (render-context.js injects them inline); the values below are the fallback
 * defaults when a token is unset.
 *
 * Sizing is em-based (never rem/px) so the Headline/Text sliders — which
 * multiply --p2p-headline-mul / --p2p-text-mul — scale the whole ladder
 * consistently. Spacing is driven by --p2p-space so the Density / grid / gap
 * controls reach every template that uses these classes.
 */

.p2p-template-root {
  /* Token defaults — overridden inline per template by render-context.js. */
  --p2p-headline-mul: 1;
  --p2p-text-mul: 1;
  --p2p-space: 16px;
  --p2p-section-gap: 40px;
  --p2p-col-gap: var(--p2p-space);
  --p2p-row-gap: var(--p2p-space);
  --p2p-radius: 12px;
  --p2p-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  --p2p-accent: #111111;
  --p2p-accent-soft: rgba(17, 17, 17, 0.10);
  --p2p-accent-strong: #000000;
  --p2p-surface-1: #ffffff;
  --p2p-surface-2: #f6f7f9;
  --p2p-ink: #0a0a0a;       /* primary text on surface-1 */
  --p2p-ink-soft: #585858;  /* secondary text */
  --p2p-on-accent: #ffffff; /* text/icon color on an accent fill */
  --p2p-headline-color: var(--p2p-ink);
  --p2p-excerpt-color: var(--p2p-ink-soft);
  --p2p-align-items: flex-start;
  --p2p-grid-cols: 2;
  --p2p-font: 'Plus Jakarta Sans', system-ui, sans-serif;

  font-size: 100%;
  font-family: var(--p2p-font);
  color: var(--p2p-ink);
  background: var(--p2p-surface-1);
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
  text-align: var(--p2p-text-align, left);
}
.p2p-template-root *,
.p2p-template-root *::before,
.p2p-template-root *::after { box-sizing: border-box; }

/* ── Typography ladder (em-based; no forced casing — brands keep their own) ── */
.p2p-display  { color: var(--p2p-headline-color); font-size: calc(5em    * var(--p2p-headline-mul)); line-height: calc(0.98 * var(--p2p-line-height-mul, 1)); font-weight: 800; letter-spacing: calc(-0.02em + var(--p2p-letter-spacing, 0em));  margin: 0; }
.p2p-title    { color: var(--p2p-headline-color); font-size: calc(3.4em  * var(--p2p-headline-mul)); line-height: calc(1.05 * var(--p2p-line-height-mul, 1)); font-weight: 800; letter-spacing: calc(-0.015em + var(--p2p-letter-spacing, 0em)); margin: 0; }
.p2p-subtitle { color: var(--p2p-headline-color); font-size: calc(2em    * var(--p2p-headline-mul)); line-height: calc(1.15 * var(--p2p-line-height-mul, 1)); font-weight: 700; margin: 0; letter-spacing: var(--p2p-letter-spacing, 0em); }
.p2p-excerpt  { color: var(--p2p-excerpt-color); font-size: calc(1.5em  * var(--p2p-text-mul));     line-height: calc(1.45 * var(--p2p-line-height-mul, 1)); margin: 0; letter-spacing: var(--p2p-letter-spacing, 0em); }
.p2p-lead     { font-size: calc(1.15em * var(--p2p-text-mul));     line-height: calc(1.5 * var(--p2p-line-height-mul, 1));  margin: 0; letter-spacing: var(--p2p-letter-spacing, 0em); }
.p2p-meta     { font-size: calc(0.9em  * var(--p2p-text-mul));     line-height: calc(1.2 * var(--p2p-line-height-mul, 1)); letter-spacing: calc(0.14em + var(--p2p-letter-spacing, 0em)); text-transform: uppercase; margin: 0; }
.p2p-brand    { font-size: calc(1.4em  * var(--p2p-text-mul));     line-height: calc(1.1 * var(--p2p-line-height-mul, 1)); font-weight: 700; letter-spacing: calc(-0.01em + var(--p2p-letter-spacing, 0em)); }


/* ── Layout helpers (all spacing flows from --p2p-space) ──────────────────── */
.p2p-pad     { padding: calc(var(--p2p-space) * 2); }
.p2p-stack   { display: flex; flex-direction: column; gap: var(--p2p-section-gap); align-items: var(--p2p-align-items); }
.p2p-row     { display: flex; align-items: center; gap: var(--p2p-space); }
.p2p-between { display: flex; align-items: center; justify-content: space-between; gap: var(--p2p-space); }
.p2p-fill    { flex: 1; min-height: 0; }
.p2p-grid    { display: grid; grid-template-columns: repeat(var(--p2p-grid-cols), minmax(0, 1fr)); gap: var(--p2p-row-gap) var(--p2p-col-gap); align-items: var(--p2p-align-items); }
.p2p-header  { display: flex; align-items: center; justify-content: space-between; gap: var(--p2p-space); padding: calc(var(--p2p-space) * 1.5); }
.p2p-footer  { display: flex; align-items: center; justify-content: space-between; gap: var(--p2p-space); padding: calc(var(--p2p-space) * 1.25) calc(var(--p2p-space) * 2); }

/* ── Components ───────────────────────────────────────────────────────────── */
.p2p-chip {
  display: inline-flex; align-items: center; gap: calc(var(--p2p-space) * 0.4);
  font-size: calc(0.9em * var(--p2p-text-mul)); font-weight: 600;
  padding: calc(var(--p2p-space) * 0.4) calc(var(--p2p-space) * 0.85);
  border: 1px solid var(--p2p-accent-soft); border-radius: 999px;
  background: var(--p2p-surface-1); color: var(--p2p-ink); white-space: nowrap;
}
.p2p-chip--accent { background: var(--p2p-accent); border-color: var(--p2p-accent); color: var(--p2p-on-accent); }

.p2p-cta {
  display: inline-flex; align-items: center; gap: calc(var(--p2p-space) * 0.5);
  background: var(--p2p-accent); color: var(--p2p-on-accent);
  font-weight: 700; text-decoration: none;
  padding: calc(var(--p2p-space) * 0.7) calc(var(--p2p-space) * 1.4);
  border-radius: 999px; font-size: calc(1em * var(--p2p-text-mul));
}

.p2p-card  { background: var(--p2p-surface-2); border-radius: var(--p2p-radius); box-shadow: var(--p2p-shadow); padding: calc(var(--p2p-space) * 1.25); }
.p2p-media { border-radius: var(--p2p-radius); overflow: hidden; box-shadow: var(--p2p-shadow); background: var(--p2p-surface-2); }
.p2p-media > img { width: 100%; height: 100%; object-fit: cover; display: block; }