/* ============================================================================
   TOKENS
   ----------------------------------------------------------------------------
   These are ALIASES, not definitions.

   Every value lives in theme.json. WordPress turns theme.json presets into
   --wp--preset--* custom properties automatically, and this file gives them
   readable names. That is why there is not a single raw hex value below.

   TO CHANGE THE ACCENT COLOUR when the brand colour is locked:
     edit the "accent" entry in theme.json. One hex value.
     It updates the front end, the editor colour picker and every block at once.
     Do not add a hex value here.
   ========================================================================= */

:root {
  /* --- colour --- */
  --ll-white:        var(--wp--preset--color--white);
  --ll-warm:         var(--wp--preset--color--warm);
  --ll-warm-2:       var(--wp--preset--color--warm-2);
  --ll-ink:          var(--wp--preset--color--ink);
  --ll-ink-2:        var(--wp--preset--color--ink-2);
  --ll-muted:        var(--wp--preset--color--muted);
  --ll-rule:         var(--wp--preset--color--rule);
  --ll-rule-2:       var(--wp--preset--color--rule-2);
  --ll-accent:       var(--wp--preset--color--accent);
  --ll-accent-deep:  var(--wp--preset--color--accent-deep);
  --ll-accent-tint:  var(--wp--preset--color--accent-tint);

  /* --- type --- */
  --ll-serif: var(--wp--preset--font-family--serif);
  --ll-sans:  var(--wp--preset--font-family--sans);

  /* --- spacing scale, 4px base --- */
  --sp-1:  var(--wp--preset--spacing--10);
  --sp-2:  var(--wp--preset--spacing--20);
  --sp-3:  var(--wp--preset--spacing--30);
  --sp-4:  var(--wp--preset--spacing--40);
  --sp-5:  var(--wp--preset--spacing--50);
  --sp-6:  var(--wp--preset--spacing--60);
  --sp-7:  var(--wp--preset--spacing--70);
  --sp-8:  var(--wp--preset--spacing--80);
  --sp-9:  var(--wp--preset--spacing--90);

  /* --- layout --- */
  --ll-container: 1200px;
  --ll-measure:   41rem;   /* ~68 characters at 18px Inter */
  --ll-column:    760px;   /* article column; images run to this width */
  --ll-sidebar:   280px;
  --ll-gutter:    20px;
  --ll-gutter-lg: 32px;

  /* --- the one radius on the site, on buttons and inputs only --- */
  --ll-radius: 2px;

  /* --- type scale, mobile first. See the media queries in base.css --- */
  --fs-label:  11px;
  --fs-meta:   13px;
  --fs-small:  14.5px;
  --fs-body:   17px;
  --fs-dek:    18px;
  --fs-h3:     18px;
  --fs-h2:     23px;
  --fs-h1:     32px;
  --fs-pull:   22px;
}