input_pill: Move input pill styles to app_variables.css.

This prep commit consolidates the input pill styles into
`app_variables.css` and uses the light-dark notation for the color
variables to avoid specificity issues that arose from `dark_theme.css`.

web/styles/app_variables.css

@@ -1860,7 +1860,7 @@
         hsl(0deg 0% 100% / 85%),
         hsl(0deg 0% 0% / 40%)
     );
-    --color-background-compose-direct-recipient-pill-container: light-dark(
+    --color-background-pill-container: light-dark(
         hsl(0deg 0% 100%),
         hsl(0deg 0% 0% / 20%)
     );
@@ -1868,6 +1868,10 @@
         hsl(0deg 0% 93%),
         hsl(0deg 0% 0% / 20%)
     );
+    --color-border-pill-container: light-dark(
+        hsl(0deg 0% 0% / 15%),
+        hsl(0deg 0% 0% / 60%)
+    );
 
     /* Inbox view constants - Values from Figma design */
     --width-inbox-search: 29.0625em; /* 465px / 16px em */

web/styles/dark_theme.css

@@ -107,7 +107,6 @@
 
     textarea,
     select,
-    .pill-container,
     .user-status-content-wrapper,
     .custom-time-input-value,
     #organization-permissions .dropdown-widget-button,

web/styles/input_pill.css

@@ -4,8 +4,10 @@
     flex-wrap: wrap;
     min-width: 0;
 
+    background-color: var(--color-background-pill-container);
+
     padding: var(--outer-spacing-input-pill-container);
-    border: 1px solid hsl(0deg 0% 0% / 15%);
+    border: 1px solid var(--color-border-pill-container);
     border-radius: 4px;
     align-items: center;
 
@@ -236,9 +238,6 @@
 
 #compose-direct-recipient .pill-container {
     border: 1px solid var(--color-compose-recipient-box-border-color);
-    background-color: var(
-        --color-background-compose-direct-recipient-pill-container
-    );
 
     .input:first-child:empty::before {
         content: attr(data-no-recipients-text);