/* =============================================================================
   variables.css - the single source of truth for colour.

   Every colour in the application is one of the tokens below. No stylesheet
   should ship a raw hex value any more. Before adding a token, check that none
   of the existing ones will do.

   Two spellings of each colour:
     --c-<name>       the colour, for solid fills, text and borders
     --c-<name>-rgb   the same colour as an "r, g, b" triplet, for translucency
                          border: 1px solid rgba(var(--c-white-rgb), 0.12);

   THE -alt STEPS ARE NOT SPARES. Each one is the hover or gradient partner of
   the step it is named after. They look nearly identical to their base on
   purpose, because that small step IS the interaction: collapse the pair and
   the element stops responding to the pointer. Same for grey-650 under
   grey-700. Do not "tidy" them away.

   THEMING. The ramps are the seam. A theme redefines the steps it cares about
   and every rule follows, because no rule names a literal colour. There is a
   worked example at the foot of this file.

   NOT COVERED HERE: static/css/grow_lineage.css. The Grow lineage map carries
   its own light and dark token set plus a nine-way categorical scale whose
   whole point is that the nine stay mutually distinguishable. Folding it into
   these ramps would break it, so it is left alone deliberately.
   ============================================================================= */

:root {
  /* --- Translucent washes ----------------------------------------------- */
  /* The colour every `rgba(..., 0.1)` fill on a surface is built from: field
  /* backgrounds, switch troughs, hover tints, hairlines that are washes rather
  /* than borders. On a dark theme it is simply the ink, and always was.
  /*
  /* On a LIGHT theme it is not, and that is the whole reason this token exists.
  /* The ink there is near-black, and a tenth of near-black over white is a
  /* perfectly flat grey - so every field on the page stayed neutral no matter
  /* how the grey ramp was tinted. A wash has to carry the hue itself: at a tenth
  /* it contributes a tenth of whatever colour it is. Hence a proper blue rather
  /* than a blue-black, which at these alphas would be indistinguishable from
  /* black. */
  --c-wash-rgb: 255, 255, 255;

  /* --- Campaign status, as text ----------------------------------------- */
  /* The colour a contact's name takes from its campaign status. Rendered as an
  /* inline style from CC_STATUS_TEXT_COLOR, so these are read by `var()` inside
  /* a style attribute. Light and vivid on the dark themes, dark and saturated
  /* on the light ones - the hue is the meaning, the lightness is the theme. */
  --c-state-not-started: #9aa0a6;
  --c-state-active: #ffffff;
  --c-state-in-progress: #3ecaea;
  --c-state-paused: #c4c8cb;
  --c-state-completed: #4eda98;


  /* --- Chart marks ------------------------------------------------------- */
  /* The slice colours of the donuts on /admin/usage/outcomes. They used to be
     hexes in the controller, which meant one palette for four themes: colours
     chosen against this navy read as loud on midnight's near-black slate, and
     nothing could be done about it without repainting every theme at once.
     Each name is a thing being counted, never a rank, so narrowing a window to
     fewer slices never repaints the ones that remain.

     Every set was run through the data-viz palette validator against this
     theme's own card surface (--c-chrome-700, #16213e here), not eyeballed:
       reply donut   worst all-pairs CVD ΔE 14.5, normal-vision 17.5   PASS
       interest pair CVD ΔE 13.0, normal-vision 34.5                   PASS
       depth ramp    one hue, monotone light→dark, light end 4.37:1    PASS
     The lightness-band and chroma complaints it also returns are the two
     deliberate neutrals below: a mark that is meant to recede has to be allowed
     to. Every slice carries its share on the slice and its name, count and
     share in the legend, so identity never rests on the colour alone. */
  --c-chart-replied: #3987e5;
  --c-chart-neutral: #b0b6c2;
  --c-chart-residual: #d95926;
  --c-chart-open: #eda100;
  --c-chart-interest: #008300;
  --c-chart-no-interest: #d55181;
  --c-chart-depth-1: #cde2fb;
  --c-chart-depth-2: #9ec5f4;
  --c-chart-depth-3: #6da7ec;
  --c-chart-depth-4: #3987e5;


  /* --- Absolutes ------------------------------------------------------- */
  /* Pure white and pure black. Every translucent overlay is built from these. */
  --c-white: #ffffff;        --c-white-rgb: 255, 255, 255;
  --c-black: #000000;        --c-black-rgb: 0, 0, 0;

  /* --- The page ground ------------------------------------------------- */
  /* The colour behind everything, and the text that sits directly on it. Its own */
  /* pair rather than a step of the grey ramp, because a theme moves the ground */
  /* while the ramp stays put. page-ink is stated explicitly so Bootstrap's own */
  /* body colour can never leave dark text on a dark page. */
  --c-page: #f0f0f0;         --c-page-rgb: 240, 240, 240;
  --c-page-ink: #212529;     --c-page-ink-rgb: 33, 37, 41;

  /* --- Raised surfaces and their edges --------------------------------- */
  /* surface is a card, a dropdown, a popover, a modal: the thing that sits ON */
  /* the page. It is white in both light themes and near-black in the dark one, */
  /* which is why it is not spelled --c-white. border is the hairline around it. */
  --c-surface: #ffffff;      --c-surface-rgb: 255, 255, 255;
  --c-border: #dee2e6;       --c-border-rgb: 222, 226, 230;

  /* --- The navigation bar ---------------------------------------------- */
  /* The bar is its own surface. It was written as a 95% white, which would have */
  /* followed the page ink into the dark in a light theme: the bar sits ON the */
  /* page, it is not text on it. */
  /*  */
  /* brand-pill is the block behind the logo and is transparent on every theme as */
  /* it stands, so the mark sits straight on the bar. It is kept as the seam for */
  /* putting a block back. mark-dot and mark-dot-lit are the two ends of the */
  /* logo's animating cluster: the colour a dot rests at, and the colour it turns */
  /* when it lands on the centre. On the light bars both are black, so the mark is */
  /* a black logo that still moves; only the dark theme takes the landing page's */
  /* violet and teal. */
  --c-nav: #ffffff;          --c-nav-rgb: 255, 255, 255;
  /* Light, because the bar is the card surface now (see `.crm-navbar`) and on
     this theme that surface is navy. It was near-black, which read at 1.5:1 on
     it - the labels were there and could not be read. The other three themes
     need no change: their chrome-700 is white or near-black already, so their
     existing nav ink still lands the right way up. */
  --c-nav-ink: #a9b6c4;      --c-nav-ink-rgb: 169, 182, 196;
  --c-nav-ink-strong: #ffffff; --c-nav-ink-strong-rgb: 255, 255, 255;
  --c-nav-line: #dee2e6;     --c-nav-line-rgb: 222, 226, 230;
  --c-nav-current: #dbe1e7;  --c-nav-current-rgb: 219, 225, 231;
  --c-nav-current-ink: #141414; --c-nav-current-ink-rgb: 20, 20, 20;
  --c-brand-pill:
    transparent;
  /* The mark, for a dark bar. The wordmark goes to the ink; the tile stays the
     darkest thing on the bar so the coloured bars inside it still float; and the
     dot cluster takes the mark's own two colours, as it does on midnight. All
     four were near-black, drawn for the white bar this theme used to have. */
  --c-brand-pill-ink: #ffffff; --c-brand-pill-ink-rgb: 255, 255, 255;
  --c-brand-tile: #1e232a;   --c-brand-tile-rgb: 30, 35, 42;
  --c-mark-dot: #b3a4ff;     --c-mark-dot-rgb: 179, 164, 255;
  --c-mark-dot-lit: #7ec8e3; --c-mark-dot-lit-rgb: 126, 200, 227;
  --c-mark-bar: #7ec8e3;     --c-mark-bar-rgb: 126, 200, 227;
  --c-mark-bar-alt: #b3a4ff; --c-mark-bar-alt-rgb: 179, 164, 255;

  /* --- The modal close button ------------------------------------------ */
  /* Bootstrap draws the X as a near-black SVG, so a dark theme has to invert it.
  /* The app did that unconditionally, in four separate rules, which left a white
  /* X on a white modal for the light themes - present, pressable, invisible. A
  /* filter per theme instead of a filter in the rule: the themes that need no
  /* inversion say `none`, and any future theme answers the question once here. */
  --c-close-filter: invert(1) grayscale(100%) brightness(200%);

  /* --- Control surfaces ------------------------------------------------ */
  /* The tab strips, segmented switches and list rows you click. They theme with */
  /* the chrome rather than with the grey ramp, because their text is --c-ink: if */
  /* the ink flips for a light theme and the control does not, the label goes dark */
  /* on dark. control-hover is the pointer step, not a colour to reach for. */
  --c-control: #5d646e;      --c-control-rgb: 93, 100, 110;
  --c-control-hover: #69707b; --c-control-hover-rgb: 105, 112, 123;
  --c-control-ink: #dcdcdc;  --c-control-ink-rgb: 220, 220, 220;
  --c-tab-line:
    transparent;
  --c-switch-knob:
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");

  /* --- Foreground on the chrome surfaces ------------------------------- */
  /* The readable colour ON the chrome ramp, and its dimmed step. This is the */
  /* token that makes a light theme possible: it is white on a dark panel and */
  /* near-black on a light one, so no rule has to know which theme is running. */
  /* Use --c-white only where the thing is white in EVERY theme, such as text on */
  /* a red or green fill, which stays white because the fill stays coloured. */
  --c-ink: #ffffff;          --c-ink-rgb: 255, 255, 255;
  --c-ink-dim: #f0f0f0;      --c-ink-dim-rgb: 240, 240, 240;
  /* ink-soft: text that must read as deliberately NOT the main ink and still be
     read - the Personal Leads name of someone who is not one of your
     connections. A step off, not a dimming: chosen to clear 4.5:1 against the
     LIGHTEST surface it can land on (chrome-600, the top of the card gradient),
     because that is where it is weakest, while staying far enough from --c-ink
     to be told apart at a glance. It is its own token rather than a step of the
     grey ramp: grey-500 is shared with finance subtitles, the help annotator and
     Bootstrap's secondary colour, and is not re-hued per theme, so borrowing it
     put a dark-theme slate on a near-white card at 2.6:1. */
  --c-ink-soft: #99a8b7;     --c-ink-soft-rgb: 153, 168, 183;

  /* --- Grey ramp ------------------------------------------------------- */
  /* Light to dark. grey-100 is the application background; grey-200 is the */
  /* standard hairline border. From grey-500 down the ramp is deliberately */
  /* slate rather than flat neutral, which is what sits under the navy chrome. */
  /* grey-650 is the hover step for grey-700, not a colour to reach for. */
  --c-grey-50: #f8f9fa;      --c-grey-50-rgb: 248, 249, 250;  /* was also #f0f7ff #f1f5f9 #f7f7f7 #f8fafc #fafafa */
  --c-grey-50-alt: #e2e8f0;  --c-grey-50-alt-rgb: 226, 232, 240;  /* hover partner of grey-50 */
  --c-grey-100: #f0f0f0;     --c-grey-100-rgb: 240, 240, 240;  /* was also #e8e8e8 #e9ecef #f1f3f5 */
  --c-grey-200: #dee2e6;     --c-grey-200-rgb: 222, 226, 230;  /* was also #dcdcdc #dddddd #e0e0e0 #e5e7eb */
  --c-grey-300: #ced4da;     --c-grey-300-rgb: 206, 212, 218;  /* was also #cbd5e1 #cccccc */
  --c-grey-400: #adb5bd;     --c-grey-400-rgb: 173, 181, 189;  /* was also #a3a3a3 #aaaaaa #bdbdbd */
  --c-grey-500: #8496a8;     --c-grey-500-rgb: 132, 150, 168;  /* was also #94a3b8 */
  --c-grey-600: #6c757d;     --c-grey-600-rgb: 108, 117, 125;  /* was also #64748b #666666 #888888 */
  --c-grey-650: #505763;     --c-grey-650-rgb: 80, 87, 99;  /* was also #475569 #555555 #5a6268 #5c636a #5e5e5e */
  --c-grey-700: #454c56;     --c-grey-700-rgb: 69, 76, 86;  /* was also #495057 #525252 */
  --c-grey-800: #333333;     --c-grey-800-rgb: 51, 51, 51;  /* was also #2a2a2a #444444 */
  --c-grey-900: #212529;     --c-grey-900-rgb: 33, 37, 41;  /* was also #262626 */
  --c-grey-950: #141414;     --c-grey-950-rgb: 20, 20, 20;  /* was also #1a1a1a */

  /* --- Chrome ramp - the dark app surfaces and their gradients --------- */
  /* Dark surfaces, deepest first. chrome-800 is the page, chrome-700 the panel */
  /* and chrome-600 the raised or active surface. Gradients run between adjacent */
  /* steps. Named for the job, not the hue, because a theme re-hues the whole */
  /* ramp: in the plum theme chrome-700 is aubergine and the name still reads true. */
  --c-chrome-900: #0f1729;   --c-chrome-900-rgb: 15, 23, 41;  /* was also #0f172a #141823 */
  --c-chrome-800: #1a1a2e;   --c-chrome-800-rgb: 26, 26, 46;
  --c-chrome-700: #16213e;   --c-chrome-700-rgb: 22, 33, 62;  /* was also #10243a #1a2a4f */
  --c-chrome-600: #0f3460;   --c-chrome-600-rgb: 15, 52, 96;
  --c-chrome-500: #175090;   --c-chrome-500-rgb: 23, 80, 144;

  /* --- Blue ramp - action and accent ----------------------------------- */
  /* blue-500 is the primary action colour. 300 down to 100 are light-on-dark */
  /* text, borders and fills. */
  --c-blue-500: #0d6efd;     --c-blue-500-rgb: 13, 110, 253;  /* was also #0a66c2 #1d6ee5 #2a6bb0 */
  --c-blue-400: #2d7ff9;     --c-blue-400-rgb: 45, 127, 249;  /* was also #2b86f0 #5e86cf */
  --c-blue-300: #4a9eff;     --c-blue-300-rgb: 74, 158, 255;  /* was also #63b3ed #6ea8fe */
  --c-blue-200: #9ec5ff;     --c-blue-200-rgb: 158, 197, 255;  /* was also #9db9e8 #aaccff */
  --c-blue-200-alt: #8bb8f0; --c-blue-200-alt-rgb: 139, 184, 240;  /* hover partner of blue-200 */
  --c-blue-100: #cfe3ff;     --c-blue-100-rgb: 207, 227, 255;  /* was also #cfe2ff #e7f1ff */

  /* --- Accent ink and teal --------------------------------------------- */
  /* accent-300 is the signature body text on the dark panels; accent-200 is its */
  /* brighter step. Both rotate with the chrome ramp when a theme is applied. */
  /* accent-tint is the pale CHIP, with black on it, and it does not rotate: */
  /* it is a fill that must stay pale, not a foreground that must stay legible */
  /* on a panel - the two pull in opposite directions on a light theme. */
  --c-accent-300: #7ec8e3;   --c-accent-300-rgb: 126, 200, 227;  /* was also #0dcaf0 #6cc4e0 */
  --c-accent-200: #a8ddf0;   --c-accent-200-rgb: 168, 221, 240;  /* was also #67e8f9 */
  --c-accent-tint: #7ec8e3;  --c-accent-tint-rgb: 126, 200, 227;
  --c-teal: #0c7c92;         --c-teal-rgb: 12, 124, 146;  /* was also #286c6f */

  /* --- State - success ------------------------------------------------- */
  /* green is the solid fill or border. -ink is the readable weight on a dark */
  /* surface, -tint the pale background behind it, and -deep the text that goes ON */
  /* that tint. The tint and the deep step are a pair and never move with a theme: */
  /* a pale chip with dark text reads the same on any background. */
  --c-green: #198754;        --c-green-rgb: 25, 135, 84;  /* was also #28a745 #2e7d32 #2e8b57 */
  --c-green-ink: #4ade80;    --c-green-ink-rgb: 74, 222, 128;  /* was also #10b981 #25d366 #57d38c #69db7c */
  --c-green-100: #8fe69f;    --c-green-100-rgb: 143, 230, 159;  /* was also #6ee7a0 #6ee7b7 #86efac */
  --c-green-100-alt: #b6f0c1; --c-green-100-alt-rgb: 182, 240, 193;  /* hover partner of green-100 */
  --c-green-tint: #e8f5e9;   --c-green-tint-rgb: 232, 245, 233;
  --c-green-deep: #0a3622;   --c-green-deep-rgb: 10, 54, 34;

  /* --- State - danger -------------------------------------------------- */
  /* The same three levels as success. */
  --c-red: #dc3545;          --c-red-rgb: 220, 53, 69;  /* was also #c62828 #f43f5e */
  --c-red-ink: #ff7b7b;      --c-red-ink-rgb: 255, 123, 123;  /* was also #ff6464 #ff6b6b #ff6b7a #ff8a8a */
  --c-red-ink-alt: #ff8787;  --c-red-ink-alt-rgb: 255, 135, 135;  /* hover partner of red-ink */
  --c-red-100: #ff9ba3;      --c-red-100-rgb: 255, 155, 163;  /* was also #fca5a5 #ff8a93 #ff8c93 #ff8fc6 #ffb3b3 */
  --c-red-tint: #ffebee;     --c-red-tint-rgb: 255, 235, 238;
  --c-red-deep: #58151c;     --c-red-deep-rgb: 88, 21, 28;

  /* --- State - warning ------------------------------------------------- */
  /* The same three levels, plus a dark step for text on a pale amber ground. */
  --c-amber: #ffc107;        --c-amber-rgb: 255, 193, 7;  /* was also #f59e0b #ffb43c */
  --c-amber-ink: #ffd966;    --c-amber-ink-rgb: 255, 217, 102;  /* was also #fcd34d #ffd479 #ffd873 */
  --c-amber-tint: #fef3c7;   --c-amber-tint-rgb: 254, 243, 199;
  --c-amber-dark: #b45309;   --c-amber-dark-rgb: 180, 83, 9;
  --c-amber-dark-alt: #92400e; --c-amber-dark-alt-rgb: 146, 64, 14;  /* hover partner of amber-dark */
  --c-amber-deep: #664d03;   --c-amber-deep-rgb: 102, 77, 3;

  /* --- State - attention ----------------------------------------------- */
  /* orange-hot is the help annotator's highlight. violet identifies the personal */
  /* slot pool, which is why it survives as its own token rather than folding into */
  /* the blue ramp: the three pools are told apart by colour alone. */
  --c-orange: #fd7e14;       --c-orange-rgb: 253, 126, 20;  /* was also #d97706 */
  --c-orange-hot: #ff5b3a;   --c-orange-hot-rgb: 255, 91, 58;
  --c-violet: #b3a4ff;       --c-violet-rgb: 179, 164, 255;
  /* W14a: a record that is also in the customer book, marked on the outreach
     row. Its own hue on purpose - green is completed, teal is in progress,
     amber is attention and violet is the personal slot pool, and an existing
     customer sitting in the cold-lead queue must not read as any of them. */
  --c-crm: #e0937c;          --c-crm-rgb: 224, 147, 124;

  /* --- Brand - landing and public pages only --------------------------- */
  /* The public brand. Deliberately NOT merged with amber even though they are */
  /* close: a theme that restyles the warning state must not restyle the brand. */
  --c-gold: #fdb614;         --c-gold-rgb: 253, 182, 20;
  --c-gold-alt: #e5a412;     --c-gold-alt-rgb: 229, 164, 18;  /* hover partner of gold */
  --c-gold-dark: #c48c0f;    --c-gold-dark-rgb: 196, 140, 15;
}

