/*
 * WP Bulk Replace — the design tokens, as the only place a value is spelled.
 *
 * THIS FILE IS `platform/static/wpbr/css/wpbr-tokens.css` FROM `bsmaha/wp-bulk-replace`,
 * copied whole, plus one marketing block at the end. It is a copy because the
 * three surfaces are two runtimes — WordPress here, Django for `help.` and
 * `account.` — and a stylesheet cannot be shared across them. Every value above
 * the marketing block is that file's, unchanged; a divergence is drift, not a
 * decision, and `tests/provenance.php` is what says so.
 *
 * The header below is that file's own, kept because its reasoning is still the
 * reasoning. Note that it names THIS theme as its source of truth: the tokens
 * were audited out of `style.css` at `cc8b866`, and this file brings them home
 * with the derivations the platform made in the meantime.
 *
 * THE THEME IS A ONE-PAGE LAUNCH SITE, so there are things it does not state: it
 * has no navigation, no cards, no buttons, no form controls and no tables. Those
 * are derived here from the primitives it does state, and each derivation says so
 * in a comment. `docs/WPBR-UI-REUSE-AUDIT.md` §0.6 lists them together.
 *
 * NOTHING BELOW IS A COLOUR SOMEBODY PICKED HERE. A hex literal in a component or
 * 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 two runtimes.
 * `core/tests/test_design_system.py` fails if a literal appears outside `:root`.
 */
