title: Overriding :root CSS variables from inner scopes
body: <p>In our <a href="https://stackoverflow.design" rel="noreferrer">design system</a> at Stack Overflow, we use Less to compile CSS color values.</p>
  
  <p>We have global Less variables like <code>@orange-500</code> that are frequently modified for hover states, building border styling, background colors, etc.</p>
  
  <p>In Less, this is written as <code>darken(@orange-500, 5%)</code>. I'm trying to achieve something similar using native CSS variables. Switching to CSS variables will allow us to ship features that rely on theming (Stack Exchange Network, Dark Mode, etc.) much faster, with way fewer lines of CSS, <em>while</em> enabling swapping variables on media query (high contrast, dark mode, etc).</p>
  
  <p>This example of overriding our color’s lightness value in <code>hsl</code> works when the variables are scoped to a CSS class:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.card {
    --orange: hsl(255, 72%, var(--lightness, 68%));
    background: var(--orange);
  }
  .card:hover {
    --lightness: 45%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="card"&gt;
    Hello world
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>However, we need to specify our color variables globally in a single, swappable place to support global theming, but this doesn't work as expected:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>:root {
    --orange: hsl(255, 72%, var(--lightness, 68%));
  }
  .card {
    background: var(--orange);
  }
  .card:hover {
    --lightness: 45%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="card"&gt;
    Hello world
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I've tried switching from <code>:root</code> to <code>html</code> or <code>body</code> without any luck. Any workarounds to this?</p>