/* Design tokens.
 *
 * Lifted verbatim from the `:root` block in site-shell.css / landing-page.css,
 * which is where this project's token system already lived. The blog could not
 * reach it: article pages render BlogHeader rather than SiteHeader, so they
 * never link site-shell.css, and three separate blog files had each grown their
 * own near-copy under a `--fp-*` prefix — with drifted values (muted was
 * #6b7280 at 4.83:1 instead of #686f7d at 5.04:1, and the card/border pair was
 * declared three times).
 *
 * Loaded by BlogLayout for article pages. The blog index does NOT link this
 * file: it renders SiteHeader, which already brings site-shell.css and these
 * same tokens with it. So no page pays for the block twice.
 *
 * If a value here changes, change it in site-shell.css and landing-page.css
 * too — those two still carry their own copies, and unifying all three is a
 * site-wide job rather than a blog one.
 */

:root {
  --color-primary: #B83376;
  --color-accent: #a81e63;
  --color-accent-hover: #8a1850;
  --color-background: #fffcfd;  /* barely-there rose tint — near-white */
  --color-card: #ffffff;
  --color-text: #1a1a1a;
  --color-text-muted: #686f7d;   /* 5.04:1 white · 4.94:1 rose canvas · 4.78:1 panel tint */
  --color-border: #e5e5e0;
  --color-red: #dc2626;
  --color-orange: #ea580c;

  /* Status roles are split by CONTRAST, not by hue. The base value is a
     graphic — fills, dots, chart series, chip backgrounds. The -text value is
     the one that is safe to set as `color:`. Measured on white:
       #22c55e 2.28:1  · #15803d 5.02:1
       #ef4444 3.76:1  · #dc2626 4.83:1
     Four different greens used to mean "good"; two of them failed AA as text. */
  --color-success: #22c55e;         /* graphic only — never `color:` */
  --color-success-text: #147739;    /* 5.63:1 on white, 4.81:1 on the green chip */
  --color-danger: #cd2323;          /* 5.45:1 on white, 4.83:1 on the red chip */
  --color-danger-graphic: #ef4444;  /* 3.76:1 — fills and large marks only */
  --color-warning-text: #b74509;    /* 5.46:1 on white, 4.82:1 on the amber chip */
  --color-info: #1d4ed8;            /* 6.70:1 */

  /* Third-party brand marks. NOT semantic — never reuse these for status,
     or "success" quietly becomes "WhatsApp". */
  --brand-whatsapp: #25d366;

  /* Brand pinks, role-split: --color-primary is identity (large fills, the
     logo's own pink); --color-accent is interaction (links, inline emphasis,
     small text) and carries the higher contrast. Both pass AA as text. */
  --font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Vertical rhythm. Three tiers, not one repeated value: the page was running
     80px between every section and 48px on every title, so nothing led. */
  --space-section: 80px;         /* body — supporting argument */
  --space-section-peak: 120px;   /* decision moments: offer, price, act */
  --space-section-quiet: 56px;   /* scannable indexes, not arguments */

  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* ── Brand tints ──────────────────────────────────────────────────────────
     The blog wrote the brand pink as a literal `rgba(184,51,118,…)` 36 times,
     at twenty different alphas across two hues — .03 .04 .05 .055 .06 .07 .08
     .09 .1 .15 .28 .3 .4 .42 .45 and more. That is not a scale, it is drift:
     a chip background was .06 in one file and .08 in the next for no reason a
     reader could name, and changing the brand colour meant a find-and-replace.

     Four roles cover every one of those uses. Collapsing the near-duplicates
     is deliberate — at these alphas the difference between .06 and .07 over
     white is under one percent of luminance, and a named role is worth more
     than an accidental gradient of them.

     The `-rgb` triplets exist so a one-off alpha can still be composed
     (`rgb(var(--color-primary-rgb) / .5)`) without re-hardcoding the hue. */
  --color-primary-rgb: 184 51 118;
  --color-accent-rgb: 168 30 99;

  --tint-wash:     rgb(184 51 118 / 0.04);  /* faintest surface: section wash, row stripe */
  --tint-surface:  rgb(184 51 118 / 0.07);  /* chip fill, active pill, hover fill */
  --tint-hairline: rgb(184 51 118 / 0.08);  /* faint rules and borders at rest */
  --tint-edge:     rgb(184 51 118 / 0.30);  /* interactive border on hover/focus */

  /* The lifted-button glow. Was .42/.45/.4 in three places. */
  --shadow-brand: 0 8px 28px rgb(184 51 118 / 0.42);
}