/**
 * Compatibility aliases for variable names the CMS reads but never defined.
 *
 * THESE ARE NOT TOKENS. Do not reach for them in new code, and do not add to
 * the list. The canonical names are in ts_design_tokens/css/tokens.css and in
 * the theme's own :root. Every name below is an alias that exists only to
 * stop a page depending on the browser extension for its colours.
 *
 * How this happened, because it is not obvious from the code.
 *
 * The extension's GlobalCSSVars.jsx appends a style element carrying a :root
 * block to document.head on every page its content script runs on, and that
 * append is not scoped to the extension's own injected UI. tubespanner.com is
 * one of those pages. So for years the CMS has been able to read a set of
 * extension-owned variables, and some of it started doing exactly that.
 *
 * The result: those declarations were painted correctly for anyone with the
 * extension installed and computed to NOTHING for everyone else, because an
 * unresolved var() falls back to nothing rather than to a default. Confirmed
 * with the extension session (react-extension, GlobalCSSVars.jsx) rather than
 * inferred from symptoms.
 *
 * Where they are used: every remaining one is in
 * js/src/components/pages/onboarding/. The two that were outside it, on the
 * Video Tree zoom control, were fixed separately by pointing them at
 * --primary-light, which is what they always meant.
 *
 * WHEN TO DELETE THIS FILE: when the onboarding pages are either rewritten
 * against the real tokens or retired. TS-5158 already retired the forced
 * entry into that flow; the page stays reachable and is still linked from
 * Drupal's new-registration welcome email, which is the only reason this is
 * worth defining at all.
 *
 * Two values are deliberately NOT copied from what the extension publishes:
 *
 *   --ts-primary-color    extension publishes #712f79, the PRE-repaint brand
 *                         purple. Copying it would enshrine the old colour as
 *                         the definition of the name. It maps to the signed
 *                         off #672c72, so extension users see the onboarding
 *                         page correct itself by ten points of red once.
 *   --ts-secondary-color  extension publishes #f26419, which carries white at
 *                         only 3.18:1 and was a live AA failure until TS-5128.
 *                         It maps to #c2410c, 5.18:1.
 *
 * Everything else maps to the nearest house token, so this file adds no new
 * colours to the estate. Seventeen names, nine values, seven of which were
 * already signed off on 2026-07-23.
 */

:root {
  /* Brand purple family. */
  --ts-primary-color: var(--primary-color, #672c72);          /* 9.63:1 on white */
  --ts-primary-hover-color: var(--primary-hover, #521f5a);
  --ts-lightest-primary-color: var(--primary-light, #F2EEF8); /* same colour the extension publishes */
  --ts-darkpurple: var(--title, #3E2155);
  /* A mid purple with no house equivalent. Decorative only: nothing sits on
     it as text on this page, which is why a 3.4 value is acceptable here and
     would not be on a control. */
  --ts-primary-base-color: #E5BAF1;

  /* Secondary / orange family. */
  --ts-secondary-color: var(--secondary-color, #c2410c);      /* 5.18:1 on white */
  --ts-secondary-hover: #a8380a;
  --ts-seo-tip-bg-color: rgba(194, 65, 12, 0.10);             /* a tint, so it stays a literal */

  /* Text. */
  --theme-font-color: var(--title, #3E2155);                  /* 13.52:1 */
  --theme-text-color-v2: var(--paragraph, #6b6880);           /* 5.36:1 */
  --theme-input-font-color: var(--paragraph, #6b6880);
  --ts-pargraph-color: var(--paragraph, #6b6880);             /* the typo is the extension's, not ours */

  /* Surfaces and edges. */
  --ts-bg-color: #fefefe;
  --theme-panel-color: #ffffff;
  --theme-block-bg-color: #ffffff;
  --theme-border-color: var(--ts-border-quiet, rgba(62, 33, 85, 0.10));
  --theme-input-border-color: var(--ts-border-control, #6f6786);  /* 5.30:1 */
}

/**
 * Dark mode.
 *
 * Live rather than commented out, which is a deliberate divergence from the
 * scaffold convention in tokens.css. The CMS never sets data-theme, so this
 * block matches nothing on our pages today and is inert in practice. Writing
 * it as a real selector rather than a comment means it can be switched on and
 * looked at the moment the CMS grows a theme toggle, and it gives the
 * extension something real to point at in the meantime.
 *
 * The extension currently publishes only two of these per theme
 * (--ts-bg-color and --ts-pargraph-color) and the other fifteen as single
 * light values, so the onboarding page cannot presently be coherent in dark
 * for anyone. This block is the first version of it that could be.
 *
 * Every pair below measured against the dark ground #151517, the value the
 * extension already uses, and the dark panel #1e1922:
 *
 *   font-color   #efe9f2  15.29 / 14.46      primary   #c983d1  6.64 / 6.28
 *   text-v2      #bebfcc  10.00 /  9.46      secondary #f26419  5.74 / 5.43
 *   input-font   #a79fb0   7.15 /  6.76      input-border #8b83a0  5.08 / 4.81
 *
 * Primary and secondary reuse the dark values signed off 2026-07-23 for the
 * button roles, so dark mode does not acquire a second purple.
 */
:root[data-theme="dark"] {
  --ts-primary-color: #c983d1;
  --ts-primary-hover-color: #d9a3df;
  --ts-lightest-primary-color: #2b2130;
  --ts-darkpurple: #efe4f3;
  --ts-primary-base-color: #8e5d99;

  --ts-secondary-color: #f26419;
  --ts-secondary-hover: #ff8546;
  --ts-seo-tip-bg-color: rgba(242, 100, 25, 0.16);

  --theme-font-color: #efe9f2;
  --theme-text-color-v2: #bebfcc;
  --theme-input-font-color: #a79fb0;
  --ts-pargraph-color: #bebfcc;

  --ts-bg-color: #151517;
  --theme-panel-color: #1e1922;
  --theme-block-bg-color: #241e29;
  --theme-border-color: rgba(255, 255, 255, 0.12);
  --theme-input-border-color: #8b83a0;
}