/* =============================================================================
   THEMES

   A theme moves the chrome surfaces, the ink that sits on them, and any
   foreground that was tuned for a dark panel. It does NOT change what a colour
   means. Red stays red and green stays green in every theme; only their
   intensity moves, by at most about one degree of hue, so an indicator reads
   the same way whichever theme is on.

   Apply one on the root element:
       <html data-theme="light">
   or from script:
       document.documentElement.dataset.theme = "light";
   With no attribute you get the default, the dark navy the app has today.
   ============================================================================= */

/* light: White panels on a grey page, dark text. */
/*   Every foreground that was tuned for a dark panel is brought down onto a */
/*   white one: same hue, lower lightness, solved to at least 4.5:1. */
:root[data-theme="light"] {
  --c-wash-rgb: 16, 54, 92;

  /* --- Campaign status, as text ----------------------------------------- */
  /* The colour a contact's name takes from its campaign status. Rendered as an
  /* inline style from CC_STATUS_TEXT_COLOR, so these are read by `var()` inside
  /* a style attribute. Light and vivid on the dark themes, dark and saturated
  /* on the light ones - the hue is the meaning, the lightness is the theme. */
  --c-state-not-started: #5f6871;
  --c-state-active: #0b1220;
  --c-state-in-progress: #0c6d80;
  --c-state-paused: #6b747d;
  --c-state-completed: #0e7a45;

  --c-chrome-500: #cfd8e2;     --c-chrome-500-rgb: 207, 216, 226;
  --c-chrome-600: #e7ecf3;     --c-chrome-600-rgb: 231, 236, 243;
  --c-chrome-700: #ffffff;     --c-chrome-700-rgb: 255, 255, 255;
  --c-chrome-800: #f1f3f6;     --c-chrome-800-rgb: 241, 243, 246;
  --c-chrome-900: #d5dae1;     --c-chrome-900-rgb: 213, 218, 225;
  --c-ink: #0b1220;            --c-ink-rgb: 11, 18, 32;
  --c-ink-dim: #333e4d;        --c-ink-dim-rgb: 51, 62, 77;
  --c-ink-soft: #546376;       --c-ink-soft-rgb: 84, 99, 118;
  --c-accent-200: #036e85;     --c-accent-200-rgb: 3, 110, 133;
  --c-accent-300: #006e87;     --c-accent-300-rgb: 0, 110, 135;
  --c-amber-ink: #796203;      --c-amber-ink-rgb: 121, 98, 3;
  --c-blue-100: #47678a;       --c-blue-100-rgb: 71, 103, 138;
  --c-blue-200: #0068ad;       --c-blue-200-rgb: 0, 104, 173;
  --c-blue-200-alt: #0b68a6;   --c-blue-200-alt-rgb: 11, 104, 166;
  --c-blue-300: #0c66b2;       --c-blue-300-rgb: 12, 102, 178;
  --c-border: #d5dae1;         --c-border-rgb: 213, 218, 225;
  --c-close-filter: none;
  --c-control: #b8c4d3;        --c-control-rgb: 184, 196, 211;
  --c-control-hover: #aab8ca;  --c-control-hover-rgb: 170, 184, 202;
  --c-control-ink: #22303f;    --c-control-ink-rgb: 34, 48, 63;
  --c-green-100: #087433;      --c-green-100-rgb: 8, 116, 51;
  --c-green-100-alt: #17733a;  --c-green-100-alt-rgb: 23, 115, 58;
  --c-green-ink: #057439;      --c-green-ink-rgb: 5, 116, 57;
  --c-grey-400: #5b6670;       --c-grey-400-rgb: 91, 102, 112;
  --c-nav: #ffffff;            --c-nav-rgb: 255, 255, 255;
  --c-nav-current: #1b2430;    --c-nav-current-rgb: 27, 36, 48;
  --c-nav-current-ink: #ffffff; --c-nav-current-ink-rgb: 255, 255, 255;
  --c-nav-ink: #454c56;        --c-nav-ink-rgb: 69, 76, 86;
  --c-nav-ink-strong: #141414; --c-nav-ink-strong-rgb: 20, 20, 20;
  --c-nav-line: #d5dae1;       --c-nav-line-rgb: 213, 218, 225;
  --c-page: #eef1f5;           --c-page-rgb: 238, 241, 245;
  --c-page-ink: #0b1220;       --c-page-ink-rgb: 11, 18, 32;
  --c-red-100: #b8304b;        --c-red-100-rgb: 184, 48, 75;
  --c-red-ink: #c90533;        --c-red-ink-rgb: 201, 5, 51;
  --c-red-ink-alt: #c71137;    --c-red-ink-alt-rgb: 199, 17, 55;
  --c-surface: #ffffff;        --c-surface-rgb: 255, 255, 255;
  --c-switch-knob:
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230b1220'/%3e%3c/svg%3e");
  --c-tab-line:
    transparent;
}

