/* HexDigest brand tokens — SINGLE SOURCE OF TRUTH.
 *
 * Do not edit the copies. `scripts/sync-brand.sh` writes this file to:
 *   hub/brand-tokens.css                          (linked by the static hub)
 *   platforms/gumroad/web/src/styles/tokens.css   (bundled by Astro)
 *
 * Palette is derived from the logo mark (brand/logo-mark.svg). Every text pair
 * below is >= 4.5:1 against its intended ground; the ratios are in the comments
 * and are re-checked by the contrast step in the design plan's verification.
 */

:root {
  color-scheme: dark;

  /* --- ground ------------------------------------------------------------ */
  /* Neutrals carry a slight green cast so the mark reads as part of the page
   * rather than pasted onto it. */
  --bg: #0c100e;
  --card: #141a16;
  --card-raised: #1a221d;
  --border: #232d26;
  --border-strong: #5f6b62; /* interactive edges — 3.44:1 on --bg */

  --fg: #e6e9e6; /* 15.66:1 on --bg */
  --muted: #97a49b; /*  7.39:1 on --bg,  6.81:1 on --card */

  /* --- brand ------------------------------------------------------------- */
  /* Three greens lifted from the mark, each with one job. Reaching for the
   * wrong one is how contrast regressions get in. */
  --accent: #27a451; /* links + small text on dark — 5.94:1 on --bg */
  --accent-bright: #6eb642; /* CTA fill; pair with --bg as the label — 7.69:1 */
  --accent-deep: #088552; /* deep fill; pair with #fff as the label — 4.68:1 */
  --accent-pale: #b6e1c7; /* pale highlight from the mark — 13.31:1 on --bg */

  /* Ambient depth only. Never on text: gradient-clipped headings were the
   * template tell this pass exists to remove. */
  --hero-glow: radial-gradient(60% 50% at 50% 0%, rgba(39, 164, 81, 0.16), transparent);

  /* --- data ------------------------------------------------------------- */
  /* Positive movement reuses the brand green; negative needs a hue that is
   * unmistakably not-brand at a glance in a dense table. */
  --up: #6eb642; /* 7.69:1 on --bg */
  --down: #e8705e; /* 6.30:1 on --bg */

  /* Text selection. The browser default is a saturated blue that fights the
   * green palette wherever a reader drags across a table. This is --accent at
   * low alpha, which reads as a soft green wash and keeps the selected text at
   * ~10:1 against the blended background — i.e. selecting text never makes it
   * harder to read, which is the usual failure of a tinted ::selection. */
  --selection-bg: rgb(39 164 81 / 0.32);

  /* Per-platform tint of the brand mark. The mark is illustrated with gradients
   * and several greens, so it cannot be recoloured by a CSS mask — hue-rotate
   * is the only technique that preserves its internal shading.
   *
   * Default 0deg on purpose: the mark is the one element identical across every
   * subdomain, and that constancy is what makes four sites read as one company.
   * A platform may nudge it, but small — beyond ~15deg it stops looking like a
   * tint and starts looking like a different logo. */
  --mark-hue-shift: 0deg;
  --selection-fg: var(--fg);

  /* --- type -------------------------------------------------------------- */
  --font-display: Georgia, "Times New Roman", serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Major-third scale. Only the display step is fluid — body copy that resizes
   * with the viewport is harder to read, not easier. */
  --step--1: 0.833rem;
  --step-0: 1rem;
  --step-1: 1.2rem;
  --step-2: 1.44rem;
  --step-3: 1.728rem;
  --step-4: clamp(2rem, 1.4rem + 3vw, 3.25rem);

  --leading-tight: 1.15;
  --leading-body: 1.55;
  --tracking-caps: 0.06em;

  /* --- form -------------------------------------------------------------- */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Elevation is a pairing of surface + border, not a shadow ramp. Flat is the
   * default; raised is for things you can act on. */
  --elev-flat: var(--card);
  --elev-raised: var(--card-raised);
  --shadow-raised: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px rgb(0 0 0 / 0.25);

  --maxw: 1080px;
}

/* Applied here rather than in each surface's stylesheet so the site, the hub
 * and every future platform scaffolded from the template inherit it from the
 * one brand file. */
::selection {
  background: var(--selection-bg);
  color: var(--selection-fg);
}

/* Applied to the header mark only; favicons and OG images stay canonical so the
 * brand is unambiguous wherever it appears outside the site. */
.brand img {
  filter: hue-rotate(var(--mark-hue-shift));
}