title: CSS custom properties in box-shadow color function render incorrectly in Safari
body: <p>Is this a Safari bug or am I doing something wrong?</p>
  
  <p>Check out this CodePen in Safari vs Chrome and Firefox: <a href="https://codepen.io/mattaningram/pen/zWVxzR" rel="noreferrer">https://codepen.io/mattaningram/pen/zWVxzR</a></p>
  
  <p>Or run code snippet below:</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>.item {
    --itemColor: 200, 0, 0;
    --itemColorHex: #C80000;
    
    width: 50vw;
    height: 50vh;
    
    background-color: rgba( var(--itemColor), 1 );
    
    -webkit-box-shadow: 0 0 15px 10px rgba( var(--itemColor), .5 );
    box-shadow: 0 0 15px 10px rgba( var(--itemColor), .5 );
    /* box-shadow: 0 0 15px 10px var(--itemColorHex); THIS WORKS */
    /* color: rgba( var(--itemColor), .5 ); BOX-SHADOW INHERITS THIS PROPERLY IF UNCOMMENTED */
  }
  
  .wrapper {
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>In Safari the box-shadow renders as black (it should be red) with no alpha. This does work if you don't use <code>rgba</code> (see commented out <code>box-shadow</code> line).</p>
  
  <p>Oddly Safari inspect element recognizes the CSS call and is able to identify the CSS custom property value:</p>
  
  <p><img src="https://i.imgur.com/8NE7Bsz.png" alt="Safari Inspect Element"></p>
  
  <p>Even stranger is that if you set the <code>color</code> (text color) property of the item to the custom property the box-shadow inherits it and it works (sadly in my actual implementation I need multiple box-shadows so this doesn't fix my issue).</p>