/* paper: Very light greys throughout, dark text. The lightest of the three. */
/*    */
/*   The chrome ramp keeps its meaning rather than its lightness: 900 is */
/*   still the most recessed step and 500 the most raised, so on this theme */
/*   "deeper" is a slightly darker grey. The steps stay one small move */
/*   apart, which is what keeps the gradients between adjacent steps reading */
/*   as gradients rather than as flat blocks. */
/*    */
/*   Every white foreground is near-black here - the ink, its dimmed step, */
/*   the control ink. The switch knob is not: it is a thumb on a coloured */
/*   track, not text, so it stays white. */
/*    */
/*   The accent foregrounds - the teal body text, the violet, the state inks */
/*   - were tuned for a near-black panel and read at under 2:1 on this one. */
/*   Each is lowered in L* ALONE until it reaches 4.5:1, hue drift under a */
/*   degree, so the teal is still teal and the danger ink is still red. They */
/*   only got dark enough to read. */
/*    */
/*   No page glow: those two pools of brand colour are made for a near-black */
/*   ground and read as a smudge over light grey. */
:root[data-theme="paper"] {
  --c-wash-rgb: 16, 54, 92;

  /* --- Campaign status, as text ----------------------------------------- */
  /* The colour a contact's name takes from its campaign status. Rendered as an
  /* inline style from CC_STATUS_TEXT_COLOR, so these are read by `var()` inside
  /* a style attribute. Light and vivid on the dark themes, dark and saturated
  /* on the light ones - the hue is the meaning, the lightness is the theme. */
  --c-state-not-started: #536577;
  --c-state-active: #000000;
  --c-state-in-progress: #0c7c92;
  --c-state-paused: #5e7287;
  --c-state-completed: #006f36;

  --c-chrome-500: #ffffff;     --c-chrome-500-rgb: 255, 255, 255;
  --c-chrome-600: #ffffff;     --c-chrome-600-rgb: 255, 255, 255;
  --c-chrome-700: #fafbfc;     --c-chrome-700-rgb: 250, 251, 252;
  --c-chrome-800: #f4f6f8;     --c-chrome-800-rgb: 244, 246, 248;
  --c-chrome-900: #edf0f3;     --c-chrome-900-rgb: 237, 240, 243;
  --c-ink: #000000;            --c-ink-rgb: 0, 0, 0;
  --c-ink-dim: #3f4c5a;        --c-ink-dim-rgb: 63, 76, 90;
  --c-ink-soft: #526374;       --c-ink-soft-rgb: 82, 99, 116;
  --c-accent-200: #326879;     --c-accent-200-rgb: 50, 104, 121;
  --c-accent-300: #0a6a83;     --c-accent-300-rgb: 10, 106, 131;
  --c-accent-tint: #7ec8e3;    --c-accent-tint-rgb: 126, 200, 227;
  --c-amber: #ffc107;          --c-amber-rgb: 255, 193, 7;
  --c-amber-dark: #b45309;     --c-amber-dark-rgb: 180, 83, 9;
  --c-amber-dark-alt: #92400e; --c-amber-dark-alt-rgb: 146, 64, 14;
  --c-amber-deep: #664d03;     --c-amber-deep-rgb: 102, 77, 3;
  --c-amber-ink: #745e00;      --c-amber-ink-rgb: 116, 94, 0;
  --c-amber-tint: #fef3c7;     --c-amber-tint-rgb: 254, 243, 199;
  --c-blue-100: #4f637a;       --c-blue-100-rgb: 79, 99, 122;
  --c-blue-200: #356397;       --c-blue-200-rgb: 53, 99, 151;
  --c-blue-200-alt: #1d5889;   --c-blue-200-alt-rgb: 29, 88, 137;
  --c-blue-300: #0963ad;       --c-blue-300-rgb: 9, 99, 173;
  --c-blue-400: #2d7ff9;       --c-blue-400-rgb: 45, 127, 249;
  --c-blue-500: #0d6efd;       --c-blue-500-rgb: 13, 110, 253;
  --c-border: #c6cfd8;         --c-border-rgb: 198, 207, 216;
  --c-brand-pill:
    transparent;
  --c-brand-pill-ink: #1e232a; --c-brand-pill-ink-rgb: 30, 35, 42;
  --c-brand-tile: #1e232a;     --c-brand-tile-rgb: 30, 35, 42;
  --c-close-filter: none;
  --c-control: #dfe4e9;        --c-control-rgb: 223, 228, 233;
  --c-control-hover: #d1d8df;  --c-control-hover-rgb: 209, 216, 223;
  --c-control-ink: #2b3138;    --c-control-ink-rgb: 43, 49, 56;
  --c-gold: #fdb614;           --c-gold-rgb: 253, 182, 20;
  --c-gold-alt: #e5a412;       --c-gold-alt-rgb: 229, 164, 18;
  --c-gold-dark: #c48c0f;      --c-gold-dark-rgb: 196, 140, 15;
  --c-green: #198754;          --c-green-rgb: 25, 135, 84;
  --c-green-100: #0e7032;      --c-green-100-rgb: 14, 112, 50;
  --c-green-100-alt: #447a51;  --c-green-100-alt-rgb: 68, 122, 81;
  --c-green-deep: #0a3622;     --c-green-deep-rgb: 10, 54, 34;
  --c-green-ink: #006f36;      --c-green-ink-rgb: 0, 111, 54;
  --c-green-tint: #e8f5e9;     --c-green-tint-rgb: 232, 245, 233;
  --c-grey-100: #f2f4f6;       --c-grey-100-rgb: 242, 244, 246;
  --c-grey-200: #e4e8ec;       --c-grey-200-rgb: 228, 232, 236;
  --c-grey-300: #ccd4dc;       --c-grey-300-rgb: 204, 212, 220;
  --c-grey-400: #506274;       --c-grey-400-rgb: 80, 98, 116;
  --c-grey-50: #f9fafb;        --c-grey-50-rgb: 249, 250, 251;
  --c-grey-50-alt: #e2e8f0;    --c-grey-50-alt-rgb: 226, 232, 240;
  --c-grey-500: #526374;       --c-grey-500-rgb: 82, 99, 116;
  --c-grey-600: #607489;       --c-grey-600-rgb: 96, 116, 137;
  --c-grey-650: #49596a;       --c-grey-650-rgb: 73, 89, 106;
  --c-grey-700: #404e5b;       --c-grey-700-rgb: 64, 78, 91;
  --c-grey-800: #2a333c;       --c-grey-800-rgb: 42, 51, 60;
  --c-grey-900: #1e252c;       --c-grey-900-rgb: 30, 37, 44;
  --c-grey-950: #101418;       --c-grey-950-rgb: 16, 20, 24;
  --c-mark-bar: #38d9be;       --c-mark-bar-rgb: 56, 217, 190;
  --c-mark-bar-alt: #a78bfa;   --c-mark-bar-alt-rgb: 167, 139, 250;
  --c-mark-dot: #000000;       --c-mark-dot-rgb: 0, 0, 0;
  --c-mark-dot-lit: #000000;   --c-mark-dot-lit-rgb: 0, 0, 0;
  --c-modal-fill:
    linear-gradient(135deg, var(--c-page) 0%, var(--c-page) 100%);
  --c-modal-header-bg: #ffffff; --c-modal-header-bg-rgb: 255, 255, 255;
  --c-modal-header-ink: #000000; --c-modal-header-ink-rgb: 0, 0, 0;
  --c-nav: #ffffff;            --c-nav-rgb: 255, 255, 255;
  --c-nav-current: #dbe1e7;    --c-nav-current-rgb: 219, 225, 231;
  --c-nav-current-ink: #101418; --c-nav-current-ink-rgb: 16, 20, 24;
  --c-nav-ink: #536577;        --c-nav-ink-rgb: 83, 101, 119;
  --c-nav-ink-strong: #000000; --c-nav-ink-strong-rgb: 0, 0, 0;
  --c-nav-line: #d1d8df;       --c-nav-line-rgb: 209, 216, 223;
  --c-orange: #9c4900;         --c-orange-rgb: 156, 73, 0;
  --c-orange-hot: #ff5b3a;     --c-orange-hot-rgb: 255, 91, 58;
  --c-page: #bcc6d0;           --c-page-rgb: 188, 198, 208;
  --c-page-ink: #000000;       --c-page-ink-rgb: 0, 0, 0;
  --c-red: #dc3545;            --c-red-rgb: 220, 53, 69;
  --c-red-100: #9d444f;        --c-red-100-rgb: 157, 68, 79;
  --c-red-deep: #58151c;       --c-red-deep-rgb: 88, 21, 28;
  --c-red-ink: #af343d;        --c-red-ink-rgb: 175, 52, 61;
  --c-red-ink-alt: #b04247;    --c-red-ink-alt-rgb: 176, 66, 71;
  --c-red-tint: #ffebee;       --c-red-tint-rgb: 255, 235, 238;
  --c-seg-trough: #dfe4e9;     --c-seg-trough-rgb: 223, 228, 233;
  --c-surface: #ffffff;        --c-surface-rgb: 255, 255, 255;
  --c-switch-knob:
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
  /* The inactive tabs are a step off white, and the selected one keeps the
     card's own white. That step is what says which tab you are on now: it used
     to be a rule drawn under the whole strip, with the selected tab covering
     its own piece of it - a line doing by absence what a colour does by
     presence, and the only theme that needed it. The line is gone
     (`--c-tab-underline: transparent`) and the tabs say it themselves. */
  --c-tab-face: #f0f2f4;       --c-tab-face-rgb: 240, 242, 244;
  --c-tab-face-hover: #e4e8ec; --c-tab-face-hover-rgb: 228, 232, 236;
  --c-tab-line:
    transparent;
  --c-tab-underline:
    transparent;
  --c-teal: #0c7c92;           --c-teal-rgb: 12, 124, 146;
  --c-violet: #6056a9;         --c-violet-rgb: 96, 86, 169;
  /* Darker than the dark themes': the same hue has to carry on a white page. */
  --c-crm: #a85138;            --c-crm-rgb: 168, 81, 56;
}