:root {
  /* --- palette: the theme's `:root`, names and values unchanged ------------
   * Renamed from this file's earlier `--wpbr-electric-blue` / `--wpbr-ink-navy`
   * / `--wpbr-ice-blue` / `--wpbr-accent` to match. Two names for one colour
   * across two runtimes is exactly the drift these tokens exist to prevent. */
  --wpbr-blue: #006DF5;
  --wpbr-azure: #309FFD;
  --wpbr-ice: #8DC9FD;
  --wpbr-navy: #122746;
  --wpbr-mist: #EAF4FF;
  /* accent only: never a heading, never a primary action, never a surface */
  --wpbr-violet: #6D7CFF;
  --wpbr-white: #FFFFFF;
  --wpbr-muted: #62728A;

  /* --- the theme's six unnamed literals, given names ----------------------
   * `style.css` uses these outside its own `:root`. The values are its; only the
   * names are new, so that nothing here has to repeat a hex. */
  --wpbr-blue-dark: #0057C7;      /* .contact-link:hover */
  --wpbr-wordmark-wp: #61718A;    /* .brand-wp — the recessive half of the name */
  --wpbr-text-chip: #4C6280;      /* .launch-status */
  --wpbr-text-faint: #8794A7;     /* .launch-footer */
  --wpbr-ground-mid: #F7FBFF;     /* body gradient, 54% */
  --wpbr-ground-end: #EDF6FF;     /* body gradient, 100% */

  /* --- functional colours, which the brand does not have -------------------
   * DERIVED. The palette is blue, navy and one violet accent: there is no green,
   * no amber and no red in it, and an error rendered in brand blue is not an
   * error. These three are functional rather than brand colours, are used only
   * to carry a state, and each clears 4.5:1 on a white surface. */
  --wpbr-ok: #1F7A4D;
  --wpbr-warn: #8A5A00;
  --wpbr-error: #B3261E;

  /* --- roles, so a component names what it is for ------------------------- */
  --wpbr-text: var(--wpbr-navy);
  --wpbr-text-soft: var(--wpbr-muted);
  --wpbr-link: var(--wpbr-blue);
  --wpbr-link-hover: var(--wpbr-blue-dark);
  --wpbr-surface: var(--wpbr-white);
  --wpbr-surface-tint: var(--wpbr-mist);
  /* The card ground. `.launch-status` is translucent white over the page
   * gradient, and a card is that recipe at a larger scale. */
  --wpbr-surface-raised: rgba(255, 255, 255, .76);
  --wpbr-rule: rgba(0, 109, 245, .14);        /* .launch-status border */
  --wpbr-rule-soft: rgba(18, 39, 70, .10);    /* DERIVED: the same hairline, neutral */
  --wpbr-on-navy: var(--wpbr-mist);
  --wpbr-on-navy-soft: var(--wpbr-ice);

  /* --- the page ground ----------------------------------------------------
   * The theme's `body` verbatim: ice top-left, violet bottom-right, over a 145°
   * ramp. The launch page's decorative glow rings and grid overlay are hero
   * furniture and are not brought to a page carrying an article. */
  --wpbr-ground:
    radial-gradient(circle at 15% 10%, rgba(141, 201, 253, .26), transparent 34rem),
    radial-gradient(circle at 88% 85%, rgba(109, 124, 255, .11), transparent 31rem),
    linear-gradient(145deg, var(--wpbr-white) 0%, var(--wpbr-ground-mid) 54%, var(--wpbr-ground-end) 100%);

  /* --- type ---------------------------------------------------------------
   * The theme's stack, unchanged. It does NOT use Inter: `banner.svg` asks for
   * Inter because it is a static raster rendered once for a WordPress.org
   * listing, and the rendered site is the product people look at. No webfont is
   * fetched and no binary is committed. */
  --wpbr-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;
  /* Monospace ONLY where the content is literally a machine string: a support
   * reference, a `WPBR-D-` diagnostics code, a path. Not a label treatment. */
  --wpbr-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas,
                    "Liberation Mono", monospace;

  --wpbr-text-xs: 12px;                        /* .launch-footer */
  --wpbr-text-sm: 13px;                        /* .launch-status */
  --wpbr-text-base: 15px;                      /* .launch-note, .contact-link */
  --wpbr-text-md: 17px;                        /* the lede's narrow size */
  --wpbr-text-lede: clamp(17px, 2.1vw, 20px);  /* .launch-copy */
  --wpbr-text-wordmark: 25px;                  /* .brand-name */
  --wpbr-text-hero: clamp(42px, 7vw, 72px);    /* h1 */
  /* DERIVED: the hero treatment stepped down for interior pages. A Help article
   * is not a launch hero, and 72px above a paragraph of troubleshooting is not
   * the same design used consistently. */
  --wpbr-text-h1: clamp(28px, 3.4vw, 40px);
  --wpbr-text-h2: 22px;
  --wpbr-text-h3: 18px;

  /* The theme's weights, taken as found. 650 is its semibold and 750/760 its
   * bold; 600 and 700 do not appear in it. */
  --wpbr-weight-light: 500;
  --wpbr-weight-semi: 650;
  --wpbr-weight-bold: 750;
  --wpbr-weight-display: 760;

  --wpbr-leading-hero: .99;
  --wpbr-leading-body: 1.65;      /* .launch-copy */
  --wpbr-leading-tight: 1.58;     /* .launch-copy, narrow */
  --wpbr-tracking-hero: -.055em;
  --wpbr-tracking-wordmark: -.035em;
  --wpbr-tracking-chip: .02em;
  --wpbr-tracking-fine: .01em;

  /* 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;

  /* --- space --------------------------------------------------------------
   * The steps are the theme's own spacing values rather than a tidy 8px ramp:
   * 13 is the chip's horizontal padding, 17 the gap under the mark, 24 the page
   * gutter, 48 its top padding. */
  --wpbr-space-1: 4px;
  --wpbr-space-2: 8px;
  --wpbr-space-3: 13px;
  --wpbr-space-4: 17px;
  --wpbr-space-5: 24px;
  --wpbr-space-6: 28px;
  --wpbr-space-7: 34px;
  --wpbr-space-8: 48px;
  --wpbr-space-9: 70px;

  /* --- shape --------------------------------------------------------------
   * The theme's vocabulary: 999px on the chip, the glows and the dot ring; 50%
   * on the dot; 4px on the focus outline. There is not a square corner in it. */
  --wpbr-radius-pill: 999px;
  --wpbr-radius-xs: 4px;
  /* DERIVED, and the one value with no precedent between 4px and 999px: the
   * theme has no card because a launch page has none. It is a token precisely so
   * the theme can settle it later with one edit rather than a rewrite. */
  --wpbr-radius-md: 12px;

  /* --- elevation ----------------------------------------------------------
   * Two shadows, both the theme's, and the split is deliberate: navy at 4% lifts
   * a surface, blue at 12% lifts a brand object. */
  --wpbr-shadow-raised: 0 4px 20px rgba(18, 39, 70, .04);
  --wpbr-shadow-mark: 0 14px 28px rgba(0, 109, 245, .12);

  /* --- motion -------------------------------------------------------------
   * `.contact-link`'s transition. Everything that moves uses this, so nothing
   * moves at its own speed. */
  --wpbr-dur: .16s;
  --wpbr-ease: ease;

  /* --- focus --------------------------------------------------------------
   * THE SHAPE IS THE THEME'S AND THE COLOUR IS NOT, which is the one value this
   * platform overrides. `style.css` draws the ring as
   * `rgba(0, 109, 245, .22)`, which composites to #C7DFFD — 1.36:1 against
   * white, where WCAG 2.2 §2.4.13 wants 3:1. No alpha clears it: .50 gives
   * 2.10, .70 gives 2.91, and only the solid blue reaches 4.66. So the width,
   * the offset and the radius are taken exactly and the ring is opaque.
   *
   * The launch page has one focusable element. A help centre and an account
   * portal have hundreds, which is why this is worth overriding rather than
   * inheriting. */
  --wpbr-focus-width: 3px;
  --wpbr-focus-offset: 5px;
  --wpbr-focus-color: var(--wpbr-blue);

  /* The 44px touch floor. The theme has no opinion — one link on one page — so
   * this comes from the Help/Account side unopposed. */
  --wpbr-target: 44px;
  /* The floor for navigation that is a list of links rather than a control -
   * the footer's columns. WCAG 2.2 2.5.8 sets 24px; 44px there would turn each
   * column into a ladder. */
  --wpbr-target-secondary: 24px;

  /* --- layout -------------------------------------------------------------
   * ONE BRAND TIER, at the theme's 600px. A second, wider tier exists for the
   * article rail only: a 260px rail cannot sit beside a 68ch measure at 600px,
   * which is a layout constraint rather than a second brand decision. Media
   * queries cannot read custom properties, so these are recorded here and
   * written literally at each `@media` — the comment is the link between them. */
  --wpbr-tier-narrow: 600px;
  --wpbr-tier-rail: 900px;
  --wpbr-page-max: 1100px;
  --wpbr-gutter: var(--wpbr-space-5);
  --wpbr-rail-width: 260px;

  /* ======================================================================
   * MARKETING ADDITIONS — `docs/MARKETING-SITE-DESIGN-SPEC.md`
   *
   * Everything above is the platform's, name for name. Everything below is
   * what a marketing surface needs and Help and Account do not have: an act
   * rhythm, a price numeral, an eyebrow, a screenshot shadow, and the two
   * type-only colour tokens the spec's §4 measurement forced.
   * ====================================================================== */

  /* --- §4: the two derived type tokens, and why they are not the brief's ---
   * The brief offered `#0068EB` and `#617088` as targets. Both clear 4.5:1 on
   * white AND on mist — but they clear mist at 4.52:1, which is two hundredths
   * of headroom. A ratio that close is one antialiasing change away from
   * failing, so the spec deviates, and neither value is invented: `#0057C7` is
   * already `--wpbr-blue-dark` above, and `#45566C` is the value this very file
   * carried for muted text before it was migrated to the theme's name.
   *
   * THE SPLIT IS THE WHOLE POINT. `--wpbr-blue` and `--wpbr-muted` stay exactly
   * as they are and stay FILL, STROKE AND FOCUS RING ONLY. Type uses the
   * `-type` pair. A component that puts `--wpbr-blue` on a mist ground as text
   * is at 4.19:1 and fails; that is the defect this split exists to make
   * impossible to write by accident. */
  --wpbr-blue-type: #0057C7;      /* 6.59 on white · 5.92 on mist */
  --wpbr-muted-type: #45566C;     /* 7.49 on white · 6.74 on mist */
  /* The brief's accent target, adopted and DELIBERATELY UNUSED: violet carries
   * no surface and no body copy. Defined so the system is complete and so the
   * next person does not re-derive it. Permitted as type at >=24px only. */
  --wpbr-accent-type: #485AFF;    /* 5.02 on white · 4.52 on mist */

  /* --- §2: the sizes a marketing page has and an article does not --------- */
  --wpbr-text-act: clamp(28px, 3.6vw, 40px);     /* act h2 */
  --wpbr-text-eyebrow: 13px;                      /* tracked uppercase sans */
  --wpbr-text-price: clamp(34px, 4vw, 44px);      /* the amount, not a heading */
  --wpbr-text-prose: 18px;                        /* article body only */
  /* The hero headline at the brand tier. The platform's `--wpbr-text-hero`
   * bottoms out at 42px, which overflows 320px viewports at this tracking. */
  --wpbr-text-hero-narrow: clamp(39px, 12vw, 54px);

  /* --- §3: one more space step, and the act's own rhythm ------------------ */
  --wpbr-space-10: 96px;
  --wpbr-act-y: clamp(48px, 7vw, 96px);

  /* Prose surfaces keep the platform's 1100px. Hero and three-up card acts get
   * 1200px — three 260px minimum cards plus two 24px gaps plus gutters do not
   * fit in 1100 without the third card dropping a line. */
  --wpbr-page-max-wide: 1200px;

  /* --- §3: shape and elevation ------------------------------------------- */
  /* Screenshot frames and the hero panel. The platform stops at 12px because it
   * has no object big enough to need more. */
  --wpbr-radius-lg: 16px;
  /* DERIVED from `--wpbr-shadow-raised`'s navy family at a larger scale. Blue
   * at 12% stays reserved for the mark, so a screenshot must not borrow it. */
  --wpbr-shadow-screen: 0 24px 60px rgba(18, 39, 70, .10), 0 2px 6px rgba(18, 39, 70, .05);

  /* --- §3: the layout tier the platform has no use for -------------------- */
  /* 900px is the platform's `--wpbr-tier-rail` and does double duty here as the
   * layout tier. 1200px is the container ceiling. Recorded as tokens and
   * written literally at each `@media`, because media queries cannot read a
   * custom property — the comment is the link between them. */
  --wpbr-tier-wide: 1200px;
}