/* Chain Drain — design tokens
   Values pulled directly from the Figma homepage (node 17:3).
   Keep this as the single source of truth for color / type / spacing so
   the homepage, company pages, and about page all read as one system. */

:root {
  /* ---- color ---- */
  /* Flat gray field, 22% away from white (mesh backdrop hidden). */
  --color-bg: rgb(78% 78% 78%);
  /* The footer bar's grey. A token rather than a literal because the
     technology x phase page paints its whole field this colour to sit flush
     with the bar — two consumers, one value. */
  --color-footer-grey: #d4d4d4;
  --color-ink: #012697;       /* deep blue — all type */
  /* Warm paper tone — the research page's footer bar and the mobile drawer
     sheets share it so the two surfaces read as one. */
  --color-paper: #FDFCE7;

  /* ---- type families ---- */
  --font-display: "Tilt Warp", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ---- chart marks (Figma "Likely Buyers") ---- */
  --chart-fill: #3e1515;    /* solid tick = primary customer (also buttons/CTAs) */
  --chart-outline: #4b2424; /* hollow tick = additional customer */
  --chart-related: #b58f8f; /* same-company ticks lit up on hover (between white & fill) */

  /* Graph data-mark colors — separate from --chart-fill so the tick bars /
     voronoi cells / legend recolor without touching white-on-fill buttons.
     -fill = primary (solid) marks; -fill-2 = secondary (additional) marks. */
  --graph-fill: #0040FF;
  --graph-fill-2: #012697;

  /* Drawer 2×2 mini-matrix — border, crosshair, and labels all share the
     graph's deep blue so the matrix stays in sync with the charts. */
  --mmx-line: var(--graph-fill-2);

  /* ---- Centroid mark on the aggregate 2x2 ----------------------------------
     The weighted centre of the bubbles shown on a chart-label hover. EVERY
     visual property lives here: js/mini-matrix.js does the arithmetic and sets
     left/top, nothing else. Change any of these four and every page that draws
     the widget follows.

     The symbol is a mask, not an image, so --mmx-centroid-color paints it —
     swap the SVG below to change the glyph (keep the stroke opaque; the mask
     reads alpha, so transparent = hidden). Percent-encode <, > and #. */
  --mmx-centroid-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 4 L16 16 M16 4 L4 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --mmx-centroid-size: 20px;
  --mmx-centroid-color: var(--mmx-line);
  --mmx-centroid-opacity: 0.6;

  /* ---- type scale (desktop = Figma; clamped for smaller viewports) ---- */
  --fs-title: clamp(56px, 8vw, 110px);
  --fs-body:  clamp(22px, 2.6vw, 36px);
  /* Graph chrome: bar labels + counts, legends, and filter pills all share one
     small size so the charts read as one system. */
  --fs-chart-label: 12px;

  /* ---- layout grid (Figma: 5 columns, 20px margin, 20px gutter on 1512px) ----
     Derived + verified against geometry: body = cols 1-3 (875px), overlay = 1 col (279px). */
  --grid-cols: 5;
  --margin: 20px;   /* outer margin, left & right */
  --gutter: 20px;   /* gutter between columns */

  /* one column's width relative to the viewport — for fixed/overlay elements
     that sit outside the grid container but must align to a column track. */
  --col: calc((100vw - (2 * var(--margin)) - (4 * var(--gutter))) / 5);

  /* ---- vertical spacing (from Figma) ---- */
  --edge-top: 56px;       /* title top inset */
  --gap-title-body: 72px; /* gap between title block and body */
}

/* ---- base element defaults ----
   Links default to the deep-blue ink so every plain <a> matches the type
   instead of the browser's default link blue. Loaded on every page, so this is
   the single site-wide default; more specific component rules still override. */
a {
  color: var(--color-ink);
}