/* midnight: Near-black and gold, taking the landing page's palette into the app. */
/*   Gold reads 9.6:1 on the panel and white 17:1, so it is the highest */
/*   contrast of the three. */
:root[data-theme="midnight"] {
  --c-wash-rgb: 238, 242, 243;

  /* --- Campaign status, as text ----------------------------------------- */
  /* The colour a contact's name takes from its campaign status. Rendered as an
  /* inline style from CC_STATUS_TEXT_COLOR, so these are read by `var()` inside
  /* a style attribute. Light and vivid on the dark themes, dark and saturated
  /* on the light ones - the hue is the meaning, the lightness is the theme. */
  --c-state-not-started: #9aa0a6;
  --c-state-active: #eef2f3;
  --c-state-in-progress: #38d9be;
  --c-state-paused: #c4c8cb;
  --c-state-completed: #85d59a;

  /* --- Chart marks ------------------------------------------------------- */
  /* Midnight's own slice colours. The default set is web-primary blue, rust and
     magenta picked against a navy card; on this near-black slate they read as
     loud and foreign. These are the theme's own palette instead - its teal
     accent, its violet, its soft green and coral, and a slate grey for the
     bucket that is context rather than result - so the donuts belong to the
     page they sit on.

     Validated against this theme's card surface (#151b1e), not eyeballed:
       reply donut   worst all-pairs CVD ΔE 12.7, normal-vision 18.5   PASS
       interest pair CVD ΔE 10.6, normal-vision 24.0                   PASS
       depth ramp    monotone light→dark, 4° hue spread, end 3.82:1    ALL PASS
     Every mark clears 3:1 against the surface. As above, the band and chroma
     complaints are the neutral doing its job. */
  --c-chart-replied: #38d9be;
  --c-chart-neutral: #77858a;
  --c-chart-residual: #a78bfa;
  --c-chart-open: #ffb454;
  --c-chart-interest: #85d59a;
  --c-chart-no-interest: #d98bbd;
  --c-chart-depth-1: #d6e2f3;
  --c-chart-depth-2: #aec3e7;
  --c-chart-depth-3: #7f9fd0;
  --c-chart-depth-4: #5377ae;

  --c-chrome-500: #232d31;     --c-chrome-500-rgb: 35, 45, 49;
  --c-chrome-600: #1a2225;     --c-chrome-600-rgb: 26, 34, 37;
  --c-chrome-700: #151b1e;     --c-chrome-700-rgb: 21, 27, 30;
  --c-chrome-800: #0f1316;     --c-chrome-800-rgb: 15, 19, 22;
  --c-chrome-900: #0a0f13;     --c-chrome-900-rgb: 10, 15, 19;
  --c-ink: #eef2f3;            --c-ink-rgb: 238, 242, 243;
  --c-ink-dim: #98a4a8;        --c-ink-dim-rgb: 152, 164, 168;
  --c-ink-soft: #98a4a8;       --c-ink-soft-rgb: 152, 164, 168;
  --c-accent-200: #45ecd0;     --c-accent-200-rgb: 69, 236, 208;
  --c-accent-300: #38d9be;     --c-accent-300-rgb: 56, 217, 190;
  --c-accent-tint: #38d9be;    --c-accent-tint-rgb: 56, 217, 190;
  --c-amber: #947019;          --c-amber-rgb: 148, 112, 25;
  --c-amber-dark: #9d5f38;     --c-amber-dark-rgb: 157, 95, 56;
  --c-amber-dark-alt: #7f4b2f; --c-amber-dark-alt-rgb: 127, 75, 47;
  --c-amber-ink: #ffb454;      --c-amber-ink-rgb: 255, 180, 84;
  --c-blue-100: #d6e2f3;       --c-blue-100-rgb: 214, 226, 243;
  --c-blue-200: #aec3e7;       --c-blue-200-rgb: 174, 195, 231;
  --c-blue-200-alt: #9eb6d9;   --c-blue-200-alt-rgb: 158, 182, 217;
  --c-blue-300: #5377ae;       --c-blue-300-rgb: 83, 119, 174;
  --c-blue-400: #5a73bb;       --c-blue-400-rgb: 90, 115, 187;
  --c-blue-500: #5f70c5;       --c-blue-500-rgb: 95, 112, 197;
  --c-border: #1e2529;         --c-border-rgb: 30, 37, 41;
  --c-brand-pill:
    transparent;
  --c-brand-pill-ink: #eef2f3; --c-brand-pill-ink-rgb: 238, 242, 243;
  --c-brand-tile: #000000;     --c-brand-tile-rgb: 0, 0, 0;
  --c-close-filter: invert(1) grayscale(100%) brightness(200%);
  --c-control: #313d43;        --c-control-rgb: 49, 61, 67;
  --c-control-hover: #3b494f;  --c-control-hover-rgb: 59, 73, 79;
  --c-control-ink: #98a4a8;    --c-control-ink-rgb: 152, 164, 168;
  --c-green: #4b8161;          --c-green-rgb: 75, 129, 97;
  --c-green-100: #aadeb2;      --c-green-100-rgb: 170, 222, 178;
  --c-green-100-alt: #c7eacc;  --c-green-100-alt-rgb: 199, 234, 204;
  --c-green-ink: #85d59a;      --c-green-ink-rgb: 133, 213, 154;
  --c-grey-100: #1a2124;       --c-grey-100-rgb: 26, 33, 36;
  --c-grey-200: #232b2f;       --c-grey-200-rgb: 35, 43, 47;
  --c-grey-300: #3a4449;       --c-grey-300-rgb: 58, 68, 73;
  --c-grey-400: #77858a;       --c-grey-400-rgb: 119, 133, 138;
  --c-grey-50: #1a2225;        --c-grey-50-rgb: 26, 34, 37;
  --c-grey-500: #98a4a8;       --c-grey-500-rgb: 152, 164, 168;
  --c-mark-bar: #38d9be;       --c-mark-bar-rgb: 56, 217, 190;
  --c-mark-bar-alt: #a78bfa;   --c-mark-bar-alt-rgb: 167, 139, 250;
  --c-mark-dot: #a78bfa;       --c-mark-dot-rgb: 167, 139, 250;
  --c-mark-dot-lit: #38d9be;   --c-mark-dot-lit-rgb: 56, 217, 190;
  --c-nav: #0b0e10;            --c-nav-rgb: 11, 14, 16;
  --c-nav-current: #26302f;    --c-nav-current-rgb: 38, 48, 47;
  --c-nav-current-ink: #eef2f3; --c-nav-current-ink-rgb: 238, 242, 243;
  --c-nav-ink: #98a4a8;        --c-nav-ink-rgb: 152, 164, 168;
  --c-nav-ink-strong: #eef2f3; --c-nav-ink-strong-rgb: 238, 242, 243;
  --c-nav-line: #1e2529;       --c-nav-line-rgb: 30, 37, 41;
  --c-orange: #ae632d;         --c-orange-rgb: 174, 99, 45;
  --c-orange-hot: #b95a43;     --c-orange-hot-rgb: 185, 90, 67;
  --c-page: #0f1316;           --c-page-rgb: 15, 19, 22;
  --c-page-glow:
    radial-gradient(640px 420px at 72% 26%, rgba(56, 217, 190, 0.10), transparent 70%),
    radial-gradient(560px 420px at 62% 78%, rgba(167, 139, 250, 0.07), transparent 70%);
  --c-page-ink: #eef2f3;       --c-page-ink-rgb: 238, 242, 243;
  --c-red: #b85958;            --c-red-rgb: 184, 89, 88;
  --c-red-100: #e5a6a9;        --c-red-100-rgb: 229, 166, 169;
  --c-red-ink: #e08d8a;        --c-red-ink-rgb: 224, 141, 138;
  --c-red-ink-alt: #e29694;    --c-red-ink-alt-rgb: 226, 150, 148;
  --c-surface: #151b1e;        --c-surface-rgb: 21, 27, 30;
  --c-switch-knob:
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23eef2f3'/%3e%3c/svg%3e");
  --c-tab-line: #000000;       --c-tab-line-rgb: 0, 0, 0;
  --c-teal: #4a7784;           --c-teal-rgb: 74, 119, 132;
  --c-violet: #a78bfa;         --c-violet-rgb: 167, 139, 250;
  --c-crm: #e8a184;            --c-crm-rgb: 232, 161, 132;
}