/* ============================================================================
   Editor styles — the styles editors can apply from the rich-text toolbar.

   CloudCannon reads this file via the `styles:` option on a rich-text input
   (see cloudcannon.config.yml) and turns each selector into a selectable
   option. Three rules govern what belongs here:

     1. Selectors MUST be `element.class`. A bare element (`h2`) or a lone class
        (`.caption`) is applied inside the editor but never offered as an option.
     2. The class name IS the label editors see — CloudCannon derives it from the
        selector, so it cannot be prettified. Keep names self-explanatory.
     3. Only ONE style applies at a time, so size and colour cannot be combined
        from the dropdown. That is why .caption exists as a compound.

   This file is ALSO linked from layouts/base.njk, so the live page renders what
   the editor previewed. Keep it small and deliberate: every `element.class`
   selector added here becomes another entry in the editors' dropdown.

   Sizes come from the type scale in tokens.css — no hardcoded px here.
   ============================================================================ */

/* ---- Font size utilities -------------------------------------------------
   Generic, ascending = larger. Block-level (p) only, deliberately: CloudCannon
   appends a de-duplicating counter when two selectors yield the same label, so
   a matching span.font-size-N set showed up as "Font Size 1 1 (span)" in the
   dropdown. Add inline variants back only under distinct class names.

   Note the 14px -> 18px jump: 16px is on the declared 8px grid in tokens.css
   but is not tokenised yet, so there is deliberately no step between 2 and 3. */
p.font-size-1 { font-size: var(--text-xs);       line-height: var(--text-xs-leading); }
p.font-size-2 { font-size: var(--text-sm);       line-height: var(--text-sm-leading); }
p.font-size-3 { font-size: var(--text-base);     line-height: 1.556; }
p.font-size-4 { font-size: var(--h4-size);       line-height: var(--h4-leading); }
p.font-size-5 { font-size: var(--h3-size);       line-height: var(--h3-leading); }
p.font-size-6 { font-size: var(--h2-small-size); line-height: var(--h2-small-leading); }
/* ---- Semantic ------------------------------------------------------------
   The one compound style, because the dropdown applies a single class and a
   caption needs both a smaller size and the muted colour. Used for source
   attributions and image credits, e.g. under a statistic in a card. */
p.caption {
  font-size: var(--text-sm);
  line-height: var(--text-sm-leading);
  color: var(--muted);
}