/* ══════════════════════════════════════════════════════════════
   REACTLIVE COLOUR  ·  /colors.css
   Prefix: --rlc-   (ReactLive Colour)

   The product's single colour source of truth. Every other system —
   the kit (surface.css), the Spark skin (spark.css), the consoles,
   the marketing site — reads THROUGH these tokens and defines no
   hexes of its own.

   Source: the Event Console design ("Event console — two clearer
   versions", variant 1b). Every value in §1 was read out of that
   file's markup, not transcribed by eye. It is a HeroUI-family
   palette: Tailwind zinc for the neutrals, HeroUI blue #006FEE for
   the primary, HeroUI success / warning / danger for the status set.

   The rule the palette is built on:

     ONE accent — #006FEE — carries every affordance: the active
     nav row, the primary button, the poll fill, the badge. The
     neutrals are zinc and do NOT invert; dark is the design's
     native mode and light is its mirror.

   Consequences worth stating once, because every downstream file
   depends on them:

     · The accent is a FILL first. On the dark ground #006FEE runs
       3.4:1 against #111114, so it may not carry small text there.
       `--rlc-primary-text` is the step that may (#66AAF9 on dark,
       #005BC4 on light). Fills, icon strokes, bars and 1px rules
       use `--rlc-primary`; labels use `--rlc-primary-text`.
     · Surfaces step, they do not jump — but they have to step far
       enough to SEE. Dark runs canvas #121215 → panel #1F1F24 →
       control #2A2A31 → raised #34343C → hover #3D3D46, strictly
       ascending. The design's own values (#060607 → #111114, 1.07:1)
       were lifted after they read as one black slab on a real screen;
       see §2 for the measurements.
     · Panels carry a hairline on dark (#3A3A43, 1.46:1 against the
       panel). A near-black ground step alone is too small for the eye
       to trust; the edge is what actually separates a card from the
       page, as it does in every dark UI that reads well.
     · Status colours are reserved. Nothing decorative may use them.
     · The three agents keep three hues, but they are now HeroUI /
       Tailwind steps rather than a separate neon family — see the
       Agents block in §1 for why Protect moved to cyan.

   ── Structure ──────────────────────────────────────────────────
     §1  Ramps          literal steps, identical in both themes
     §2  Semantics · dark    :root, :root[data-skin="spark"]
     §3  Semantics · light   :root[data-skin="spark-light"]

   §1 is what you reach for when you need a specific step. §2/§3 are
   what components should actually use: the ROLE resolves itself per
   theme, so a rule written once is correct in both.

   ── Theme axis ─────────────────────────────────────────────────
   Dark/light rides on `data-skin`, the same axis skin.js already
   stamps on <html> at parse time ('spark' = dark, 'spark-light' =
   light). `data-theme` is untouched — that stays the kit's own
   light-only axis, which surface.js overwrites on load regardless.

   Bare `:root` carries the dark set as well, so a page that never
   runs skin.js (the marketing site, a standalone export) still gets
   a complete, coherent palette instead of undefined variables.

   ── The -rgb pairs ─────────────────────────────────────────────
   Space-separated triplets for `rgb(var(--x) / .14)` washes. They
   are literals and cannot be derived from the hex, so any change to
   a colour has to move BOTH lines. Only the roles that are actually
   washed carry one.

   Load FIRST — before surface.css — so everything downstream can
   read these.
   ══════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════
   §1 · RAMPS — theme-independent
   The raw material. These never change between dark and light;
   which STEP a role picks is what changes, in §2 and §3.
   ══════════════════════════════════════════════════════════════ */

