:root {
  /* color */
  --color-primary: 271, 77%, 56%; /* #8a33ea - Lavender 600 */
  --color-secondary: 271, 100%, 98%; /* #f9f5ff - Lavender 50 */
  --color-info: 215, 100%, 64%; /* #4994ff */
  --color-success: 134, 100%, 35%; /* #00b42a */
  --color-destructive: 0, 90%, 60%; /* #f53f3f */
  --color-warning: 48, 100%, 51%; /* #FFCC05 */
  --color-disabled: 0, 0%, 64%; /* #a4a4a4 */

  --color-text-primary: 0, 0%, 20%; /* #333 */
  --color-text-secondary: 0, 0%, 33%; /* #555 */
  --color-text-tertiary: 0, 0%, 60%; /* #999 */
  --color-text-disabled: 271, 67%, 32%; /* #531c87 - Lavender 900 */
  --color-text-readonly: 271, 67%, 32%; /* #531c87 - Lavender 900 */
  --color-text-icon: 0, 0%, 20%; /* #333 */

  --color-background-primary: 0, 0%, 95%; /* #f1f1f1 */
  --color-background-secondary: 271, 77%, 56%; /* #8a33ea - Lavender 600 (used at 0.1 opacity) */
  --color-background-popover: 0, 0%, 100%; /* #ffffffcc */
  --color-background-overlay: 0, 0%, 0%, 0.6; /* rgba(0,0,0,0.6) */
  --color-background-active: 271, 81%, 47%; /* #7522ce - Lavender 700 */
  --color-background-switch: 0, 0%, 60%; /* #999 */

  --color-border: 0, 0%, 85%; /* #c9cdd4 */
  --color-border-thin: 0, 0%, 100%; /* #fff */
  --color-border-pagination: 0, 0%, 93%; /* #eee */

  /* Home token list toolbar (Figma Xfi) */
  --color-token-list-control-bg: 228, 12%, 94%;
  --color-token-list-placeholder: 0, 0%, 50%; /* #808080 */
}

.dark:root{
  --color-primary: 271, 96%, 75%; /* #bb86fc - Lavender 400 */
  --color-secondary: 271, 91%, 15%; /* #1a0536 */
  --color-background-primary: 250, 27%, 6%; /* #0c0b14 */
  --color-background-secondary: 271, 96%, 75%; /* #bb86fc - Lavender 400 */
  --color-background-popover: 228, 17%, 12%; /* #191B23 */
  --color-background-active: 271, 77%, 56%; /* #8a33ea - Lavender 600 */

  --color-text-primary: 0, 0%, 100%; /* #fff */
  --color-text-secondary: 0, 0%, 86%; /* #DBDBDB */
  --color-text-tertiary: 0, 0%, 67%; /* #ACACAC */
  --color-text-disabled: 0, 0%, 69%; /* #B0B0B0 */
  --color-text-readonly: 271, 67%, 32%; /* #531c87 - Lavender 900 */
  
  --color-border: 0, 0%, 100%;
  --alpha-border: 0.1;
  --color-border-thin: 0, 0%, 100%;
  --alpha-border-thin: 0.1;

  --color-token-list-control-bg: 132, 83%, 2%; /* ~#010b02 */
  --color-token-list-placeholder: 0, 0%, 50%;
}