/* fl-tokens.css -- [fl-scatter-v1] the token contract for every Filter Lab plot.
 * ---------------------------------------------------------------------------
 * fl-scatter.js contains NO colour. Every paint it emits is a var() reference to
 * a name declared here. This file supplies defaults so the layer renders on a
 * bare page; each app overrides the names it needs in its own stylesheet, after
 * this file, and nothing else changes.
 *
 * WHY A CONTRACT RATHER THAN A PALETTE
 * The two surfaces encode the SAME variable -- the turbulence band, Low <
 * Elevated < High < Extreme -- with two different KINDS of palette:
 *
 *   crypto board      ordinal single-hue ramp, reversed for a dark surface,
 *                     already validated against its own panel (#111826):
 *                     monotone lightness, adjacent dL >= 0.06, darkest end
 *                     2.68:1, single hue.
 *   equity screener   categorical green / amber / red / magenta, read as a
 *                     status palette rather than a magnitude ramp.
 *
 * Those are not reconcilable by picking one, and picking one here would be this
 * layer silently repainting a shipped surface. So the layer takes tokens and the
 * apps keep their own answer. See the note at the foot of this file.
 *
 * NAMING
 *   --fl-plot-*    chrome: frame, grid, dividers, surface
 *   --fl-ink-*     text, in three weights. Text NEVER wears a series colour.
 *   --fl-mark-N    the mark slots, 1..8, assigned in fixed order and never cycled
 *   --fl-quad-N    the four quadrant washes, indexed by POSITION not by meaning
 *   --fl-mark-*    mark states: highlight ring, dimmed opacity
 */

:root {
  /* ── chrome ────────────────────────────────────────────────────────────── */
  --fl-plot-surface: #111826;   /* the paper the plot sits on. Used for the 2px
                                   ring that separates overlapping marks, so it
                                   must actually match the container. */
  --fl-plot-frame:   rgba(255, 255, 255, .28);
  --fl-plot-grid:    rgba(255, 255, 255, .07);
  --fl-plot-divider: rgba(255, 255, 255, .28);

  /* ── ink ───────────────────────────────────────────────────────────────── */
  --fl-ink:       rgba(255, 255, 255, .92);
  --fl-ink-soft:  rgba(255, 255, 255, .62);
  --fl-ink-faint: rgba(255, 255, 255, .40);

  /* ── mark slots ────────────────────────────────────────────────────────── */
  /* Default is the crypto board's ordinal ramp: it is the one of the two that
     is correct by construction for an ordered variable, so a consumer that sets
     no tokens at all gets a defensible plot rather than a rainbow. */
  --fl-mark-1: #1c5cab;
  --fl-mark-2: #2a78d6;
  --fl-mark-3: #5598e7;
  --fl-mark-4: #b7d3f6;
  /* Slots 5..8 exist so a categorical consumer has the full fixed order
     available. A 9th series is never a generated hue -- it folds into "Other". */
  --fl-mark-5: #7c8ea4;
  --fl-mark-6: #9aa8ba;
  --fl-mark-7: #b7c1cd;
  --fl-mark-8: #d4dae1;

  /* ── mark states ───────────────────────────────────────────────────────── */
  --fl-mark-ring:        var(--fl-plot-surface);
  --fl-mark-highlight:   var(--fl-ink);
  --fl-mark-opacity:     .72;   /* nothing filtered out */
  --fl-mark-opacity-on:  .95;   /* passes the current filter, some do not */
  --fl-mark-opacity-off: .10;   /* filtered out, kept visible as context */

  /* ── quadrant washes, indexed by position ──────────────────────────────── */
  /* top-left, top-right, bottom-left, bottom-right. Indexed by POSITION, never
     by zone name: the two surfaces put different zones in different corners, and
     a token called --fl-quad-quiet would be wrong on one of them. */
  --fl-quad-tl: rgba(57, 135, 229, .105);
  --fl-quad-tr: rgba(230, 103, 103, .065);
  --fl-quad-bl: rgba(57, 135, 229, .055);
  --fl-quad-br: rgba(230, 103, 103, .130);
}

/* ── plot text ───────────────────────────────────────────────────────────── */
/* Set as classes rather than presentation attributes so a consumer can restyle
   type without touching the layer. Sizes are the two surfaces' current values. */
.fl-ax   { fill: var(--fl-ink-soft);  font-size: 12px; letter-spacing: .02em }
.fl-tick { fill: var(--fl-ink-faint); font-size: 11px; font-variant-numeric: tabular-nums }
.fl-zone { fill: var(--fl-ink-soft);  font-size: 12px; font-weight: 600 }
.fl-zone-sub { fill: var(--fl-ink-faint); font-size: 10.5px }
.fl-label { fill: var(--fl-ink); font-size: 11.5px; font-weight: 600 }

.fl-plot { display: block; width: 100%; height: auto; overflow: visible }
.fl-dot  { transition: r .12s ease }

/* Marks are the only thing that carries a series colour. Everything textual
   above wears ink. A legend chip is a mark, so it may. */
.fl-legend { display: flex; flex-wrap: wrap; gap: .35rem 1rem; align-items: center;
             font-size: .78rem; color: var(--fl-ink-soft) }
.fl-legend-group { font-size: .68rem; letter-spacing: .08em; color: var(--fl-ink-faint) }
.fl-legend-key { display: inline-flex; align-items: center; gap: .38rem }
.fl-legend-key i { width: 10px; height: 10px; border-radius: 50%; display: inline-block }

/* Disclosure of what is NOT on the plot. House rule: an exclusion is stated, not
   hidden, so this is part of the component rather than something a caller may
   forget to render. */
.fl-note { font-size: .78rem; color: var(--fl-ink-faint); margin-top: .5rem }

/* ── forced-colors / print ───────────────────────────────────────────────── */
/* Colour is never the only cue in a forced-colors context: the layer's marks
   fall back to the system mark colour and the caller's legend text carries
   identity. */
@media (forced-colors: active) {
  .fl-dot { fill: CanvasText !important; }
  .fl-plot rect[data-fl-quad] { fill: transparent !important; }
}

/*
 * OPEN, AND NOT DECIDED BY THIS FILE
 * ----------------------------------
 * `band` is an ORDERED variable and the equity screener paints it with a
 * categorical green/amber/red/magenta set. Run against a dark surface, that set
 * passes CVD separation (worst adjacent pair dE 8.9 protan) and normal-vision
 * separation (19.8) but fails the lightness band, with green at 0.696 and amber
 * at 0.769 sitting well above it. It is legible; it is not a magnitude ramp, and
 * a reader cannot tell from the colours alone that Extreme is more of the thing
 * than Low.
 *
 * Whether the equity band scale should become an ordinal ramp like crypto's is a
 * product decision about a shipped surface, not a refactor, so this layer does
 * not make it. It only makes it possible: change --fl-mark-1..4 in the equity
 * app and every plot in it moves together.
 */