:root {

  /* ── Zinc · 0 → 900 ────────────────────────────────────────────
     Tailwind zinc, which is what the design's neutrals are. The
     named steps below 700 are the design's own grounds and do not
     exist in Tailwind — dark needs six tiers between #26262B and
     #060607 where zinc offers two, so the gaps are filled here
     rather than approximated with the nearest stock step. */
  --rlc-zinc-0:    #FFFFFF;
  --rlc-zinc-25:   #ECEDEE;   /* dark-theme ink — the design's foreground */
  --rlc-zinc-50:   #FAFAFA;
  --rlc-zinc-100:  #F4F4F5;
  --rlc-zinc-200:  #E4E4E7;
  --rlc-zinc-300:  #D4D4D8;
  --rlc-zinc-400:  #A1A1AA;
  --rlc-zinc-500:  #71717A;
  --rlc-zinc-600:  #52525B;
  --rlc-zinc-700:  #3F3F46;
  --rlc-zinc-800:  #34343C;
  --rlc-zinc-900:  #1F1F24;   /* the dark panel */

  /* Off-ramp zinc. Each is a role the 0→900 steps cannot serve,
     kept here rather than inlined so the two themes reference one
     value instead of repeating a hex.

     -mid, -mute and -faint are the dark theme's secondary, muted and
     faint ink. They sit between the stock steps because the dark
     panel needs them to: stock 500 (#71717A) measured 3.90:1 on it,
     under AA for the timestamps and meta it carries. -mute clears
     4.80, -mid 5.96, -faint 3.11 (eyebrows and large caps only).
     -rule is the control ground, -edge the panel hairline, -lift
     the hover step. -void is the canvas and -shell the frame that
     rings it. -well and -deep are kept for the few rules that name
     them directly. -dim is disabled ink on light-on-dark marks. */
  --rlc-zinc-mid:   #9B9BA5;
  --rlc-zinc-mute:  #8A8A94;
  --rlc-zinc-faint: #6B6B75;
  --rlc-zinc-lift:  #3D3D46;
  --rlc-zinc-edge:  #3A3A43;
  --rlc-zinc-rule:  #2A2A31;
  --rlc-zinc-well:  #25252B;
  --rlc-zinc-deep:  #222228;
  --rlc-zinc-shell: #17171B;
  --rlc-zinc-void:  #121215;
  --rlc-zinc-dim:   #52525B;

  --rlc-zinc-0-rgb:    255 255 255;
  --rlc-zinc-25-rgb:   236 237 238;
  --rlc-zinc-300-rgb:  212 212 216;
  --rlc-zinc-400-rgb:  161 161 170;
  --rlc-zinc-500-rgb:  113 113 122;
  --rlc-zinc-600-rgb:   82  82  91;
  --rlc-zinc-800-rgb:   52  52  60;
  --rlc-zinc-900-rgb:   31  31  36;

  /* The off-ramp steps that get washed. -rule is the one that earns
     its place: it is the control ground AND the hairline, so it is
     needed at full strength and at alpha in the same stylesheet. */
  --rlc-zinc-rule-rgb:  42  42  49;
  --rlc-zinc-well-rgb:  37  37  43;
  --rlc-zinc-void-rgb:  18  18  21;

  /* ── Primary · HeroUI blue ─────────────────────────────────────
     The single accent. 500 is the design's #006FEE and is the FILL
     in both themes — it does not invert. 300/400 are the steps that
     stay legible as small text on the dark ground; 600/700 are the
     steps that stay legible on paper. Read the note at the top of
     this file before putting 500 on type. */
  --rlc-blue-50:   #E6F1FE;
  --rlc-blue-100:  #CCE3FD;
  --rlc-blue-200:  #99C7FB;
  --rlc-blue-300:  #66AAF9;
  --rlc-blue-400:  #338EF7;
  --rlc-blue-500:  #006FEE;
  --rlc-blue-600:  #005BC4;
  --rlc-blue-700:  #004493;
  --rlc-blue-800:  #002E62;
  --rlc-blue-900:  #001731;

  --rlc-blue-300-rgb:  102 170 249;
  --rlc-blue-500-rgb:    0 111 238;
  --rlc-blue-600-rgb:    0  91 196;

  /* ── Agents ────────────────────────────────────────────────────
     The ReactLive brand: one hue per agent. Where the agent has a logo
     tile (resources/agent-<key>.png — Engage, Answer, Protect, Stream) the
     scale is sampled from its gradient: 500 is the tile's light end, 600
     its deep end, which also clears AA as text on white. 300/400 are
     lighter steps for ink on dark. The tile-less agents take the brand
     sheet's hex as 500 (600 darkened for text where it is too light). The three live agents' hues are also
     the three sparkles beside the orb: blue, orange, purple.

     Engage (orange) sits near the amber warning and Insight (lime) near
     the green success — the brand's choice. The status set stays the
     meaning; an agent's colour only ever labels whose row it is. */

  /* Engage — tile #F56E14 → #E8282D */
  --rlc-engage-300:  #FBA46B;
  --rlc-engage-400:  #F7853F;
  --rlc-engage-500:  #F56E14;
  --rlc-engage-600:  #D4361F;
  --rlc-engage-400-rgb: 247 133  63;
  --rlc-engage-500-rgb: 245 110  20;
  --rlc-engage-600-rgb: 212  54  31;

  /* Answer — tile #0076EC → #003FC7 */
  --rlc-answer-300:  #66AEF5;
  --rlc-answer-400:  #3391F0;
  --rlc-answer-500:  #0076EC;
  --rlc-answer-600:  #0050D2;
  --rlc-answer-400-rgb:  51 145 240;
  --rlc-answer-500-rgb:   0 118 236;
  --rlc-answer-600-rgb:   0  80 210;

  /* Protect — tile #B408D3 → #5302C1 */
  --rlc-protect-300: #D56BE8;
  --rlc-protect-400: #C43ADD;
  --rlc-protect-500: #B408D3;
  --rlc-protect-600: #6903C5;
  --rlc-protect-400-rgb: 196  58 221;
  --rlc-protect-500-rgb: 180   8 211;
  --rlc-protect-600-rgb: 105   3 197;

  /* Stream — tile #E41F25 → #AA072F */
  --rlc-stream-300:  #EF7A7E;
  --rlc-stream-400:  #E94C51;
  --rlc-stream-500:  #E41F25;
  --rlc-stream-600:  #B70C2D;
  --rlc-stream-500-rgb: 228  31  37;

  /* Insight — #9CCB39 */
  --rlc-insight-300: #C4E188;
  --rlc-insight-400: #B0D661;
  --rlc-insight-500: #9CCB39;
  --rlc-insight-600: #5E7F1C;
  --rlc-insight-500-rgb: 156 203  57;

  /* Other — #FFD52A */
  --rlc-other-300:   #FFE680;
  --rlc-other-400:   #FFDD55;
  --rlc-other-500:   #FFD52A;
  --rlc-other-600:   #8A6D00;
  --rlc-other-500-rgb: 255 213  42;

  /* Report — #25292F, and Setup — #D4D8DE: the two neutral tiles. */
  --rlc-report-500:  #25292F;
  --rlc-setup-500:   #D4D8DE;

  /* The tiles' own gradients, as CSS (v10.09 §5) — the endpoints in the
     comments above each agent, at the angle the tiles run (light end top
     left). For small marks that should read as the agent's tile without
     being its logo: the activity feed's 26px circles. `person` is the same
     treatment in zinc, for rows a person did — a lift without a hue, since
     colour on a mark still means an agent. */
  --rlc-engage-grad:  linear-gradient(135deg, #F56E14 0%, #E8282D 100%);
  --rlc-answer-grad:  linear-gradient(135deg, #0076EC 0%, #003FC7 100%);
  --rlc-protect-grad: linear-gradient(135deg, #B408D3 0%, #5302C1 100%);
  --rlc-person-grad:  linear-gradient(135deg, var(--rlc-zinc-500) 0%, var(--rlc-zinc-700) 100%);

  /* ── Status hues ───────────────────────────────────────────────
     HeroUI's own status set. Two steps each, one per theme, both
     measured against their own ground. #17C964 and #F5A524 are the
     design's literal values — the wall toggles and the Reconnecting
     chip. Neutral and disabled are zinc steps, aliased here only so
     the status set reads as one table. */
  --rlc-info-dark:      #66AAF9;
  --rlc-info-light:     #005BC4;
  --rlc-success-dark:   #17C964;
  --rlc-success-light:  #0E793C;
  --rlc-warning-dark:   #F5A524;
  --rlc-warning-light:  #936316;
  --rlc-danger-dark:    #F54180;
  --rlc-danger-light:   #C20E4D;

  --rlc-info-dark-rgb:     102 170 249;
  --rlc-info-light-rgb:      0  91 196;
  --rlc-success-dark-rgb:   23 201 100;
  --rlc-success-light-rgb:  14 121  60;
  --rlc-warning-dark-rgb:  245 165  36;
  --rlc-warning-light-rgb: 147  99  22;
  --rlc-danger-dark-rgb:   245  65 128;
  --rlc-danger-light-rgb:  194  14  77;

  /* ── Chart series · categorical ────────────────────────────────
     Stops at six on purpose. A seventh category is a signal that the
     chart needs grouping, not another hue. 1–3 are the design's own
     poll-bar ramp (#006FEE / #3B93F5 / #66AAF9) — a stacked series
     and a poll therefore read as the same chart. 4–6 step away from
     blue for the categorical case, and none of them is a status. */
  --rlc-series-1: #006FEE;
  --rlc-series-2: #3B93F5;
  --rlc-series-3: #66AAF9;
  --rlc-series-4: #6366F1;
  --rlc-series-5: #06B6D4;
  --rlc-series-6: #8B8B95;
}


/* ══════════════════════════════════════════════════════════════
   §2 · SEMANTICS — DARK
   The design's native mode. Bare :root as well, so a page with no
   skin.js still resolves.
   ══════════════════════════════════════════════════════════════ */

:root,
:root[data-skin="spark"] {

  color-scheme: dark;

  /* ── Primary ──────────────────────────────────────────────────
     #006FEE with white ink. Unlike the graphite primary this
     replaced, it does NOT invert — the same blue is the fill in
     both themes, which is what makes a screenshot of one theme
     recognisable as the same product as the other.

     -text is the step that may carry small type on this ground.
     Hover steps UP the ramp on dark (400) and press one further
     (300), because on a dark ground "brighter" is what reads as
     pressed. */
  --rlc-primary:         var(--rlc-blue-500);
  --rlc-primary-hover:   var(--rlc-blue-400);
  --rlc-primary-active:  var(--rlc-blue-300);
  --rlc-primary-ink:     var(--rlc-zinc-0);
  --rlc-primary-text:    var(--rlc-blue-300);
  --rlc-primary-rgb:     var(--rlc-blue-500-rgb);
  --rlc-primary-ring:    rgb(0 111 238 / .70);

  /* ── Surfaces ─────────────────────────────────────────────────
     Strictly ascending: canvas < panel < control < raised < hover.
     Canvas is the page, panel the card, control the field or button
     ground, raised the step a SELECTED thing takes on top of a control
     (the pill-tab chip, a poll option, a progress track), hover one step
     brighter again. Sidebar is the canvas: the rail has no ground of its
     own, which is why the active row's own fill has to do the work.

     Lifted from the design's literal values, which read as black on a
     real screen. The design ran canvas #060607 under panel #111114 —
     1.07:1, cards indistinguishable from the page — and it ranked
     raised (#18181B) BELOW control (#1F1F24), so every "selected = one
     step up" state in the kit actually stepped down. Measured now:

       panel vs canvas       1.14:1   (was 1.07; GitHub dark runs 1.09)
       panel hairline        1.46:1   (was 1.15; GitHub dark runs 1.42)
       raised vs control     1.17:1   ascending (was inverted) */
  --rlc-bg-canvas:   var(--rlc-zinc-void);
  --rlc-bg-shell:    var(--rlc-zinc-shell);
  --rlc-bg-panel:    var(--rlc-zinc-900);
  --rlc-bg-raised:   var(--rlc-zinc-800);
  --rlc-bg-control:  var(--rlc-zinc-rule);
  --rlc-bg-hover:    var(--rlc-zinc-lift);
  --rlc-bg-sidebar:  var(--rlc-zinc-void);
  --rlc-bg-canvas-rgb: 18 18 21;

  /* The panel edge does most of the separating on dark — a near-black
     ground step alone is too small for the eye to trust, which is why
     the design's borderless panels read as one black slab. -divider is
     the hairline INSIDE a panel, one step quieter than the panel's own
     edge so a list does not look like a stack of boxes. */
  --rlc-border-panel:  var(--rlc-zinc-edge);
  --rlc-border-strong: var(--rlc-zinc-lift);
  --rlc-divider:       var(--rlc-zinc-800);

  /* ── Type ─────────────────────────────────────────────────────
     Four tones, which is one more than the graphite palette had and
     is why the design reads as calm: #D4D4D8 for a control label,
     #8B8B95 for secondary prose, #71717A for meta and timestamps,
     #52525B for a section eyebrow. Collapsing any two of them is
     what makes a dark UI look flat. */
  --rlc-text:        var(--rlc-zinc-25);
  --rlc-text-strong: var(--rlc-zinc-25);
  --rlc-text-body:   var(--rlc-zinc-300);
  --rlc-text-sub:    var(--rlc-zinc-mid);     /* 5.96:1 on the panel */
  --rlc-text-muted:  var(--rlc-zinc-mute);    /* 4.80:1 — was 3.90, under AA */
  --rlc-text-faint:  var(--rlc-zinc-faint);   /* 3.11:1 — eyebrows only */
  --rlc-text-mono:   var(--rlc-zinc-300);
  --rlc-on-primary:  var(--rlc-zinc-0);
  --rlc-link:        var(--rlc-blue-500);
  --rlc-link-hover:  var(--rlc-blue-400);

  /* ── Agents ───────────────────────────────────────────────────
     Panel bg is the agent colour at 12% over the PANEL, its border the
     same colour at 32%. (Over the panel, not the canvas: once the
     canvas and panel moved apart, a tint baked over the canvas came out
     darker than the plain panel beside it and read as a hole.) Both are baked to opaque hexes rather
     than left as alpha, so a panel can sit on a raised surface
     without the tint shifting under it. `-head` is the band across
     the top of an agent card, and on dark it is the LIGHT step,
     because that band carries a label. */
  --rlc-agent-engage:         var(--rlc-engage-500);
  --rlc-agent-engage-head:    var(--rlc-engage-300);
  --rlc-agent-engage-bg:      #392922;
  --rlc-agent-engage-border:  #63391F;
  --rlc-agent-engage-rgb:     var(--rlc-engage-500-rgb);

  --rlc-agent-answer:         var(--rlc-answer-500);
  --rlc-agent-answer-head:    var(--rlc-answer-300);
  --rlc-agent-answer-bg:      #1B2A3C;
  --rlc-agent-answer-border:  #153C64;
  --rlc-agent-answer-rgb:     var(--rlc-answer-400-rgb);

  --rlc-agent-protect:        var(--rlc-protect-500);
  --rlc-agent-protect-head:   var(--rlc-protect-300);
  --rlc-agent-protect-bg:     #311D39;
  --rlc-agent-protect-border: #4F185C;
  --rlc-agent-protect-rgb:    var(--rlc-protect-400-rgb);

  /* ── Status ───────────────────────────────────────────────────
     Main is the dot, the icon and the label. -bg / -border are the
     alert container. The warning pair is the design's Reconnecting
     chip: rgb(245 165 36 / .12) over the panel, baked opaque. */
  --rlc-status-info:            var(--rlc-info-dark);
  --rlc-status-info-bg:         #28303E;
  --rlc-status-info-border:     #364B68;
  --rlc-status-info-rgb:        var(--rlc-info-dark-rgb);

  --rlc-status-success:         var(--rlc-success-dark);
  --rlc-status-success-bg:      #1E332C;
  --rlc-status-success-border:  #1C5538;
  --rlc-status-success-rgb:     var(--rlc-success-dark-rgb);

  --rlc-status-warning:         var(--rlc-warning-dark);
  --rlc-status-warning-bg:      #392F24;
  --rlc-status-warning-border:  #634A24;
  --rlc-status-warning-rgb:     var(--rlc-warning-dark-rgb);

  --rlc-status-danger:          var(--rlc-danger-dark);
  --rlc-status-danger-bg:       #39232F;
  --rlc-status-danger-border:   #632A41;
  --rlc-status-danger-rgb:      var(--rlc-danger-dark-rgb);

  /* Neutral is system chrome — a timestamp, an inert chip. Disabled
     is the only token allowed to fail contrast, because failing IS
     the message. */
  --rlc-status-neutral:         var(--rlc-zinc-400);
  --rlc-status-neutral-rgb:     var(--rlc-zinc-400-rgb);
  --rlc-status-disabled:        var(--rlc-zinc-faint);

  /* Ink that goes ON a saturated fill — a filled agent chip, a
     status badge, the primary button. White here: every one of
     these fills is a mid-tone deep enough to carry it, and the
     design uses #fff on #006FEE throughout. */
  --rlc-ink-on-color: var(--rlc-zinc-0);

  /* Hover steps for the status fills. The design gives ONE value per
     status, which is right for a dot or a label but leaves a filled
     button with no pressed state. Rather than invent a second hex
     per status, each hover is the same colour carried a twelfth of
     the way toward the theme's extreme — brighter on dark, darker on
     light — so a status only ever has to be defined once. */
  --rlc-status-info-hover:    color-mix(in srgb, var(--rlc-status-info)    88%, var(--rlc-zinc-0));
  --rlc-status-success-hover: color-mix(in srgb, var(--rlc-status-success) 88%, var(--rlc-zinc-0));
  --rlc-status-warning-hover: color-mix(in srgb, var(--rlc-status-warning) 88%, var(--rlc-zinc-0));
  --rlc-status-danger-hover:  color-mix(in srgb, var(--rlc-status-danger)  88%, var(--rlc-zinc-0));
  --rlc-agent-engage-hover:   color-mix(in srgb, var(--rlc-agent-engage)   88%, var(--rlc-zinc-0));
  --rlc-agent-answer-hover:   color-mix(in srgb, var(--rlc-agent-answer)   88%, var(--rlc-zinc-0));
  --rlc-agent-protect-hover:  color-mix(in srgb, var(--rlc-agent-protect)  88%, var(--rlc-zinc-0));
}


/* ══════════════════════════════════════════════════════════════
   §3 · SEMANTICS — LIGHT
   The same system, inverted ground. The accent does NOT invert —
   only the neutrals do. Values are HeroUI's light theme, which is
   the light half of the system the design's dark half comes from.
   ══════════════════════════════════════════════════════════════ */

:root[data-skin="spark-light"] {

  color-scheme: light;

  /* Same blue, same white ink. Hover and press step DOWN the ramp
     here (600, 700): on paper that means darker, which is what
     reads as pressed. */
  --rlc-primary:         var(--rlc-blue-500);
  --rlc-primary-hover:   var(--rlc-blue-600);
  --rlc-primary-active:  var(--rlc-blue-700);
  --rlc-primary-ink:     var(--rlc-zinc-0);
  --rlc-primary-text:    var(--rlc-blue-600);
  --rlc-primary-rgb:     var(--rlc-blue-500-rgb);
  --rlc-primary-ring:    rgb(0 111 238 / .50);

  /* Canvas is the tinted one and panel is white — the inverse of
     dark, where the canvas is the darkest tier. `raised` is white
     again and separates with a border rather than a step, because
     there is nothing above white to step to. */
  --rlc-bg-canvas:   var(--rlc-zinc-100);
  --rlc-bg-shell:    var(--rlc-zinc-0);
  --rlc-bg-panel:    var(--rlc-zinc-0);
  --rlc-bg-raised:   var(--rlc-zinc-100);
  --rlc-bg-control:  var(--rlc-zinc-200);
  --rlc-bg-hover:    var(--rlc-zinc-300);
  --rlc-bg-sidebar:  var(--rlc-zinc-0);
  --rlc-bg-canvas-rgb: 244 244 245;

  --rlc-border-panel:  var(--rlc-zinc-200);
  --rlc-border-strong: var(--rlc-zinc-300);
  --rlc-divider:       var(--rlc-zinc-200);

  /* Light gets the same four tones dark does, which the graphite
     palette could not manage — zinc has real steps at 500 and 600
     that both clear 4.5:1 on white, so `sub` and `muted` no longer
     have to collapse onto one value. */
  --rlc-text:        #11181C;
  --rlc-text-strong: #11181C;
  --rlc-text-body:   var(--rlc-zinc-700);
  --rlc-text-sub:    var(--rlc-zinc-600);
  --rlc-text-muted:  var(--rlc-zinc-500);
  --rlc-text-faint:  var(--rlc-zinc-400);
  --rlc-text-mono:   var(--rlc-zinc-700);
  --rlc-on-primary:  var(--rlc-zinc-0);
  --rlc-link:        var(--rlc-blue-600);
  --rlc-link-hover:  var(--rlc-blue-700);

  /* On a light surface the bright value is tinted to ~10% for the
     fill and ~40% for the border, and the header block steps the hue
     down a few levels so it reads bright without glaring. The
     agent's own colour — dots, rules, text — is the DEEP step. */
  --rlc-agent-engage:         var(--rlc-engage-600);
  --rlc-agent-engage-head:    var(--rlc-engage-500);
  --rlc-agent-engage-bg:      #FEF1E8;
  --rlc-agent-engage-border:  #FBC5A1;
  --rlc-agent-engage-rgb:     var(--rlc-engage-600-rgb);

  --rlc-agent-answer:         var(--rlc-answer-600);
  --rlc-agent-answer-head:    var(--rlc-answer-500);
  --rlc-agent-answer-bg:      #E6F1FD;
  --rlc-agent-answer-border:  #99C8F7;
  --rlc-agent-answer-rgb:     var(--rlc-answer-600-rgb);

  --rlc-agent-protect:        var(--rlc-protect-600);
  --rlc-agent-protect-head:   var(--rlc-protect-500);
  --rlc-agent-protect-bg:     #F8E6FB;
  --rlc-agent-protect-border: #E19DED;
  --rlc-agent-protect-rgb:    var(--rlc-protect-600-rgb);

  --rlc-status-info:            var(--rlc-info-light);
  --rlc-status-info-bg:         #E6F1FE;
  --rlc-status-info-border:     #B3D5FC;
  --rlc-status-info-rgb:        var(--rlc-info-light-rgb);

  --rlc-status-success:         var(--rlc-success-light);
  --rlc-status-success-bg:      #E8F9EF;
  --rlc-status-success-border:  #A8E6C1;
  --rlc-status-success-rgb:     var(--rlc-success-light-rgb);

  --rlc-status-warning:         var(--rlc-warning-light);
  --rlc-status-warning-bg:      #FEF4E4;
  --rlc-status-warning-border:  #FBDBA7;
  --rlc-status-warning-rgb:     var(--rlc-warning-light-rgb);

  --rlc-status-danger:          var(--rlc-danger-light);
  --rlc-status-danger-bg:       #FEE7EF;
  --rlc-status-danger-border:   #FAA0BF;
  --rlc-status-danger-rgb:      var(--rlc-danger-light-rgb);

  /* Neutral and disabled swap one step up the ramp: what was ink on
     dark is now too light, and what was disabled on dark is now the
     legible one. */
  --rlc-status-neutral:         var(--rlc-zinc-500);
  --rlc-status-neutral-rgb:     var(--rlc-zinc-500-rgb);
  --rlc-status-disabled:        var(--rlc-zinc-300);

  --rlc-ink-on-color: var(--rlc-zinc-0);

  /* Hover, darker here — see the dark block. */
  --rlc-status-info-hover:    color-mix(in srgb, var(--rlc-status-info)    88%, var(--rlc-zinc-900));
  --rlc-status-success-hover: color-mix(in srgb, var(--rlc-status-success) 88%, var(--rlc-zinc-900));
  --rlc-status-warning-hover: color-mix(in srgb, var(--rlc-status-warning) 88%, var(--rlc-zinc-900));
  --rlc-status-danger-hover:  color-mix(in srgb, var(--rlc-status-danger)  88%, var(--rlc-zinc-900));
  --rlc-agent-engage-hover:   color-mix(in srgb, var(--rlc-agent-engage)   88%, var(--rlc-zinc-900));
  --rlc-agent-answer-hover:   color-mix(in srgb, var(--rlc-agent-answer)   88%, var(--rlc-zinc-900));
  --rlc-agent-protect-hover:  color-mix(in srgb, var(--rlc-agent-protect)  88%, var(--rlc-zinc-900));
}