/*
 * WP Bulk Replace — the settled palette, as the only place it is spelled.
 *
 * THE VALUES ARE PRODUCT DECISIONS, not a theme somebody picked here. Identity is
 * blue and ink; the cool violet is an accent and never a second brand colour. WP
 * must not visually dominate the product name in the wordmark, which is a
 * typographic rule rather than a colour one but belongs recorded beside it.
 *
 * EVERY COLOUR USED ANYWHERE IS A TOKEN. A hex literal in a template is a colour
 * nobody can find when the palette changes, and the reason this file exists is
 * that the marketing site (WordPress), the Help Centre and the account portal all
 * have to look like one product while being three different runtimes.
 */
:root {
  /* identity */
  --wpbr-electric-blue: #006DF5;
  --wpbr-azure: #309FFD;
  --wpbr-ice-blue: #8DC9FD;
  --wpbr-ink-navy: #122746;
  --wpbr-mist: #EAF4FF;
  /* accent only: never a heading, never a primary action */
  --wpbr-accent: #6D7CFF;

  --wpbr-white: #FFFFFF;
  --wpbr-rule: #D7E3F2;

  /* roles, so a component names what it is for rather than which blue it wants */
  --wpbr-text: var(--wpbr-ink-navy);
  --wpbr-text-muted: #45566C;
  --wpbr-link: var(--wpbr-electric-blue);
  --wpbr-surface: var(--wpbr-white);
  --wpbr-surface-tint: var(--wpbr-mist);

  /* One measure, so prose does not run to the width of the window. 68 characters
   * is the readable ceiling, and a Help article is the surface that needs it
   * most. */
  --wpbr-measure: 68ch;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--wpbr-surface);
  color: var(--wpbr-text);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
}

a { color: var(--wpbr-link); }

.wpbr-shell { max-width: 960px; margin: 0 auto; padding: 0 16px; }
.wpbr-prose { max-width: var(--wpbr-measure); }

.wpbr-masthead {
  border-bottom: 1px solid var(--wpbr-rule);
  background: var(--wpbr-surface-tint);
  padding: 12px 0;
}
.wpbr-masthead a { text-decoration: none; font-weight: 600; }

.wpbr-footer {
  border-top: 1px solid var(--wpbr-rule);
  margin-top: 48px;
  padding: 24px 0;
  color: var(--wpbr-text-muted);
  font-size: 14px;
}
