skills/surveyor/brand-tokens.css

/* ============================================================================
   OpenLaws brand tokens — for surveyor research-log & answer widgets
   ----------------------------------------------------------------------------
   HOW TO USE: paste this :root block at the top of every widget's <style>, then
   style with the --ol-* variables instead of raw hex. This is the single source
   of truth for the palette — change a color here, not in individual widgets.

   HYBRID THEMING (deliberate):
     • ACCENTS are brand-locked to OpenLaws (extracted from openlaws.us) — use
       them for FILLS, BORDERS, and timeline nodes only.
     • ACCENT TEXT gets the --ol-*-text variants: each mixes the brand hue with
       the host-following ink, so text stays legible on light AND dark chat
       surfaces while keeping the brand hue. Never set a raw accent as the color
       of text or an icon — on a dark surface the raw accents are dark-on-dark
       (the 2026-07-16 review's faint "High" label + citation links).
     • STRUCTURE (ink / muted / surface / border) is host-following: each chains
       to the visualizer's own theme token with a brand hex as fallback, so the
       widget stays legible on BOTH light and dark chat surfaces. Do not replace
       these with hard hex unless you also add a prefers-color-scheme dark variant.
     • CARD FILLS (-soft) always color-mix over TRANSPARENT — never a hard light
       hex, which reads as a glowing white box on a dark surface.

   SEMANTIC MAPPING (research-log widget):
     • research-action step + its timeline node ...... --ol-action
     • disclosed-limit / coverage-boundary step ...... --ol-limit
     • citation link .................................. --ol-cite
     • confidence band: high / verified .............. --ol-high
     • confidence band: flagged / medium ............. --ol-flagged
     • confidence band: low / refusal ................ --ol-low

   PALETTE CONSTRAINT (read before adding a color): OpenLaws has effectively two
   saturated hues — maroon and sage green — plus warm neutrals. There is no
   native amber/caution hue. "Flagged/medium" therefore uses the rose accent
   (--ol-flagged, #a5405a), which sits close to the maroon action color; if that
   proximity is a problem in a given widget, distinguish flagged by TREATMENT
   (dashed outline vs. solid fill) rather than introducing a new hue. Do not
   invent an ochre and pass it off as a brand token — if a derived color is ever
   needed, comment it explicitly as NOT extracted from the brand.

   CONFIRMED COLLISION, not just proximity: --ol-low is the SAME hex as --ol-action
   and --ol-cite (#86283e) — a low-confidence entry, a research-action step, and a
   citation link are visually identical by hue alone if you only vary fill color.
   Same fix as above (treatment, not a new hue): give the low-confidence entry a
   distinct TREATMENT in the confidence card — e.g. a solid left-border bar plus an
   icon (⚠ or similar), not just the --ol-low fill — so it reads as distinct from
   action/cite even at a glance, in both light and dark surfaces.

   --ol-limit (#9d7e6c, deep taupe) is a lower-contrast color than the other accents
   — usable for a border, icon, or chip fill, but do not set it as the TEXT color of
   a limit/disclosed-limit label; pair it with --ol-ink (or --ol-limit-soft as a
   background under --ol-ink text) so limit entries stay readable, especially on a
   light surface.
   ============================================================================ */

:root {
  /* --- Accents: brand-locked (OpenLaws) — for FILLS, BORDERS, timeline nodes --- */
  --ol-action:        #86283e;  /* deep maroon — research action / primary accent / focus */
  --ol-action-strong: #691b2d;  /* hover / active */
  --ol-cite:          #86283e;  /* citation links — as TEXT, use --ol-cite-text below */
  --ol-limit:         #9d7e6c;  /* deep taupe — disclosed limit / coverage boundary */
  --ol-high:          #3a5b4d;  /* deep sage green — confidence: high (verified) */
  --ol-flagged:       #a5405a;  /* rose — confidence: flagged / medium (see constraint above) */
  --ol-low:           #86283e;  /* maroon — confidence: low / refusal */

  /* --- Accent TEXT variants: use these whenever an accent colors text or an
     icon sitting on the chat surface or on a -soft card fill. Each mixes the
     brand hue with the host-following ink, so it self-adjusts: on a light
     surface (dark ink) it deepens toward the brand color; on a dark surface
     (light ink) it lightens into a legible tint of the SAME hue. This is the
     dark-mode fix (2026-07-16 review): the raw accents above are dark colors,
     and used directly as text on a dark chat surface they all but vanish —
     the "High" label and citation links in the review screenshots. The mixed
     values are derived from brand hues, NOT new brand colors. --- */
  --ol-action-text:   color-mix(in srgb, var(--ol-action)  55%, var(--ol-ink));
  --ol-cite-text:     color-mix(in srgb, var(--ol-cite)    55%, var(--ol-ink));
  --ol-limit-text:    color-mix(in srgb, var(--ol-limit)   55%, var(--ol-ink));
  --ol-high-text:     color-mix(in srgb, var(--ol-high)    55%, var(--ol-ink));
  --ol-flagged-text:  color-mix(in srgb, var(--ol-flagged) 55%, var(--ol-ink));
  --ol-low-text:      color-mix(in srgb, var(--ol-low)     55%, var(--ol-ink));

  /* soft tints for chip and card fills — ALL mix over transparent so the host
     surface shows through and the fill works on light AND dark chat surfaces.
     (2026-07-16 review fix: --ol-action-soft was a hard light-pink hex, and
     --ol-low-soft didn't exist — so the low/"Unverified" confidence card
     rendered as a near-white box on a dark surface, with the host's near-white
     ink on top of it: invisible. Never use a hard light hex as a card fill.) */
  --ol-action-soft:   color-mix(in srgb, var(--ol-action)  12%, transparent);
  --ol-high-soft:     color-mix(in srgb, var(--ol-high)    12%, transparent);
  --ol-limit-soft:    color-mix(in srgb, var(--ol-limit)   14%, transparent);
  --ol-flagged-soft:  color-mix(in srgb, var(--ol-flagged) 12%, transparent);
  --ol-low-soft:      color-mix(in srgb, var(--ol-low)     12%, transparent);

  /* --- Structure: host-following, brand fallback (keeps light/dark legible) --- */
  --ol-ink:     var(--text-primary,      #111827);
  --ol-muted:   var(--text-secondary,    #6b7280);
  --ol-surface: var(--surface-secondary, #f9f7f6);
  --ol-border:  var(--border-color,      #e7e1da);

  /* --- Secondary palette (illustration / optional emphasis; not core UI) --- */
  --ol-green-mid:   #4d7a66;
  --ol-green-light: #99bda8;
  --ol-sand:        #d6c8b5;
  --ol-parchment:   #f9f7f6;
}